Skip to content

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

Merged
cee-chen merged 5 commits intoelastic:mainfrom
alexwizp:#8947
May 7, 2024
Merged

[EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation#7740
cee-chen merged 5 commits intoelastic:mainfrom
alexwizp:#8947

Conversation

@alexwizp
Copy link
Contributor

@alexwizp alexwizp commented May 7, 2024

Closes: https://github.com/elastic/security-team/issues/8947

Summary

The Security icon popover announces "Security, button", then "Security, description" to screen readers. This is caused by the aria-label and tooltip aria-describedby text being the same. Screen reader users do not have context that this will open the Security Solution quick navigation popover (with just the top-level links). We can improve this by updating the information in the EUI Tooltip content prop. Screenshot and linked CodeSandbox below.

What was changed?:

  1. aria-label attribute was updated

Screen:

image

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • Updated the Figma library counterpart

@alexwizp alexwizp marked this pull request as ready for review May 7, 2024 12:12
@alexwizp alexwizp requested a review from a team as a code owner May 7, 2024 12:12
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
@cee-chen
Copy link
Contributor

cee-chen commented May 7, 2024

@1Copenut before I fix the snapshots, do you mind checking what the new punctuation experience is like on JAWS?

@alexwizp
Copy link
Contributor Author

alexwizp commented May 7, 2024

@cee-chen @1Copenut @mgadewoll Thanks, although we have already used the version with "" in other places in Kibana and cloud, I like the version with a comma too

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@1Copenut
Copy link
Contributor

1Copenut commented May 7, 2024

@1Copenut before I fix the snapshots, do you mind checking what the new punctuation experience is like on JAWS?

The new experience is solid. I checked NVDA + Chrome and FF, and JAWS + Chrome. All three announced the name, short pause, then "quick navigation menu".

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the awesome contribution @alexwizp!

@cee-chen cee-chen merged commit 1eb6273 into elastic:main May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants