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

Post author dropdown: add accessible search with debounced api request #7384

Closed
adamsilverstein opened this issue Jun 19, 2018 · 10 comments
Closed
Assignees
Labels
[Feature] UI Components Impacts or related to the UI component system [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress

Comments

@adamsilverstein
Copy link
Member

adamsilverstein commented Jun 19, 2018

Is your feature request related to a problem? Please describe.
When a large number of users are available as post authors, the select element does not scale well. A select element with thousands of users is unwieldy, difficult to use and may even crash the browser on lower powered devices.

Describe the solution you'd like
When a large number of users are present, I would like to see Gutenberg use an accessible select element, such as that provided by https://github.com/alphagov/accessible-autocomplete. With a small number of users, we can probably stick to a regular select element. See #5921.

Describe alternatives you've considered
I tried an implementation using react-select (http://jedwatson.github.io/react-select/), but discovered it is not accessible. I also tried an implementation using the Gutenberg's built in autocomplete component, but discovered the use case is different enough that it would require a significant reworking.

@adamsilverstein adamsilverstein changed the title Post author dropdown: add accessible search with debounced api requestg Post author dropdown: add accessible search with debounced api request Jun 19, 2018
@gziolo
Copy link
Member

gziolo commented Jun 20, 2018

I talked to @marcysutton at JSCOnf EU after she gave her excellent talk "Empathy Driven Development". More details on Twitter: https://twitter.com/marcysutton/status/1002870300936032256.

She recommended using autocomplete component for the use case we have. She mentioned that we should look at downshift which she helped to make fully accessible and see if it would fit. We can also find an alternative library or build our own based on the existing Dropdown.

@gziolo gziolo added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] UI Components Impacts or related to the UI component system labels Jun 20, 2018
@adamsilverstein
Copy link
Member Author

@gziolo Wow, downshift looks really nice - thanks for sharing the link.

I previously took a pass at implementing this using a different accessible selector in #7385. I'll take a swing at a new PR using downshift.

@gziolo
Copy link
Member

gziolo commented Jun 21, 2018

@adamsilverstein
Copy link
Member Author

@gziolo I took a pass at a downshift based implementation in #7478 - I could see how this could also be generalized to replace tag and possibly category selection, or even the block selector search which also needs to scale.

@gziolo
Copy link
Member

gziolo commented Jun 25, 2018

That’s great. It looks like it wasn’t that difficult to integrate. I anticipate it’s going to be more work to shape data layer in a way it’s optimized for the best UX than to build the control itself.

@adamsilverstein
Copy link
Member Author

Yes, the implementation was straightforward. We can alter the requests to include just the id and name and maybe slug for searching which is all we should really need.

@aduth
Copy link
Member

aduth commented Jun 5, 2019

I closed #15985 in favor of this issue. #15985 details the negative network impact of the current implementation, which would be resolved by proposal described here.

@noisysocks
Copy link
Member

Noting that #7385 is where development for this is happening.

@swissspidy
Copy link
Member

Since #23237 has been fixed, can this be closed?

@adamsilverstein
Copy link
Member Author

Yep, closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants