eui
eui copied to clipboard
[EuiFlyout] 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
! EuiFlyout lines 413-426
! https://github.com/elastic/eui/blob/main/src/components/flyout/flyout.tsx#L413C12-L426C12
<Element ...{props}>
{!isPushed && screenReaderDescription}
! Potentially add a prop to ignore this Close button if a header exists
! Could be something like `hasHeader` that renders the button inside `EuiHeader` {closeButton}
{children}
</Element>
Related issues
- #7222
WCAG or Vendor Guidance (optional)
Screenshots or Trace Logs
Hello @cee-chen Sir, Can you please explain this task to me and assign it to me. I want to make contribution in this issue, I request you to please elaborate about this issue in details and assign it to me.
Hey @itzabhinavarya! If it's not clear to you how to solve an issue from the existing PR, please feel free to take a look at another good fist issue or low hanging fruit that you do know how to solve. EUI at this point is not necessarily a beginner-friendly repo, and we ask that interested contributors pick issues within the scope of their abilities.
@cee-chen Sir,Thank you. Now i'll look at those issue on which i have good command. Thank you for guide.
👋 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.