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

[Table] Add a non-keyboard-navigable mode to Table #8659

Closed
2 of 6 tasks
macandcheese opened this issue Jan 26, 2024 · 5 comments
Closed
2 of 6 tasks

[Table] Add a non-keyboard-navigable mode to Table #8659

macandcheese opened this issue Jan 26, 2024 · 5 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Milestone
2024-02-15 - Feb ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jan 26, 2024 •
edited
Loading

Check existing issues

Description

Currently, the Table component supports navigation and focus of Table Cell with arrow keys. This is useful, but not all the time - and will be more useful when we add built-in editable table cells and other datagrid functionality.

Acceptance Criteria

Adds a new interactionMode property (or other name) that defaults to the current behavior, but supports a "none" mode that allows the Table to render without focusable Table Cell or keyboard navigation other than default browser behavior between areas like selection, pagination, etc.

Relevant Info

Focusable content within Table Cell should not be impacted - these will still be keyboard navigable as expected. cc @geospatialem

Which Component

Table, Table child components

Example Use Case

This will allow for more "static table" use cases where the datagrid-navigation keyboard method could be unexpected.

Priority impact

p2 - want for current milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. 1 - assigned Issues that are assigned to a sprint and a team member. needs triage Planning workflow - pending design/dev review. estimate - 3 A day or two of work, likely requires updates to tests. labels Jan 26, 2024
@macandcheese macandcheese self-assigned this Jan 26, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone Calcite (design) Issues logged by Calcite designers. labels Jan 26, 2024
@mpayson
Copy link

mpayson commented Feb 1, 2024 •
edited
Loading

This would be great! Run into this a few times where we use calcite table, and people were confused about why the cells could be focused / interacted with

@macandcheese macandcheese mentioned this issue Feb 1, 2024
Merged
@geospatialem geospatialem 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. needs triage Planning workflow - pending design/dev review. labels Feb 5, 2024
macandcheese added a commit that referenced this issue Feb 12, 2024
@macandcheese
feat(table): Add interactionMode property to control focus behavior (…
0cb78c0 
…#8686)

**Related Issue:** #8659 

## Summary
- Adds an `interactionMode` property with `static` and `interactive`
(default) values to Table to allow the table to be used without cell +
header focus.
- When set, prevents keyboard navigation with arrow / home / page keys.
- Still allows focus and tab / shift tab for `interactionMode` selection
affordances in cell + header.
- Still allows tab to / shift tab to reach focusable content
- Prevent focus of "unused" `interactionMode` footer cell in `static`
mode.
- Adds test to check that only interactionMode cells + header are
focused in `static` mode.
- Does not change the default behavior.
@macandcheese macandcheese 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 Feb 12, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned macandcheese Feb 12, 2024
@geospatialem
Copy link
Member

The component now bypasses keyboard navigation, but during the PR review when JAWS and NVDA were active both tables and content were still accessible via keyboard.

During verification observed both JAWS and NVDA can no longer access the content via this codepen in 2.5.0-next.2. cc @macandcheese

@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 13, 2024
@macandcheese macandcheese mentioned this issue Feb 14, 2024
Merged
macandcheese added a commit that referenced this issue Feb 15, 2024
@macandcheese
feat(table): Improve accessibility of interaction-mode: static Table (#…
eead1b5 
…8754)

**Related Issue:** #8659 

## Summary
Follow up items cc @geospatialem
@geospatialem geospatialem 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 Feb 15, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned macandcheese Feb 15, 2024
@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 Feb 15, 2024
@geospatialem
Copy link
Member

Verified in 2.5.0-next.6 with https://codepen.io/geospatialem/pen/oNVQQOa for JAWS and NVDA. 🎉

Elijbet pushed a commit that referenced this issue Feb 15, 2024
@macandcheese @Elijbet
feat(table): Add interactionMode property to control focus behavior (…
9218933 
…#8686)

**Related Issue:** #8659 

## Summary
- Adds an `interactionMode` property with `static` and `interactive`
(default) values to Table to allow the table to be used without cell +
header focus.
- When set, prevents keyboard navigation with arrow / home / page keys.
- Still allows focus and tab / shift tab for `interactionMode` selection
affordances in cell + header.
- Still allows tab to / shift tab to reach focusable content
- Prevent focus of "unused" `interactionMode` footer cell in `static`
mode.
- Adds test to check that only interactionMode cells + header are
focused in `static` mode.
- Does not change the default behavior.
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@macandcheese @Elijbet
feat(table): Improve accessibility of interaction-mode: static Table (#…
66e5cde 
…8754)

**Related Issue:** #8659 

## Summary
Follow up items cc @geospatialem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Projects
None yet
Milestone
2024-02-15 - Feb Maintenance Release
Development

No branches or pull requests
4 participants
@macandcheese @geospatialem @mpayson @DitwanP