Fix id attribute to match aria-owns attribute #15564
Conversation
gchtr
requested review from
ellatrix,
gziolo,
noisysocks,
talldan and
youknowriad
as code owners
| @@ -253,7 +253,7 @@ class URLInput extends Component { | |||
| <Popover position="bottom" noArrow focusOnMount={ false }> | |||
| <div | |||
| className="editor-url-input__suggestions block-editor-url-input__suggestions" | |||
| id={ `editor-url-input-suggestions-${ instanceId }` } | |||
| id={ `block-editor-url-input-suggestions-${ instanceId }` } | |||
There was a problem hiding this comment.
Can we extract this id to a variable and use it in both places to prevent the same issue to happen again in the future?
There was a problem hiding this comment.
Makes total sense! I extracted the id into a variable suggestionsListboxId. 👍
There was a problem hiding this comment.
Nice catch, thanks for opening this PR. Would you mind addressing my comment before we land this patch: https://github.com/WordPress/gutenberg/pull/15564/files#r282946122?
gziolo
added
[Focus] Accessibility (a11y)
|
When I extracted the id attribute for the listbox into a variable, I saw that there’s another id for |
Description
In #14420, class names were changed from
editortoblock-editor. In that pull request,has been changed to
But the matching
idattribute wasn’t changed. This pull request fixes that.How has this been tested?
I ran tests with
npm run test-unitandnpm run test-e2e. I also tested by checking the attributes in the browser console.I didn’t test this with any screen reader software. Maybe someone from the accessibility team wants to look at this.
Types of changes
Accessibility bug fix (non-breaking change which fixes an issue).
Checklist: