a11y(Tooltip): "tooltip" role #6865
Conversation
Generate changelog in
|
| const tooltipId = Utils.uniqueId("tooltip"); | ||
|
|
||
| const childTarget = Utils.ensureElement(React.Children.toArray(children)[0], undefined, { | ||
| "aria-describedby": tooltipId, |
There was a problem hiding this comment.
could we try some version of facebook/react#8205 (comment) and checking hasOwnProperty to make sure we're not overriding an id specified by a consumer of Tooltip?
There was a problem hiding this comment.
Actually aria-describedby can have multiple values as a space separated list string (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby). Updated to concatenate that if passed: 730d177
There was a problem hiding this comment.
I think this is getting closer but we need to be very careful here of breaking existing behavior. We'll only be able to merge this if this can be done in a way that is a strict improvement, and doesn't negatively impact users who may have already done the work to work around this.
| // want Popover to warn if empty, so don't wrap in element if empty. | ||
| Utils.isReactNodeEmpty(content) | ||
| ? content | ||
| : Utils.ensureElement(content, undefined, { role: "tooltip", id: tooltipId }) |
There was a problem hiding this comment.
I don't think we can do this because a consumer may have already defined an id on the content which this would override
There was a problem hiding this comment.
Highly doubt that would ever be the case, can't imagine what other scenarios they'd be doing this for. There are many cases, such as in Popover, where we apply a bunch of props without caring what the consumer may have already applied.
There was a problem hiding this comment.
This should account for that case: be12eb3
There was a problem hiding this comment.
@evansjohnson the other alternative solution here would be we add a prop contentProps to Popover and apply it to the div that's already wrapping the content. Then we could apply these props via that. Up to you.
| @@ -252,7 +247,8 @@ export class Popover< | |||
| const { disabled, content, placement, position = "auto", positioningStrategy } = this.props; | |||
| const { isOpen } = this.state; | |||
|
|
|||
| const isContentEmpty = content == null || (typeof content === "string" && content.trim() === ""); | |||
| const isContentEmpty = | |||
There was a problem hiding this comment.
this change means the empty check will be hit if the content is false or [], which seems like a good change. previously I imagine we tried to render the popover but it ended up not really displaying anything. I can't imagine anyone would want the current behavior.
Fixes #0000
Checklist
Changes proposed in this pull request:
role="tooltip"to the Tooltip'scontent- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_roleidto the tooltip content, andaria-describedby={id}to the target