fix(role): update roles to match React#5753
Conversation
|
Preview: https://patternfly-pr-5753.surge.sh A11y report: https://patternfly-pr-5753-a11y.surge.sh |
thatblindgeye
left a comment
There was a problem hiding this comment.
Just some quick updates needed below to resolve some a11y errors.
I'm also noticing that the deprecated Select has an a11y issue in the loading menu item example (linking to the staging site since it's pre-existing), since the <li> that contains the spinner doesn't have a role="option" child. This wasn't caught in React because the spinner is only present momentarily, whereas the HTML example it's persistent to showcase it.
We could do what the new Select is doing and update the markup so that the spinner is wrapped inside a .pf-v5-c-select__menu-item component, which would require React followup and possibly be slightly more significant a markup change. @mcoker what do you think? It feels more like a bug that needs resolving even though it's the deprecated select.
| @@ -1,4 +1,4 @@ | |||
| <li> | |||
| <li role="none"> | |||
| <button class="{{pfv}}options-menu__menu-item{{#if options-menu-menu-item--modifier}} {{options-menu-menu-item--modifier}}{{/if}}" | |||
There was a problem hiding this comment.
These buttons should have role="option"
| @@ -1,70 +1,70 @@ | |||
| {{#> context-selector-menu-menu}} | |||
| <li> | |||
| <li role="menuitem"> | |||
There was a problem hiding this comment.
For this file we'll want to update the li element to role="none", then within the context-selector-menu-list-item.hbs component we want to add the role="menuitem"
| {{#> app-launcher-menu}} | ||
| <li>{{#> app-launcher-menu-item app-launcher-menu-item--attribute='href="#"'}}Link{{/app-launcher-menu-item}}</li> | ||
| <li>{{#> app-launcher-menu-item app-launcher-menu-item--type="button"}}Action{{/app-launcher-menu-item}}</li> | ||
| <li role="menuitem">{{#> app-launcher-menu-item app-launcher-menu-item--attribute='href="#"'}}Link{{/app-launcher-menu-item}}</li> |
There was a problem hiding this comment.
Similar to the above comment, we'd want to place this role on app-launcher-menu-item instead, then have this li element be role="none"
|
@thatblindgeye that sounds fine to me. From the sound of it, it doesn't seem like a breaking change on the core side, but would change the markup in the react component. I'm assuming that's OK outside of a breaking change release? |
|
For both Core and React it would only be changing the markup in that specific example (in React it's not something we provide via prop or anything, it's just an example showing how a consumer could set up a "view more" sort of loading item). So either way it doesn't sound like it'd be breaking to the component. cc @tlabaj just to confirm, though |
@thatblindgeye I agree, this would not be breaking. |
There was a problem hiding this comment.
Below are the comments I mentioned during our Meet, let me know if you have any questions!
I am noticing some other a11y issues being flagged by axe, specifically examples that are utilizing things like favorite buttons (issue being that it's causing a parent with role="menu" to have children with in invalid role), but this is an existing issue in both repos and would be out of scope of this PR. Mainly mentioning this in case it does cause the build to fail once the following updates are pushed.
| {{#if dropdown-menu--type}} | ||
| {{#ifAny dropdown-menu--template--Groups dropdown--template--MenuToggleImageText}} | ||
| role="menu" | ||
| {{/ifAny}} | ||
| {{else}} | ||
| role="menu" | ||
| {{/if}} |
There was a problem hiding this comment.
Ideally we'd always want role="menu" to be present, except for the "Panel" example. What we could do is replace these conditionals with something like
{{#unless dropdown--HasCustomContent}}
role="menu"
{{/unless}}
Then in the Panel example in the Dropdown markdown, pass dropdown--HasCustomContent="true" to the {{#> dropdown component
thatblindgeye
left a comment
There was a problem hiding this comment.
Awesome job with these updates 🎉 Just had one more quick fix below (plus a question for the leads)
src/patternfly/components/AppLauncher/app-launcher-menu-item.hbs
Outdated
Show resolved
Hide resolved
| <li> | ||
| <button class="{{pfv}}options-menu__menu-item{{#if options-menu-menu-item--modifier}} {{options-menu-menu-item--modifier}}{{/if}}" | ||
| <li role="none"> | ||
| <button role="option" class="{{pfv}}options-menu__menu-item{{#if options-menu-menu-item--modifier}} {{options-menu-menu-item--modifier}}{{/if}}" |
There was a problem hiding this comment.
@tlabaj @mcoker In React the roles are actually "menuitem" for this component, and "menu" for the options-menu-menu. Listbox and option are more appropriate, but it'd require a change in React.
Also, the "Multiple options" example has different markup in both repos. In Core the markup is an unordered list with nested unordered lists for each "group":
In React it's section elements for each "group" and an unordered list in each section:
This wouldn't be part of this PR, but do we want to align which deprecated markup should be used?
There was a problem hiding this comment.
@thatblindgeye that would be fine with me. If the react markup is good, I think we should update the core markup since it's just documentation and less disruptive to users.
There was a problem hiding this comment.
@mcoker @thatblindgeye I do not think we should update the react implantation unless it is a critical bug reported by a consumer since the component is deprecated.
thatblindgeye
left a comment
There was a problem hiding this comment.
Opened followup issues, great job on this! 🎉
|
🎉 This PR is included in version 5.1.0-prerelease.5 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 6.0.0-alpha.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
closes: #5385