Skip to content

Commit

Permalink
📝 Update aria-label in Popover (#2570)
Browse files Browse the repository at this point in the history 
* 📝 Remove with Tooltip story

* ♿️ Update aria

* ♿️ Update aria

* 📝 Update naming
  • Loading branch information
@martalalik
martalalik authored Oct 13, 2022
1 parent 65687c8 commit cc44939
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 72 deletions.
4 changes: 0 additions & 4 deletions packages/eds-core-react/src/components/Popover/Popover.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,6 @@ It is recommended to use <code>trapFocus</code> in every Popover which contains

<Story id="data-display-popover--activate-on-hover"/>

### With Tooltip

<Story id="data-display-popover--with-tooltip"/>

### With close button

In some cases an explicit close button is recommended.
Expand Down
97 changes: 29 additions & 68 deletions packages/eds-core-react/src/components/Popover/Popover.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
Popover,
PopoverProps,
Icon,
Tooltip,
EdsProvider,
Density,
} from '../..'
Expand All @@ -20,7 +19,6 @@ import {
email,
home,
instrument,
more_vertical,
pipe_support,
platform,
settings,
Expand Down Expand Up @@ -86,19 +84,16 @@ export const Introduction: Story<PopoverProps> = (args) => {
<>
<Button
aria-haspopup
id="default-popover-anchor"
aria-controls="default-popover"
aria-expanded={isOpen}
ref={referenceElement}
onClick={handleOpen}
>
Click me!
Open popover
</Button>

<Popover
open={isOpen}
{...args}
id="default-popover"
anchorEl={referenceElement.current}
onClose={handleClose}
>
Expand All @@ -114,7 +109,7 @@ export const Introduction: Story<PopoverProps> = (args) => {
</Button>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
<Typography variant="body_short">Popover content</Typography>
</Popover.Content>
</Popover>
</>
Expand All @@ -140,17 +135,15 @@ export const ActivateOnClick: Story<PopoverProps> = () => {
return (
<>
<Button
id="click-popover-anchor"
aria-controls="click-popover"
aria-haspopup
aria-expanded={isOpen}
ref={anchorRef}
onClick={openPopover}
>
Click to activate
</Button>

<Popover
aria-expanded={isOpen}
id="click-popover"
anchorEl={anchorRef.current}
onClose={closePopover}
open={isOpen}
Expand All @@ -161,7 +154,7 @@ export const ActivateOnClick: Story<PopoverProps> = () => {
<Popover.Title>Title</Popover.Title>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
<Typography variant="body_short">Popover content</Typography>
</Popover.Content>
</Popover>
</>
Expand Down Expand Up @@ -191,8 +184,7 @@ export const ActivateOnHover: Story<PopoverProps> = () => {
return (
<>
<Button
id="hover-popover-anchor"
aria-controls="hover-popover"
aria-haspopup
aria-expanded={isOpen}
ref={anchorRef}
onMouseOver={handleHover}
Expand All @@ -203,7 +195,6 @@ export const ActivateOnHover: Story<PopoverProps> = () => {
</Button>

<Popover
id="hover-popover"
anchorEl={anchorRef.current}
onClose={handleClose}
open={isOpen}
Expand All @@ -214,45 +205,14 @@ export const ActivateOnHover: Story<PopoverProps> = () => {
<Popover.Title>Title</Popover.Title>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
<Typography variant="body_short">Popover content</Typography>
</Popover.Content>
</Popover>
</>
)
}
ActivateOnHover.storyName = 'Activate onHover'

export const WithTooltip: Story<PopoverProps> = () => {
const [isOpen, setIsOpen] = useState<boolean>(false)
const anchorRef = useRef<HTMLButtonElement>(null)

const openPopover = () => setIsOpen(true)
const closePopover = () => setIsOpen(false)

return (
<>
<Tooltip title="Menu">
<Button ref={anchorRef} variant="ghost_icon" onClick={openPopover}>
<Icon data={more_vertical} />
</Button>
</Tooltip>
<Popover
anchorEl={anchorRef.current}
open={isOpen}
onClose={closePopover}
placement="top"
>
<Popover.Header>
<Popover.Title>Title</Popover.Title>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
</Popover.Content>
</Popover>
</>
)
}

export const WithCloseButton: Story<PopoverProps> = () => {
const [isOpen, setIsOpen] = useState<boolean>(false)
const anchorRef = useRef<HTMLButtonElement>(null)
Expand All @@ -263,22 +223,21 @@ export const WithCloseButton: Story<PopoverProps> = () => {
return (
<>
<Button
id="click-popover-anchor"
aria-controls="click-popover"
aria-haspopup
aria-expanded={isOpen}
ref={anchorRef}
onClick={openPopover}
>
Click to activate
Open popover
</Button>

<Popover
id="click-popover"
anchorEl={anchorRef.current}
onClose={closePopover}
open={isOpen}
placement="top"
trapFocus
withinPortal
aria-expanded={isOpen}
>
<Popover.Header>
<Popover.Title>Title</Popover.Title>
Expand All @@ -292,7 +251,7 @@ export const WithCloseButton: Story<PopoverProps> = () => {
</Button>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
<Typography variant="body_short">Popover content</Typography>
</Popover.Content>
</Popover>
</>
Expand Down Expand Up @@ -324,16 +283,15 @@ export const PersistentPopover: Story<PopoverProps> = () => {
return (
<>
<Button
id="click-popover-anchor"
aria-controls="click-popover"
aria-haspopup
aria-expanded={isOpen}
ref={anchorRef}
onClick={openPopover}
>
Click to activate
Open popover
</Button>

<Popover
id="click-popover"
aria-expanded={isOpen}
anchorEl={anchorRef.current}
open={isOpen}
Expand Down Expand Up @@ -373,17 +331,15 @@ export const Compact: Story<PopoverProps> = () => {
return (
<EdsProvider density={density}>
<Button
id="click-popover-anchor"
aria-controls="click-popover"
aria-haspopup
aria-expanded={isOpen}
ref={anchorRef}
onClick={openPopover}
>
Click to activate
Open popover
</Button>

<Popover
id="click-popover"
aria-expanded={isOpen}
anchorEl={anchorRef.current}
onClose={closePopover}
open={isOpen}
Expand All @@ -394,7 +350,7 @@ export const Compact: Story<PopoverProps> = () => {
<Popover.Title>Title</Popover.Title>
</Popover.Header>
<Popover.Content>
<Typography variant="body_short">Content</Typography>
<Typography variant="body_short">Popover content</Typography>
</Popover.Content>
</Popover>
</EdsProvider>
Expand Down Expand Up @@ -432,11 +388,16 @@ export const AppLauncher: Story<PopoverProps> = () => {

return (
<>
<Tooltip title="App Launcher">
<Button ref={anchorRef} variant="ghost_icon" onClick={openPopover}>
<Icon data={apps} />
</Button>
</Tooltip>
<Button
aria-haspopup
aria-expanded={isOpen}
aria-label="app launcher"
ref={anchorRef}
variant="ghost_icon"
onClick={openPopover}
>
<Icon data={apps} />
</Button>
<Popover
anchorEl={anchorRef.current}
open={isOpen}
Expand Down

0 comments on commit cc44939

Please sign in to comment.