uber
Accessibility Issue: prop "AccessibilityType" does not work correctly for Popover / Tooltip
Current Behavior
The trigger element for the popover/tooltip always has the attributes <aria-haspopup="true" aria-expanded="false">, which should only happen if the default value "menu" is applied.
Expected Behavior
The trigger element for the popover/tooltip should not have attributes <aria-haspopup="true" aria-expanded="false">, when the AccessibilityType is set to "none" or "tooltip" as described in the "Accessibility"-section here: https://baseweb.design/components/popover/
Your Environment
Your website v11: https://baseweb.design/components/popover/ & https://baseweb.design/components/tooltip/ v10: https://v10.baseweb.design/components/popover/ & https://v10.baseweb.design/components/tooltip/
| Tech | Version |
|---|---|
| Base UI | v10.x & v11.x |
| React | v17.x |
| browser | chrome latest windows 10 |
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
Problem is this in "https://github.com/uber/baseweb/blob/master/src/popover/popover.tsx" line 291:
const anchorProps: AnchorPropsT = {
'aria-haspopup': 'true',
'aria-expanded': isOpen ? 'true' : 'false',
key: 'popover-anchor',
ref: this.anchorRef,
};
aria-haspopup & aria-expanded should only be added for type "menu". Maybe "menu" should also be renamed in "popover". A tooltip should not contain focusable elements.
See: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role ()
The tooltip is not considered a popup in terms of the aria-haspopup property on the owning element, which is why we used "text bubble" in the introductory definition.
Though a tooltip may appear and disappear, as its appearance is automatic and not intentionally controlled by the user, the aria-expanded role is not supported.
We are facing the same issue with the tooltip. Since element.cloneElement is used we can't override this as well.
