Skip to content

[Time Picker] Group controls for hour, minute and second for keyboard support #6851

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
Closed
3 tasks
geospatialem opened this issue Apr 25, 2023 · 5 comments
Closed
3 tasks

[Time Picker] Group controls for hour, minute and second for keyboard support #6851

geospatialem opened this issue Apr 25, 2023 · 5 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. design Issues that need design consultation prior to, or during, development. 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 May Priorities

Comments

@geospatialem
Copy link
Member

geospatialem commented Apr 25, 2023 •
edited
Loading

Description

Create group controls for: hour, minute and second to ensure keyboard users can access content as-expected.

image

Acceptance Criteria

  • When tabbing, move between the groups (hour - minute - second), and each group with focus can be nudged via the ⬆️ and ⬇️ keys.
  • Support focus when the component is on focus after opening from the input-time-picker component
  • If feasible, support both tabbing and Left arrow and Right arrow interactions.

Relevant Info

Came up while working through input-time-picker and time-picker a11y updates as part of the April release in #6830

Which Component

time-picker

Example Use Case

Keyboard support/access

Priority impact

p2 - want for current milestone

Esri team

Calcite (dev)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to, or during, development. 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. labels Apr 25, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone Apr 25, 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 Apr 25, 2023
@ashetland
Copy link
Contributor

If focus is moved to a column group, would it still be obvious to the user that they can input numbers as well as arrow up/down?
CleanShot 2023-04-27 at 12 24 04@2x

@jcfranco jcfranco mentioned this issue May 19, 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 May 19, 2023
jcfranco added a commit that referenced this issue May 19, 2023
@jcfranco
fix(time-picker): prevent time part steppers from being focusable (#6982
41701a5 
)

**Related Issue:** #6851 

## Summary

This ensures the hour, minute and second inputs are the only focusable
elements within the component. Previously, focus would land on the
hour-increment stepper (due to `tabIndex=1` on steppers and the
component using `delegatesFocus: true`), which doesn't listen to up/down
keys.
@jcfranco jcfranco added 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. and removed 2 - in development Issues that are actively being worked on. labels May 19, 2023
@github-actions github-actions bot assigned geospatialem and unassigned jcfranco May 19, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@jcfranco
Copy link
Member

Belated update: after chatting w/ @ashetland, we decided to try to keep the existing focus styles, but prevent steppers from receiving focus when the input-time-picker is opened or when calling focus methods.

@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. and removed enhancement Issues tied to a new feature or request. labels May 19, 2023
@github-actions
Copy link
Contributor

It looks like this issue is missing some information:

  • A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible. If you are experiencing build or Node related errors, please provide a GitHub repo for the sample.

Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.

@github-actions github-actions bot added the incomplete issue report New issues missing important information, and unless provided, they will be closed after 5 days. label May 19, 2023
@geospatialem geospatialem added 4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. and removed incomplete issue report New issues missing important information, and unless provided, they will be closed after 5 days. 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. labels May 19, 2023
@geospatialem
Copy link
Member Author

Verified in 1.4.0-next.23

verify-6851

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 tested, confirmed as mitigated, and are ready to close. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. design Issues that need design consultation prior to, or during, development. 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 May Priorities
Development

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