elastic / eui

Elastic UI Framework 🙌

Home Page:https://eui.elastic.co/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[EuiModal][SCREEN READER]: Revisit adding `role` and `aria-modal` attributes to component

1Copenut opened this issue · comments

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)

Dropping this link in here as a resource: https://hidde.blog/dialog-modal-popover-differences/