LinkControl - adds search results label for initial suggestions #19665
Conversation
getdave
requested review from
ajitbohra,
ellatrix,
jorgefilipecosta,
Soean,
talldan and
youknowriad
as code owners
getdave
added
Needs Design Feedback
|
Looks good but I question the use of the word “modified”. I think “Recently updated” was more approachable — modified feels strange in this context. |
| <div { ...suggestionsListProps } className={ resultsListClasses }> | ||
| { ! isInitialSuggestions ? <VisuallyHidden>{ SearchResultsLabel }</VisuallyHidden> : SearchResultsLabel } | ||
|
|
||
| <div { ...suggestionsListProps } className={ resultsListClasses } aria-labelledby={ searchResultsLabelId }> |
There was a problem hiding this comment.
Nice job on adding aria-labelledby! 🙌
I think there may be a slight difference on using that on visible vs hidden labels: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
I'm not positive I'm fully understanding the implementation though:
aria-label
A human-readable string value which identifies the listbox. If there's a visible label, then aria-labelledby should be used instead to refer to that label.
aria-labelledby
Identifies the visible element or elements in a space-separated list of element IDs which identify the listbox. If there's no visible label, then aria-label should be used instead to include a label. (Note: "labelled", with two L's, is the correct spelling based on the accessibility API conventions.)
There was a problem hiding this comment.
Good catch but I don't follow the a11y guidelines here. Do I need to just add aria-label on the element when it's not visible?
|
@shaunandrews I've updated to "updated" 😆. On that basis are you happy to 👍 ? |
getdave
deleted the
add/label-to-link-control-initial-suggestions-results
branch
As per #19513, this PR adds a label to the search results for initial suggestions.
Note: this does not attempt to address this feedback.
This will be handled in another PR.
How has this been tested?
To test:
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: