eui
eui copied to clipboard
[EuiModal] Adjust the source order to announce `EuiTitle` before Close button
Describe the problem
@kyrspl && @cee-chen are making a dismiss (close) button to EuiCallout in #7156. They proposed moving the heading (title) before the dismiss button in the source order so screen reader users could hear the message heading before deciding to dismiss the callout. I seconded this approach and suggested we should update EuiModal to have this same source order.
Proposed solution
! EuiModal lines 85-109
! https://github.com/elastic/eui/blob/main/src/components/modal/modal.tsx#L85C9-L109C15
<div
css={cssStyles}
className={classes}
onKeyDown={onKeyDown}
tabIndex={0}
style={newStyle}
{...rest}
>
<EuiI18n
token="euiModal.closeModal"
default="Closes this modal window"
>
! Potentially add a prop to ignore this Close button
! Could be something like `hasHeader` that renders the button inside `EuiHeader`
{(closeModal: string) => (
<EuiButtonIcon
iconType="cross"
onClick={onClose}
css={cssCloseIconStyles}
className="euiModal__closeIcon"
color="text"
aria-label={closeModal}
/>
)}
</EuiI18n>
{children}
</div>
WCAG or Vendor Guidance (optional)
Screenshots or Trace Logs
Hi I wanted to pick up this issue and contribute . Can you assign this issue to me . Thanks
@Kaggrov We do not assign non-Elastic team members to issues. Assume that any non-security issue that does not have someone assigned is open to work on and that we'll generally take a PR for it. Please read out contributing wiki for more guidance: https://github.com/elastic/eui/tree/main/wiki/contributing-to-eui#who-can-contribute
👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.