[EuiModal][SCREEN READER]: Revisit adding `role` and `aria-modal` attributes to component
1Copenut opened this issue · comments
Trevor Pierce commented
Description
The EUI team had previously discussed adding role="dialog"
and aria-modal="true"
attributes to the EuiModal
container, but the issue was closed around March 2023 without going forward.
I would like to revisit this and re-test our modal component with these attributes applied. Specifically I'll be testing for improved or regressed screen reader UX in announcing the modal.
Proposed solution
! https://github.com/elastic/eui/blob/5cc4ce8d232e2f0295255724727be16ea3394198/src/components/modal/modal.tsx#L90
<div
css={cssStyles}
className={classes}
onKeyDown={onKeyDown}
tabIndex={0}
style={newStyle}
+ role="dialog"
+ aria-modal="true"
{...rest}
>
WCAG or Vendor Guidance (optional)
Cee Chen commented
Dropping this link in here as a resource: https://hidde.blog/dialog-modal-popover-differences/