PLAT-115535: Wrap the created portal with div having aria-owns
#2840
Conversation
Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected]
Codecov Report
@@ Coverage Diff @@
## develop #2840 +/- ##
==========================================
Coverage ? 44.72%
==========================================
Files ? 163
Lines ? 8244
Branches ? 2009
==========================================
Hits ? 3687
Misses ? 3422
Partials ? 1135
Continue to review full report at Codecov.
|
Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected])
| {scrimType !== 'none' ? <Scrim type={scrimType} onClick={this.handleClick} /> : null} | ||
| {React.cloneElement(children, {onClick: this.stopPropagation})} | ||
| </div>, | ||
| this.node | ||
| ); | ||
|
|
||
| return <div aria-owns={id}>{portal}</div>; |
There was a problem hiding this comment.
Adding DOM here could be problematic. Since the portal is rendering in another subtree, this <div /> ends up being dropped wherever FloatingLayer was used and those component might not be expecting it.
I like the instinct to build this into ui but I'm not sure this is the right way. It might not be feasible to do since some outer component needs the id in order to set aria-owns correctly.
An alternative might be to add some Context to this to help auto-wire IDs up since they are required (instead of something generic like CSS classes) for ARIA to behave correctly. I'm not sure what that would be yet but something to consider.
|
|
Checklist
Issue Resolved / Feature Added
When moving focus from the component in the panel to the component in the floatLayer and moving back,
the screen reader doesn't read out the panel header because the panel has
aria-owns="floatLayer"prop.But when the panel is in the floatLayer like
PopupTabLayout, thearia-ownswon't work. Then the screen reader reads the panel title first, then a focused component when moving focus from out of the panel to in the panel.Resolution
When creating a component in the floatLayer, the component has the id and is wrapped with
divincludingaria-ownsprop of the id.Additional Considerations
Links
PLAT-115535
Comments
Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected])