Tooltip examples are not accessible on dropdown items #7524

bartoval · 2022-06-07T16:26:42Z

What: Closes #6109

it seems to work also adding the aria-labelledby prop, but the screen reader announces the tooltip before the item.

I tested the voice using the screen reader chrome plugin

patternfly-build · 2022-06-07T16:38:14Z

Preview: https://patternfly-react-pr-7524.surge.sh

A11y report: https://patternfly-react-pr-7524-a11y.surge.sh

nicolethoen

My expectation is that the tooltip would display on VO focus just like it would on keyboard focus or mouse hover.

Here is a gif of what happens when I use a mouse to hover over an enabled dropdown item with a tooltip and a disabled item with a tooltip:

In this second recording, you'll see that the VO does not trigger the tooltip in either case until I try to click on it. When I click on the disabled dropdown item, it does finally reveal the tooltip and read it (so that's an improvement!) but I cannot trigger the tooltip on the enabled dropdown item because that also selects the item and closes the dropdown

thatblindgeye · 2022-06-07T19:00:35Z

My expectation is that the tooltip would display on VO focus just like it would on keyboard focus or mouse hover.

@nicolethoen I'm noticing this behavior as well. It looks like VO is placing focus on the li element rather than the button within that list item. If you go into the list item with VO + Shift + down arrow, focus should go onto that button and trigger the tooltip. The Tab component had a similar issue back when I had to resolve an issue similar to this. It looks like the InternalDropdownItem component has logic setup similar to my fix for Tab, but one difference is the li element within the Tab component has role="presentation" whereas the dropdown items have `role="menuitem".

My previous comment about making this change here most likely wouldn't work since we'd lose the semantics of the items being menu items.

bartoval · 2022-06-08T17:13:52Z

I updated the code. Now everything should work as expected.
However, this solution seems more of a 'workaround'.

Another solution could be

set <li> with the role="presentation"
pass to the button or link a prop role='menuitem'

This solution should work well and it is clean.
However, the screen reader will no longer announce the world 'group'.
So instead:
Link, menu item, group, 1 of 7
the screen reader will announce
Link, menu item,1 of 7

Honestly, for our menu items, I don't see the utility of announcing group

Another small difference:
For item disabled the screen reader announces a new word: dimmed:
Disable menu item, dimmed, menu item, 4 of 7)

WDYT
@thatblindgeye @nicolethoen

thatblindgeye · 2022-06-08T17:19:07Z

Going off of Valerio's comment about the utility of having "group" announced on these menu items, it does seem odd that we end up indicating to a user that they are on a menu item group that contains a single element.

Some links that lean more towards Valerio's other solution of moving the role="menuitem" to the button/link inside the li (which would then be given role="presentation"):

Editor menu bar example from ARIA authoring practices guide (APG)
Navigation menubar example also from ARIA APG.
StackOverflow article for role="menuitem" placement

Based on these links I think I might be leaning more towards the alternative solution mentioned.

nicolethoen · 2022-06-09T18:25:26Z

I agree with @thatblindgeye, I think.

However, I'm noticing that the Menu component uses <li role="none"> instead of presentation.
It also adds a menu role to the <ul>.

So I think it's more in line with other solutions to do the following (if it all works with tooltips)

set <ul> with the role="menu"
set <li> with the role="none"
pass to the button or link a prop role='menuitem'

Other notes:

the word dimmed is standard for disabled elements, so that's good news
We need to be sure the tooltip can be triggered with the screen reader on disabled AND enabled dropdown items

bartoval · 2022-06-10T06:49:01Z

role="menu" was already set in <ul>, so no need to add it.

thatblindgeye

Looks good! The tooltip triggers via mouse, keyboard, and with VO navigation for me, and the tooltip gets announced when triggered as well. Had a nitpick/question below, but otherwise awesome job on this 💪🏼

thatblindgeye · 2022-06-13T13:18:23Z

packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx

@@ -211,7 +211,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
        ...(styleChildren && {
          className: css(element.props.className, classes)
        }),
-        ...(this.props.role !== 'separator' && { ref: this.componentRef })
+        ...(this.props.role !== 'separator' && { role } && { ref: this.componentRef })


