Skip to content

[EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation #7740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 5 commits into from
May 7, 2024
Merged

[EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation #7740

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
22dd9f2
[EuiCollapsedNavButton][a11y] Update `aria-label` for enhanced screen…
alexwizp May 7, 2024
a00085d
update changelog
alexwizp May 7, 2024
be21e0c
[PR feedback] changelog copy
cee-chen May 7, 2024
75eb08e
[PR feedback] Trying out punctuation change in JAWS
cee-chen May 7, 2024
2757458
update snapshots
alexwizp May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelogs/upcoming/7740.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- [EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation
Comment thread
cee-chen marked this conversation as resolved.
Outdated
Comment thread
cee-chen marked this conversation as resolved.
Outdated
4 changes: 2 additions & 2 deletions ...ble_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Some solution"
aria-label="\\"Some solution\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand All @@ -33,7 +33,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Solution view"
aria-label="\\"Solution view\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion ...components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('KibanaCollapsibleNavSolution', () => {
);
expect(container.firstChild).toMatchSnapshot();

fireEvent.click(getByLabelText('Solution view'));
fireEvent.click(getByLabelText('"Solution view" quick navigation menu'));
await waitForEuiPopoverOpen();
expect(getByText('Some other solution')).toBeInTheDocument();

Expand Down
2 changes: 1 addition & 1 deletion ...ollapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`EuiCollapsibleNavItem renders a collapsed button icon when in a collaps
data-test-subj="test subject string"
>
<button
aria-label="Item"
aria-label="\\"Item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
4 changes: 2 additions & 2 deletions ..._nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
>
<button
aria-describedby="generated-id"
aria-label="Nav item"
aria-label="\\"Nav item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`EuiCollapsedNavButton renders isSelected 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<a
aria-label="Nav item"
aria-label="\\"Nav item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
data-test-subj="euiCollapsedNavButton"
href="#"
Expand Down
4 changes: 2 additions & 2 deletions ...le_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`EuiCollapsedNavItem renders a popover if items are passed 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Item"
aria-label="\\"Item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand All @@ -32,7 +32,7 @@ exports[`EuiCollapsedNavItem renders an icon button/link if href is passed 1`] =
data-test-subj="test subject string"
>
<a
aria-label="Item"
aria-label="\\"Item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
href="#"
Expand Down
2 changes: 1 addition & 1 deletion ...nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Item"
aria-label="\\"Item\\" quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
9 changes: 8 additions & 1 deletion src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
euiCollapsedNavButtonStyles,
euiCollapsedNavItemTooltipStyles,
} from './collapsed_nav_button.styles';
import { useEuiI18n } from '../../../i18n';

export const EuiCollapsedNavButton: FunctionComponent<
Omit<
Expand Down Expand Up @@ -63,6 +64,12 @@ export const EuiCollapsedNavButton: FunctionComponent<
hideToolTip && tooltipStyles.hidden,
];

const buttonIconAriaLabel = useEuiI18n(
'euiCollapsedNavButton.ariaLabelButtonIcon',
'"{title}" quick navigation menu',
Comment thread
cee-chen marked this conversation as resolved.
Outdated
{ title }
);

return (
<EuiToolTip
content={title}
Expand All @@ -77,7 +84,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
color="text"
href={href}
onClick={onClick}
aria-label={title}
aria-label={buttonIconAriaLabel}
{...(linkProps as EuiButtonIconPropsForAnchor)} // Exclusive union shenanigans
className={buttonClassName}
css={buttonCssStyles}
Expand Down