Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiModal] Adjust the source order to announce EuiTitle before Close button #7222

Open
1Copenut opened this issue Sep 25, 2023 · 3 comments
Open
Labels
accessibility - WCAG A Level A WCAG Accessibility Criteria

Comments

@1Copenut
Copy link
Contributor

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

Screen Shot 2023-09-25 at 12 38 46 PM
@1Copenut 1Copenut added accessibility accessibility - WCAG A Level A WCAG Accessibility Criteria labels Sep 25, 2023
@cee-chen cee-chen added low hanging fruit An issue, often a bug, that is lower effort and clearly ought to be fixed good first issue and removed accessibility labels Oct 2, 2023
@Kaggrov
Copy link

Kaggrov commented Feb 10, 2024

Hi
I wanted to pick up this issue and contribute .
Can you assign this issue to me .
Thanks

@cee-chen
Copy link
Contributor

@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

Copy link

👋 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.

@acstll acstll self-assigned this Dec 4, 2024
@acstll acstll removed their assignment Jan 16, 2025
@JasonStoltz JasonStoltz removed low hanging fruit An issue, often a bug, that is lower effort and clearly ought to be fixed good first issue labels Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility - WCAG A Level A WCAG Accessibility Criteria
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants