Hierarchical terms sorted by name and filterable #10138
Conversation
|
Looking for accessibility feedback here especially! |
| @@ -268,10 +282,24 @@ class HierarchicalTermSelector extends Component { | |||
| const noParentOption = `— ${ parentSelectLabel } —`; | |||
| const newTermSubmitLabel = newTermButtonLabel; | |||
| const inputId = `editor-post-taxonomies__hierarchical-terms-input-${ instanceId }`; | |||
| const filterInputId = `editor-post-taxonomies__hierarchical-terms-filter-${ instanceId }`; | |||
|
|
|||
| /* eslint-disable jsx-a11y/no-onchange */ | |||
There was a problem hiding this comment.
this can be removed as jsx-a11y/no-onchange applies only to <select> elements
|
|
||
| /* eslint-disable jsx-a11y/no-onchange */ | ||
| return [ | ||
| ...this.renderTerms( availableTermsTree ), | ||
| <input |
There was a problem hiding this comment.
the search input needs a visible <label> element, properly associated with for / id attributes
| @@ -1,3 +1,8 @@ | |||
| .editor-post-taxonomies__hierarchical-terms-list { | |||
| max-height: 14em; | |||
| overflow: auto; | |||
There was a problem hiding this comment.
scrollable divs need to be made keyboard accessible: only Firefox makes them focusable by default so for other browsers it's necessary to make them focusable and add some ARIA. See for example the Inserter. I'd say something like tabIndex="0" role="group" aria-label={ __( 'Available terms' ) }" could work
| ( childTerm ) => -1 !== childTerm.name.toLowerCase().indexOf( filterValue.toLowerCase() ) | ||
| ).reduce( | ||
| ( appeared, appears ) => appeared || appears | ||
| ) ) |
There was a problem hiding this comment.
Seems all this will work only for children. What about grandchildren and deeper nested terms?
|
Great to see exploration on this. I've left some comments, focussed on a11y and functionality. Will leave other considerations to the expertise of the GTeam. In addition to the comments, some more considerations:
typing "grandchild" doesn't return any result though:
|
|
@afercia thank you! I think I can take care of all of that :) |
|
@afercia I think I've addressed the concerns now, although I'm not sure how to test the speech. I get the feeling it might need to be debounced, but I'm not sure. |
|
@notnownikki thanks! Oh yes it needs to be debounced otherwise a message is sent at any keystroke. I think |
|
Aha, so it does! Ok, using the debounced version now. |
|
|
Awesome! @karmatosed thank you so much for your guidance on this ❤️ |
|
Thanks for all your work! |
|
This is great, thanks for the improvement. What do you think about not showing the search box if there are less than 8 items or so? |
|
I think that seems good. Want to make sure removing the search box doesn't mess with the tabbing. |
|
PR that does that is up at #10438 for you to try :) |
Description
Fix for #2607
Limits the height of the list so that sites with a lot of categories don't have lists that cause the page to grow a lot.
Adds a filter field to do simple substring matching on the list.
Changes the default ordering to name ascending.
How has this been tested?
Load a post, check the categories are there. Try filtering the list of categories to find the one you want.
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: