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

Date Picker - Ensure custom controls provide proper textual name, role, and state information - (2036569898) #5570

Closed
Tracked by #4599
dqateam opened this issue Oct 25, 2022 · 4 comments
Closed
Tracked by #4599

Date Picker - Ensure custom controls provide proper textual name, role, and state information - (2036569898) #5570

dqateam opened this issue Oct 25, 2022 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 5 A few days of work, definitely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality research Issues that require more in-depth research or multiple team members to resolve or make decision.
Milestone
2023 April Priori...

Comments

@dqateam
Copy link
Collaborator

dqateam commented Oct 25, 2022 •
edited by geospatialem
Loading

Module:

12 Date Picker

Violation:

Ensure custom controls provide proper textual name, role, and state information

image

WCAG Reference:

Instance ID:

2036569898

Severity:

7

Description:

[Issue]
There are buttons without appropriate role information. Examples include:
-The role=Button is missing for the dates for the calendar widget.

[User Impact]
Screen reader users will be unable to determine that this content is interactive.

[Code Reference]

<div class="day-wrapper">
<span class="day">
<span class="text">29</span>
</span>
</div>

Note:

[Suggestion]
Developer should provide the role="button" to the source code.
Developer should provide aria-selected="true" to the currently selected date and provide aria-current="date" attribute to the current date
Developer should provide aria-disabled="true" to the disabled dates.

[Compliant Code Example]

<div class="day-wrapper" role="button" aria-selected="true">
<span class="day">
<span class="text">29</span>
</span>
</div>

Media Type:

Custom Controls

Additional Resources:

  • Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.
@dqateam dqateam added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Oct 25, 2022
@geospatialem geospatialem mentioned this issue Oct 25, 2022
Closed
89 tasks
@geospatialem geospatialem mentioned this issue Nov 18, 2022
Closed
@geospatialem
Copy link
Member

We're fulfilling some of the basic requirements, but perhaps we could add a bit more context to the date?

Currently once in the date area screen readers are provided with the number (e.g., "1", but no other context). Perhaps could provide a bit more context to the month and year?

@geospatialem geospatialem added research Issues that require more in-depth research or multiple team members to resolve or make decision. estimate - 5 A few days of work, definitely requires updates to tests. labels Feb 6, 2023
@geospatialem
Copy link
Member

Also includes coordination with #5582, to provide context when engaging with the input-date-picker component.

@geospatialem geospatialem added the p - high Issue should be addressed in the current milestone, impacts component or core functionality label Feb 27, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Feb 27, 2023
@jcfranco jcfranco self-assigned this Mar 31, 2023
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. 1 - assigned Issues that are assigned to a sprint and a team member. labels Mar 31, 2023
This was referenced Apr 1, 2023
Merged
Merged
Closed
jcfranco added a commit that referenced this issue Apr 3, 2023
@jcfranco
refactor(time): add util to create and cache date time formats (#6719)
65a1db2 
**Related Issue:** #4148 

## Summary

Adds util to reuse `Intl.DateTimeFormat` instances.

This came up while working on
#5570 and decided to
submit separately to link to #4148.

## Notes

* caching will be tied to single locale, once it changes, the cache will
be cleared
* this removes error handling in `time.ts` when creating a
`Intl.DateTimeFormat` as specifying an unsupported locale would be a
user error.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Apr 5, 2023
jcfranco added a commit that referenced this issue Apr 5, 2023
@jcfranco
fix(date-picker): improve date-picker a11y (#6715)
74b3b96 
**Related Issue:** #5570 

## Summary

This improves `calcite-date-picker` a11y by:

* moving `gridcell` role to `calcite-date-picker-month` component
rendering (day wrapper)
* adding `button` role to `calcite-date-picker-day`
* providing a locale-aware `aria-label` to `calcite-date-picker-day`
describing the associated day
@github-actions github-actions bot assigned geospatialem and unassigned jcfranco Apr 5, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Apr 11, 2023
@geospatialem
Copy link
Member

Verified on master

JAWS transcript

Date-picker
Year �Edit� 
2021
Type in text.
Next month �Button� 
To activate press Enter.
�Grid� 
Sunday, January 3, 2021 �Button� 
To activate press Enter.
Monday, January 4, 2021 �Button� 
Mo
column 1 row 2
To activate press Enter.

NVDA

Year  edit  selected 2021
Next month  button
table
Friday, January 1, 2021  row 2  Fr  column 6
Friday, January 1, 2021  button
application
Previous month  button
application
table
Friday, January 1, 2021
Friday, January 1, 2021  button
Saturday, January 2, 2021  Sa  column 7
Saturday, January 2, 2021  button

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 5 A few days of work, definitely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality research Issues that require more in-depth research or multiple team members to resolve or make decision.
Projects
None yet
Milestone
2023 April Priorities - No breaking c...
Development

No branches or pull requests
4 participants
@jcfranco @alisonailea @geospatialem @dqateam