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

Stop using Reakit <Composite> for the station picker #66

Open
idreyn opened this issue Nov 21, 2022 · 1 comment
Open

Stop using Reakit <Composite> for the station picker #66

idreyn opened this issue Nov 21, 2022 · 1 comment
Labels
tech-debt Addressing technical debt

Comments

@idreyn
Copy link
Collaborator

idreyn commented Nov 21, 2022

I originally used this component because I wanted good arrow key support in this menu — but I'm finding:

  1. It's slow
  2. It's forcing us to write unidiomatic React — checking data-id attributes on divs!
  3. It actually breaks keyboard users' expectations of being able to tab through the list.

So let's remove it — probably we embed an onClick handler inside of <StationName> and, when that's available, use a Reakit <Button> inside of <StationName>? There may also be some aria attributes we can add to this component to retain the semantic flavor of "a list of selectable items".

Also note that when we make this change we should make the <StationName> tooltip focusable with:

  .infillStatus:hover .tooltipText,
  .infillStatus:focus .tooltipText {
      visibility: visible;
  }
@idreyn idreyn added the tech-debt Addressing technical debt label Nov 21, 2022
@devinmatte
Copy link
Member

This looks like in combination with #122 this could just get a quick rewrite

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tech-debt Addressing technical debt
Projects
None yet
Development

No branches or pull requests

2 participants