Nitpick: could this also be written as ...(this.props.role !== 'separator' && { role, ref: this.componentRef })?

thatblindgeye

Looks and sounds as I'd expect! Awesome work on this

kmcfaul

Looks great!

jessiehuff

This seems like an improvement! I hear everything announced as I would expected in VO. Out of curiosity, I tested in NVDA and JAWS as well, and I noticed that it didn't work in either of those screen readers. Since this still moves things forward, I'm wondering if it makes sense to approve this but open another issue for JAWS and NVDA? Those are pretty big screen readers that I wouldn't want to completely neglect.

patternfly-build · 2022-06-15T20:49:11Z

Your changes have been released in:

[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]

Thanks for your contribution! 🎉

Tooltip examples are not accessible on dropdown items

03439f3

bartoval requested a review from thatblindgeye June 7, 2022 16:34

nicolethoen requested changes Jun 7, 2022

View reviewed changes

bartoval self-assigned this Jun 8, 2022

bartoval requested a review from nicolethoen June 8, 2022 17:15

tlabaj added the A11y label Jun 9, 2022

tlabaj requested a review from jessiehuff June 9, 2022 21:34

bartoval force-pushed the tooltip_example_dropdown_no_accessible branch from d43053d to 09b61db Compare June 10, 2022 06:18

refactor(Dropdown): improve solution

97373cd

bartoval force-pushed the tooltip_example_dropdown_no_accessible branch from 09b61db to 97373cd Compare June 10, 2022 06:39

thatblindgeye reviewed Jun 13, 2022

View reviewed changes

refactor(DropodownItem): update pr comment

e69de21

bartoval requested a review from thatblindgeye June 14, 2022 12:37

thatblindgeye approved these changes Jun 14, 2022

View reviewed changes

nicolethoen approved these changes Jun 14, 2022

View reviewed changes

kmcfaul approved these changes Jun 15, 2022

View reviewed changes

jessiehuff approved these changes Jun 15, 2022

View reviewed changes

tlabaj approved these changes Jun 15, 2022

View reviewed changes

tlabaj merged commit f302f29 into patternfly:main Jun 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tooltip examples are not accessible on dropdown items #7524

Tooltip examples are not accessible on dropdown items #7524

bartoval commented Jun 7, 2022 •

edited

Loading

patternfly-build commented Jun 7, 2022 •

edited

Loading

nicolethoen left a comment

thatblindgeye commented Jun 7, 2022 •

edited

Loading

bartoval commented Jun 8, 2022 •

edited

Loading

thatblindgeye commented Jun 8, 2022

nicolethoen commented Jun 9, 2022 •

edited

Loading

bartoval commented Jun 10, 2022

thatblindgeye left a comment

thatblindgeye Jun 13, 2022

thatblindgeye left a comment

kmcfaul left a comment

jessiehuff left a comment

patternfly-build commented Jun 15, 2022

Tooltip examples are not accessible on dropdown items #7524

Tooltip examples are not accessible on dropdown items #7524

Conversation

bartoval commented Jun 7, 2022 • edited Loading

patternfly-build commented Jun 7, 2022 • edited Loading

nicolethoen left a comment

Choose a reason for hiding this comment

thatblindgeye commented Jun 7, 2022 • edited Loading

bartoval commented Jun 8, 2022 • edited Loading

thatblindgeye commented Jun 8, 2022

nicolethoen commented Jun 9, 2022 • edited Loading

bartoval commented Jun 10, 2022

thatblindgeye left a comment

Choose a reason for hiding this comment

thatblindgeye Jun 13, 2022

Choose a reason for hiding this comment

thatblindgeye left a comment

Choose a reason for hiding this comment

kmcfaul left a comment

Choose a reason for hiding this comment

jessiehuff left a comment

Choose a reason for hiding this comment

patternfly-build commented Jun 15, 2022

bartoval commented Jun 7, 2022 •

edited

Loading

patternfly-build commented Jun 7, 2022 •

edited

Loading

thatblindgeye commented Jun 7, 2022 •

edited

Loading

bartoval commented Jun 8, 2022 •

edited

Loading

nicolethoen commented Jun 9, 2022 •

edited

Loading