feat(table): Add `interactionMode` property to control focus behavior #8686

macandcheese · 2024-02-01T23:52:49Z

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.

packages/calcite-components/src/components/table-cell/table-cell.tsx

geospatialem

Awesome! ✨

This works well with Windows without AT active - both with and without selection, and when JAWS is active - also with and without selection. 🥇

packages/calcite-components/src/components/table/table.tsx

jcfranco

✨🏓✨

jcfranco · 2024-02-12T19:25:48Z

packages/calcite-components/src/components/table-cell/resources.ts

@@ -5,4 +5,5 @@ export const CSS = {
  selectedCell: "selected-cell",
  assistiveText: "assistive-text",
  lastCell: "last-cell",
+  nonInteractive: "non-interactive",


Nitpick: should this and related styles reflect the updated name?

Updated to match other css cell modifiers 👍

jcfranco · 2024-02-12T19:26:59Z

packages/calcite-components/src/components/table-row/table-row.tsx

@@ -385,7 +390,11 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
            aria-rowindex={this.positionAll + 1}
            aria-selected={this.selected}
            class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }}
-            onKeyDown={(event) => this.keyDownHandler(event)}
+            onKeyDown={(event) => {
+              if (this.interactionMode === "interactive") {


Could we push this into the event handler to avoid creating a new anonymous function on each render?

Updated and will merge in post-Chromatic run. Thanks for review!

packages/calcite-components/src/components/table/table.e2e.ts

…#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.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.4.0...@esri/calcite-components@2.5.0) (2024-02-15) ### Features * **stepper:** Add horizontal-single layout ([#8742](#8742)) ([c34bc4f](c34bc4f)) * **table:** Add `interactionMode` property to control focus behavior ([#8686](#8686)) ([0cb78c0](0cb78c0)) * **table:** Improve accessibility of interaction-mode: static Table ([#8754](#8754)) ([eead1b5](eead1b5)) * **tile:** Add responsive layout features ([#8691](#8691)) ([f4f872e](f4f872e)) ### Bug Fixes * **color-picker:** Alpha-channel slider scope updates to reflect current opacity ([#8700](#8700)) ([cd0b532](cd0b532)) * **combobox:** Avoid inline-start padding on combobox label when icon is displayed ([#8672](#8672)) ([9eb680a](9eb680a)) * Don't override existing validationMessage when displaying after form submission ([#8690](#8690)) ([3076220](3076220)) * Fix dragging items on a mobile device ([#8751](#8751)) ([dc11612](dc11612)) * Fix styling when dragging items on a mobile device ([#8750](#8750)) ([7c01e6e](7c01e6e)) * **input, input-number, input-text, text-area:** Ensure all applicable props are considered in form validation ([#8655](#8655)) ([6de8534](6de8534)) * **list-item:** Fix slotted list border styling. ([#8712](#8712)) ([855f98d](855f98d)) * **loader:** Optimize animation performance ([#8714](#8714)) ([1ed8a01](1ed8a01)) * **preset:** Add back legacy token for calcite-ui-focus-color ([#8694](#8694)) ([1d1b933](1d1b933)) * Prevent interaction when component is disabled after initialization (Firefox) ([#8746](#8746)) ([aa84182](aa84182)) * **stepper:** No longer adds default `min-width` for items when `layout='horizontal'` ([#8758](#8758)) ([23a7439](23a7439)) ### Reverts * Fix(panel, flow-item): remove overflow rule ([#8711](#8711)) ([21226ce](21226ce)) </details> <details><summary>@esri/calcite-components-angular: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.4.0...@esri/calcite-components-angular@2.5.0) (2024-02-15) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.5.0-next.6 to ^2.5.0 </details> <details><summary>@esri/calcite-components-react: 2.5.0</summary> ## [2.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.4.0...@esri/calcite-components-react@2.5.0) (2024-02-15) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.5.0-next.6 to ^2.5.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* origin/main: (22 commits) fix: ensure ui-icons are copied from correct path (#8761) build(changelog): fix synced version group name (#8762) chore: release main (#8706) fix(stepper): no longer adds default `min-width` for items when `layout='horizontal'` (#8758) build(deps): update dependency @floating-ui/dom to v1.6.3 (#8759) chore: release next feat(table): Improve accessibility of interaction-mode: static Table (#8754) chore: release next fix: fix dragging items on a mobile device (#8751) build(deps): update dependency @esri/calcite-ui-icons to v3.26.4 (#8752) chore: release next fix: prevent interaction when component is disabled after initialization (Firefox) (#8746) fix: fix styling when dragging items on a mobile device (#8750) chore: release next feat(stepper): add horizontal-single layout (#8742) revert: fix(panel, flow-item): remove overflow rule (#8711) refactor(input): tidy up input spec test (#8733) chore: improve doc for createBreakpointStories helper (#8739) chore: release next feat(table): Add `interactionMode` property to control focus behavior (#8686) ...

macandcheese added 2 commits February 1, 2024 15:45

feat(table): Add nonInteractive property to control focus behavior

9c44724

Clean up

39f5987

macandcheese requested a review from a team as a code owner February 1, 2024 23:52

github-actions bot assigned macandcheese Feb 1, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Feb 1, 2024

macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 1, 2024

driskull reviewed Feb 1, 2024

View reviewed changes

packages/calcite-components/src/components/table-cell/table-cell.tsx Outdated Show resolved Hide resolved

Clean up

64b300c

geospatialem self-requested a review February 2, 2024 15:13

geospatialem reviewed Feb 2, 2024

View reviewed changes

packages/calcite-components/src/components/table/table.tsx Outdated Show resolved Hide resolved

macandcheese added 2 commits February 2, 2024 10:41

Merge branch 'main' into macandcheese/8659-table-non-interactive

a23363b

Clean up

b28fa29

macandcheese added this to the 2024-02-27 - Feb Maintenance Release milestone Feb 2, 2024

macandcheese added the low risk Issues with low risk for consideration in low risk milestones label Feb 2, 2024

macandcheese changed the title ~~feat(table): Add nonInteractive property to control focus behavior~~ feat(table): Add interactionMode property to control focus behavior Feb 2, 2024

Clean up

753d75e

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 2, 2024

geospatialem reviewed Feb 2, 2024

View reviewed changes

packages/calcite-components/src/components/table/table.tsx Outdated Show resolved Hide resolved

Clean up

1374cd2

macandcheese requested review from jcfranco, alisonailea, geospatialem and driskull February 5, 2024 19:19

macandcheese added 2 commits February 8, 2024 09:29

Merge branch 'main' into macandcheese/8659-table-non-interactive

29c505c

Merge branch 'main' into macandcheese/8659-table-non-interactive

b3b4835

jcfranco approved these changes Feb 12, 2024

View reviewed changes

Clean up

4287c7a

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 12, 2024

macandcheese merged commit 0cb78c0 into main Feb 12, 2024
15 of 16 checks passed

macandcheese deleted the macandcheese/8659-table-non-interactive branch February 12, 2024 22:07

calcite-admin mentioned this pull request Feb 12, 2024

chore: release main #8706

Merged

geospatialem modified the milestones: 2024-02-27 - Feb Maintenance Release, 2024-02-15 - Feb Maintenance Release Feb 12, 2024

calcite-admin mentioned this pull request May 14, 2024

chore: release main #9237

Merged

calcite-admin mentioned this pull request May 28, 2024

chore: release hotfix #9438

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(table): Add `interactionMode` property to control focus behavior #8686

feat(table): Add `interactionMode` property to control focus behavior #8686

macandcheese commented Feb 1, 2024 •

edited

Loading

geospatialem left a comment

jcfranco left a comment

jcfranco Feb 12, 2024

macandcheese Feb 12, 2024

jcfranco Feb 12, 2024

macandcheese Feb 12, 2024

feat(table): Add interactionMode property to control focus behavior #8686

feat(table): Add interactionMode property to control focus behavior #8686

Conversation

macandcheese commented Feb 1, 2024 • edited Loading

Summary

geospatialem left a comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Feb 12, 2024

Choose a reason for hiding this comment

macandcheese Feb 12, 2024

Choose a reason for hiding this comment

jcfranco Feb 12, 2024

Choose a reason for hiding this comment

macandcheese Feb 12, 2024

Choose a reason for hiding this comment

feat(table): Add `interactionMode` property to control focus behavior #8686

feat(table): Add `interactionMode` property to control focus behavior #8686

macandcheese commented Feb 1, 2024 •

edited

Loading