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

Fix id attribute to match aria-owns attribute #15564

Merged
merged 2 commits into from May 13, 2019

Conversation

@gchtr
Copy link
Contributor

commented May 10, 2019

Description

In #14420, class names were changed from editor to block-editor. In that pull request,

aria-owns={ `editor-url-input-suggestions-${ instanceId }` }

has been changed to

aria-owns={ `block-editor-url-input-suggestions-${ instanceId }` }

But the matching id attribute wasn’t changed. This pull request fixes that.

How has this been tested?

I ran tests with npm run test-unit and npm 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:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@@ -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 }` }

This comment has been minimized.

Copy link
@gziolo

gziolo May 10, 2019

Member

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?

This comment has been minimized.

Copy link
@gchtr

gchtr May 12, 2019

Author Contributor

Makes total sense! I extracted the id into a variable suggestionsListboxId. 👍

@gziolo
Copy link
Member

left a 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?

@gchtr

This comment has been minimized.

Copy link
Contributor Author

commented May 12, 2019

When I extracted the id attribute for the listbox into a variable, I saw that there’s another id for aria-activedescendant that can be extracted into an id. I used the variable names suggestionsListboxId and suggestionOptionIdPrefix. Tell me if they don’t make sense or if there’s a better name we could use!

@gziolo

gziolo approved these changes May 13, 2019

Copy link
Member

left a comment

@gchtr thanks for the follow-up. It totally makes sense to cover both 👍

Nice one. Congrats on your first soon to be landed contribution :)

@gziolo gziolo merged commit ee7c19a into WordPress:master May 13, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@youknowriad youknowriad added this to the 5.7 (Gutenberg) milestone May 13, 2019

@gchtr gchtr deleted the gchtr:fix-url-input-aria-owns branch May 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.