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

Update the panebuttons to support tab navigation #45162

Merged
merged 2 commits into from
Mar 7, 2022

Conversation

jmkulwik
Copy link
Contributor

@jmkulwik jmkulwik commented Mar 4, 2022

Just a quick update to make the PaneButton subcomponent of PaneHeader tab navigable.

Before
NoTabNav

After
WithTabNav

Links

Testing story

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

@jmkulwik jmkulwik requested a review from a team March 4, 2022 23:11
function onKeyDownWrapper(event) {
const {onClick} = props;
if (
event.key === ' ' ||
Copy link

Choose a reason for hiding this comment

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

This is new to me - what key does this represent?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oof. To be completely honest, I'm not sure either 😬. I copied it straight from here: https://benfrain.com/converting-divs-into-accessible-pseudo-buttons/

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh huh. Looks like it's the newer version of "SpaceBar"
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

Copy link

Choose a reason for hiding this comment

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

Oh interesting! Today I learned!

return (
<div
role="button"
tabIndex={0}
Copy link

Choose a reason for hiding this comment

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

Nit - I don't think this needs to be an object, I think it can just be a string - "0"

Copy link

@epeach epeach left a comment

Choose a reason for hiding this comment

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

LGTM! Yay for accesibility!

@jmkulwik jmkulwik merged commit 0ef9e1c into staging Mar 7, 2022
@jmkulwik jmkulwik deleted the make-buttons-accessible branch March 7, 2022 19:33
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.

None yet

2 participants