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.

Sign up for GitHub

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

Jump to bottom

[EuiDatePicker][COGNITION]: Consider adding screen reader only text to the calendar day labels #5937

Closed
Tracked by #6688
1Copenut opened this issue May 31, 2022 · 3 comments · Fixed by #7748
Closed
Tracked by #6688

[EuiDatePicker][COGNITION]: Consider adding screen reader only text to the calendar day labels #5937

1Copenut opened this issue May 31, 2022 · 3 comments · Fixed by #7748
Assignees
@mgadewoll
Labels
accessibility - cognition accessibility - screen reader accessibility - WCAG A Level A WCAG Accessibility Criteria accessibility low hanging fruit An issue, often a bug, that is lower effort and clearly ought to be fixed
Projects
Accessibility

Comments

@1Copenut
Copy link
Contributor

Description

Our EuiDatePicker component ( https://eui.elastic.co/#/forms/date-picker ) uses two-letter short labels for days of the week in the calendar. These short labels do not convey the information accurately to screen readers. I'm proposing we add an EuiScreenreader to these labels so screen reader users hear "Sunday", "Monday", etc.

Screenshot and code sample below.

Proposed code update

<div class="react-datepicker__day-names">
  <div class="react-datepicker__day-name">
-   Su
+   <span aria-hidden="true">Su</span>
+   <EuiScreenReaderOnly>Sunday</EuiScreenReaderOnly>
  </div>
  ...
</div>

Guidance

Screen Shot 2022-05-31 at 1 56 25 PM
@1Copenut 1Copenut added this to Needs triage/design in Accessibility via automation May 31, 2022
@github-actions
Copy link

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

@1Copenut 1Copenut mentioned this issue Apr 5, 2023
Open
4 tasks
@github-actions
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.

@github-actions GitHub Actions
Copy link

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 19, 2024
@1Copenut 1Copenut added low hanging fruit An issue, often a bug, that is lower effort and clearly ought to be fixed and removed stale-issue stale-issue-closed labels Apr 23, 2024
@1Copenut 1Copenut reopened this Apr 23, 2024
@mgadewoll mgadewoll self-assigned this May 6, 2024
@mgadewoll mgadewoll mentioned this issue May 13, 2024
Merged
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mgadewoll mgadewoll

Labels
accessibility - cognition accessibility - screen reader accessibility - WCAG A Level A WCAG Accessibility Criteria accessibility low hanging fruit An issue, often a bug, that is lower effort and clearly ought to be fixed
Projects
No open projects
Accessibility
  
Needs triage/design
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[EuiDatePicker] Add screenreader-only calendar week day labels mgadewoll/eui
3 participants
@cee-chen @1Copenut @mgadewoll