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
Describe the problem
@kyrspl && @cee-chen are making a dismiss (close) button to
EuiCalloutin #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 updateEuiModalto have this same source order.Proposed solution
WCAG or Vendor Guidance (optional)
Screenshots or Trace Logs