Skip to content
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.

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

Improve accessibility of diff options button #17062

Merged
merged 5 commits into from
Jul 21, 2023
Merged

Conversation

sergiou87
Copy link
Member

@sergiou87 sergiou87 commented Jul 11, 2023

xref. https://github.com/github/accessibility-audits/issues/4903
xref. https://github.com/github/accessibility-audits/issues/4914

Description

This PR sets the right accessibility label and aria-expanded attributes to the diff options button.

Screenshots

CleanShot.2023-07-11.at.17.37.27.mp4
CleanShot.2023-07-11.at.18.31.40.mp4

Release notes

Notes: [Improved] Improve accessibility of diff options

@sergiou87 sergiou87 marked this pull request as ready for review July 11, 2023 16:33
@tidy-dev
Copy link
Contributor

tidy-dev commented Jul 19, 2023

I updated this PR to not use the <button> (native) title attribute because it uses the system tooltip and is inconsistent with our other button's tooltips and not accessible to keyboard users.

CleanShot 2023-07-19 at 15 01 50

I instead implemented the tooltip approach from our <Button> (with a capital) react component so that the "Diff Options" would display on mouse hover and keyboard focus. (Diff options I assume doesn't use that component as we are applying some custom styling here) And, added the aria-label since the title would no longer announce.

CleanShot.2023-07-19.at.15.01.12.mp4

@tidy-dev tidy-dev requested a review from jacortinas July 19, 2023 19:05
@tidy-dev tidy-dev merged commit afb5c16 into development Jul 21, 2023
7 checks passed
@tidy-dev tidy-dev deleted the diff-settings-a11y branch July 21, 2023 12:03
@0071650806
Copy link

بسیار عالی هست

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.

4 participants