Skip to content
This repository has been archived by the owner on Jul 3, 2023. It is now read-only.

fix: lang selector keyboard accessibility #2927

Merged
merged 4 commits into from Oct 17, 2022

Conversation

EmmaDawsonDev
Copy link
Contributor

@EmmaDawsonDev EmmaDawsonDev commented Oct 15, 2022

Description

The new language selector dropdown had a small bug in that if you tabbed through the selections with the keyboard it would automatically change the language to French as you tabbed away from the dropdown. This is not the expected behaviour.

I added a check to the event to make sure only space and enter keys could trigger a language change.

I also added an aria-expanded attribute to the button so that screen reader users are made aware that the button has a popup and whether it is open or closed.

Related Issues

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run npm run lint:js -- --fix and/or npm run lint:md -- --fix for my JavaScript and/or Markdown changes.
    • This is important as most of the cases your code changes might not be correctly linted
  • I have run npm run test to check if all tests are passing, and/or npm run test -- -u to update snapshots if I created and/or updated React Components.
  • I have checked that the build works locally and that npm run build work fine.
  • I've covered new added functionality with unit tests if necessary.

@codecov-commenter
Copy link

Codecov Report

Base: 66.02% // Head: 66.99% // Increases project coverage by +0.96% 🎉

Coverage data is based on head (dadc0b0) compared to base (fd57b87).
Patch has no changes to coverable lines.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2927      +/-   ##
==========================================
+ Coverage   66.02%   66.99%   +0.96%     
==========================================
  Files         118      136      +18     
  Lines        1351     1533     +182     
  Branches      342      358      +16     
==========================================
+ Hits          892     1027     +135     
- Misses        422      464      +42     
- Partials       37       42       +5     
Impacted Files Coverage Δ
src/__fixtures__/hooks.tsx 100.00% <ø> (ø)
src/__fixtures__/page.tsx 94.11% <ø> (-5.89%) ⬇️
...components/ApiComponents/Components/ApiHeading.tsx 100.00% <ø> (+100.00%) ⬆️
...rc/components/ApiComponents/Components/ApiLink.tsx 100.00% <ø> (+100.00%) ⬆️
...ents/ApiComponents/Components/SourceLink/index.tsx 50.00% <ø> (+50.00%) ⬆️
...ApiComponents/Components/VersionSelector/index.tsx 100.00% <ø> (+100.00%) ⬆️
src/components/ApiComponents/index.tsx 100.00% <ø> (+100.00%) ⬆️
src/components/ArticleComponents/Alert/index.tsx 100.00% <ø> (ø)
...ents/ArticleComponents/AuthorList/Author/index.tsx 88.88% <ø> (ø)
.../components/ArticleComponents/AuthorList/index.tsx 100.00% <ø> (ø)
... and 171 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

Copy link
Member

@ovflowd ovflowd left a comment

Choose a reason for hiding this comment

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

Forgot to approve this one 🙈

:shipit:

@ovflowd ovflowd enabled auto-merge (squash) October 17, 2022 09:16
@ovflowd ovflowd added hacktoberfest-accepted Used to label PR's a11y Acessibility Issues labels Oct 17, 2022
@ovflowd ovflowd merged commit 6dbdad2 into nodejs:main Oct 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y Acessibility Issues hacktoberfest-accepted Used to label PR's
Projects
None yet
4 participants