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

[Input Date Picker] Add keyboard trap to Date Picker component #6668

Closed
geospatialem opened this issue Mar 27, 2023 · 4 comments
Closed

[Input Date Picker] Add keyboard trap to Date Picker component #6668

geospatialem opened this issue Mar 27, 2023 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. c-datepicker Issues that pertain to the calcite-date-picker component Calcite (dev) Issues logged by Calcite developers. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 April Priori...

Comments

@geospatialem
Copy link
Member

Description

Add in keyboard trapping so assistive technology (AT) users can cycle through the different options, ensuring they know the full extent of the dialog and what's available to them.

Spurred from #5582

Acceptance Criteria

Add keyboard trapping to date-picker, where users can close the dialog using the Esc key.

Relevant Info

#5582

Which Component

input-date-picker and date-picker

Example Use Case

No response

Priority impact

p2 - want for current milestone

Esri team

Calcite (dev)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. a11y Issues related to Accessibility fixes or improvements. p - high Issue should be addressed in the current milestone, impacts component or core functionality 1 - assigned Issues that are assigned to a sprint and a team member. needs triage Planning workflow - pending design/dev review. estimate - 5 A few days of work, definitely requires updates to tests. labels Mar 27, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Mar 27, 2023
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Mar 27, 2023
@geospatialem geospatialem mentioned this issue Mar 27, 2023
Closed
@macandcheese macandcheese added the c-datepicker Issues that pertain to the calcite-date-picker component label Mar 30, 2023
@jcfranco jcfranco mentioned this issue Apr 6, 2023
Merged
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 7, 2023
@jcfranco jcfranco mentioned this issue Apr 12, 2023
Merged
@jcfranco
Copy link
Member

Sharing findings:

@jcfranco
Copy link
Member

Waiting on #6773 to address some concerns mentioned ☝️.

@jcfranco jcfranco added blocked This issue is blocked by another issue. and removed blocked This issue is blocked by another issue. labels Apr 14, 2023
jcfranco added a commit that referenced this issue Apr 19, 2023
@jcfranco
fix(input-date-picker): implement dialog behavior to improve a11y (#6669
a013819 
)

**Related Issue:** #5582

## Summary

Updates `input-date-picker` to use the dialog role for its `date-picker`
container along with descriptive text.

Note that focus-trap behavior will be handled by #6668.
@jcfranco jcfranco mentioned this issue Apr 20, 2023
Merged
jcfranco added a commit that referenced this issue Apr 22, 2023
@jcfranco
feat(input-date-picker): add focus trap support (#6816)
0d9ddc9 
**Related Issue:** #6668 

## Summary

Adds focus-trap to date-picker dialog to improve a11y.

**Note:** This also adds a util to help retrieve props from the
currently focused element.

## Notable `focusTrapComponent` changes

* `connectFocusTrap` now supports passing a different focus-trap target
element (for setting the focus trap on a component's subtree) and
overrides to certain options from `focus-trap`'s `focusTrap()`.
* `activateFocusTrap`/`deactivateFocusTrap` now allow passing options to
`focus-trap`'s `activate`/`deactivate` methods.
* `updateFocusTrapElements` is now optional.
@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 22, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

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

Verified in 1.3.0-next.13 on Mac and Windows.

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. c-datepicker Issues that pertain to the calcite-date-picker component Calcite (dev) Issues logged by Calcite developers. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 April Priorities - No breaking c...
Development

No branches or pull requests
3 participants
@jcfranco @macandcheese @geospatialem