fix: allow users to control tabindex on interactive components #8166

jcfranco · 2023-11-14T01:39:20Z

Related Issue: #4970

Summary

Updates the interactive component pattern to avoid the need to control tabindex on the host to prevent tabbing into a component's subtree.

This works by introducing a new functional component (InteractiveContainer) that leverages inert (prevent tabbing into its contents) and display: contents (allows us to use it as a root container without affecting layout), which should be the root container under the host.

Updating components to this pattern should be straightforward as the styling of the helper component is bundled within the disabled mixin that interactive components already include and updateHostInteraction no longer needs its 2nd parameter. For cases that were setting the 2nd parameter (hostIsTabbable) all they have to do to migrate depends on the value:

false (default) – no further changes necessary
true – set tabIndex={0} on the host
predicate function – set tabIndex={myPredicateFunction() ? 0 : -1 } on the host
"managed" – no further changes necessary as owner/parent sets tabIndex on the component already

Any use of Fragment can be replaced by InteractiveContainer directly.

2 and 3 might also need to determine the tab index based on disabled.

github-actions · 2023-11-23T01:45:15Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2023-12-05T01:45:46Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2023-12-14T01:45:10Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

driskull

This looks good @jcfranco ! 🎉

We'll just have to do some testing to make sure it won't mess up any existing styles with the added container.

driskull · 2023-12-20T01:28:20Z

...design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts

@@ -49,7 +49,8 @@ export function formatExtraOutput(
                const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                return Array.isArray(m)
-                  ? `${output === "light" ? `:root {${cssProps.join("")}}` : ""
+                  ? `${


This just a formatting change?

Yes, I think it got formatted when the latest from main got merged.

jcfranco · 2023-12-20T17:21:07Z

We'll just have to do some testing to make sure it won't mess up any existing styles with the added container.

Based on the description of display: contents, I don't foresee any issues, but worth keeping an eye out anyways. 👁️👄👁️

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.1.1</summary> ## [2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.0...@esri/calcite-design-tokens@2.1.1) (2024-01-17) ### Bug Fixes * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) </details> <details><summary>@esri/calcite-components: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.1.0...@esri/calcite-components@2.2.0) (2024-01-17) ### Features * **action-menu:** Close menu on blur instead of on tab key. ([#8577](#8577)) ([ccfbd0c](ccfbd0c)) * **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** Add required property ([#8517](#8517)) ([72a1ce4](72a1ce4)) * **handle, block, list-item:** Improve drag handle tooltip to include item label ([#8584](#8584)) ([6e643e2](6e643e2)) * **handle:** Add `blurUnselectDisabled` property to disable unselecting handle on blur. ([#8483](#8483)) ([4d665cc](4d665cc)) * **handle:** Add selected property and calciteHandleChange event. ([#8484](#8484)) ([d2e9880](d2e9880)) * **list-item:** Add dragSelected property and calciteListItemDragHandleChange event ([#8524](#8524)) ([4db2eb7](4db2eb7)) * **list-item:** Add tooltip for expanding and collapsing ([#8612](#8612)) ([4964491](4964491)) * **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](#8569)) ([f1fc7f6](f1fc7f6)) * **list:** Introduce clearer unselected state ([#8510](#8510)) ([f1e836c](f1e836c)) * **radio-button-group, segmented control:** Add validationMessage, validationIcon, and status properties ([#8561](#8561)) ([d4c5efc](d4c5efc)) * Reflect validationIcon property ([#8583](#8583)) ([b3d38b3](b3d38b3)) * **table-header:** Add style when within a `selected` Table Row ([#8449](#8449)) ([13cfe75](13cfe75)) * **tabs:** Emit selection-related events when selection is modified after closing the selected tab ([#8582](#8582)) ([b15c940](b15c940)) * **tile:** Add visual scales ([#8496](#8496)) ([7638ec4](7638ec4)) * Use input-message to display validation messages for invalid fields after form submission ([#8574](#8574)) ([fd392fe](fd392fe)) ### Bug Fixes * **action:** Update component tokens to support transparent ([#8532](#8532)) ([81cb5cc](81cb5cc)) * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) * **button:** Avoid needlessly overwriting title ([#8491](#8491)) ([350a983](350a983)) * **color-picker:** Emit color change when nudging color channels by using the shift key ([#8579](#8579)) ([4250598](4250598)) * **combobox:** Only allow deleting visible chips with the keyboard ([#8603](#8603)) ([2d38241](2d38241)) * **date-picker:** Prevent console error when selecting just an end date for input date picker ([#8444](#8444)) ([c0e51c3](c0e51c3)) * **filter:** Prevent console warning from displaying to end users ([#8458](#8458)) ([0de7646](0de7646)) * **input-date-picker:** Ensure range icon toggles open corresponding date-picker ([#8554](#8554)) ([cfafd15](cfafd15)) * **input-date-picker:** Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. ([5f4fa3e](5f4fa3e)) * **input-message:** Add missing margin to scale="s", spacing CSS variable has effect ([#8592](#8592)) ([49b0a20](49b0a20)) * **input, input-number, input-text:** Restore focus on input after browser validation error is displayed and user continues typing ([#8563](#8563)) ([5897965](5897965)) * **input, input-number:** Support setting value property to Infinity ([#8547](#8547)) ([f6ac698](f6ac698)) * **list-item:** Store last focused cell from focusing on elements within a cell. ([#8494](#8494)) ([28f93b4](28f93b4)) * **list, list-item, list-item-group:** Honor hidden attribute on list-item and list-item-group ([#8541](#8541)) ([3851dc6](3851dc6)) * **list:** Correct selectedItems value when list is filtered ([#8481](#8481)) ([9de1922](9de1922)) * **list:** Fix event detail newIndex when down arrow pressed to sort ([#8462](#8462)) ([b3d5169](b3d5169)) * **list:** Fix keyboard arrow navigation ([#8470](#8470)) ([57fdaa4](57fdaa4)) * **modal:** Ensure focus trapping in dynamically created, subsequently opened modals ([#8593](#8593)) ([4ec6b94](4ec6b94)) * **table:** Fix double border on `bordered` Table Rows in `table-footer` ([#8509](#8509)) ([c16ea33](c16ea33)) * **table:** Improve Table overflow behavior ([#8424](#8424)) ([79743e1](79743e1)) * **text-area:** Prevent infinite render loop when `max-length` property is defined ([#8610](#8610)) ([f30d933](f30d933)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1 </details> <details><summary>@esri/calcite-components-angular: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0 </details> <details><summary>@esri/calcite-components-react: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.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>

jcfranco added 2 commits November 13, 2023 15:57

fix: allow users to control tabindex on interactive components

eedf1b0

update ignore error message

5cc8677

github-actions bot assigned jcfranco Nov 14, 2023

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Nov 14, 2023

jcfranco mentioned this pull request Nov 14, 2023

Setting tabindex="-1" on calcite-button does not work #4970

Closed

jcfranco added 3 commits November 15, 2023 00:30

update other interactive components

0099c8b

drop unused updateHostInteraction argument

7b404dd

merge main

1fcc987

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 23, 2023

merge main

bce0c18

jcfranco changed the base branch from main to rc November 27, 2023 21:49

jcfranco changed the base branch from rc to main November 27, 2023 21:50

jcfranco removed the Stale Issues or pull requests that have not had recent activity. label Nov 27, 2023

jcfranco mentioned this pull request Nov 28, 2023

fix: allow users to control tabindex on interactive components #8281

Closed

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 5, 2023

jcfranco added 6 commits December 5, 2023 23:51

update spec test

8d7de57

fix E2E tests

cfd06c1

fix value-list E2E test

66447bc

add missing disabled mixin to table-cell

6ad885f

merge main

8a86c6b

update dropdown-item

fd15c5f

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed Stale Issues or pull requests that have not had recent activity. labels Dec 6, 2023

jcfranco added 2 commits December 6, 2023 00:44

restore dropdown-item host tabindex

425d27e

update dropdown-item host tabindex

bc0204d

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 14, 2023

merge main

993d4e2

merge main

367f1cd

jcfranco 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. Stale Issues or pull requests that have not had recent activity. labels Dec 19, 2023

jcfranco marked this pull request as ready for review December 19, 2023 20:16

jcfranco requested review from benelan, driskull, geospatialem and a team as code owners December 19, 2023 20:16

driskull approved these changes Dec 20, 2023

View reviewed changes

jcfranco merged commit b15c052 into main Dec 20, 2023
17 checks passed

jcfranco deleted the jcfranco/4970-allow-setting-tabindex-on-interactive-components branch December 20, 2023 17:21

github-actions bot added this to the 2024 January Priorities - Main release milestone Dec 20, 2023

calcite-admin mentioned this pull request Dec 20, 2023

chore: release main #8455

Merged

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

fix: allow users to control tabindex on interactive components #8166

fix: allow users to control tabindex on interactive components #8166

jcfranco commented Nov 14, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 14, 2023

driskull left a comment

driskull Dec 20, 2023

jcfranco Dec 20, 2023

jcfranco commented Dec 20, 2023

fix: allow users to control tabindex on interactive components #8166

fix: allow users to control tabindex on interactive components #8166

Conversation

jcfranco commented Nov 14, 2023 • edited Loading

Summary

github-actions bot commented Nov 23, 2023

github-actions bot commented Dec 5, 2023

github-actions bot commented Dec 14, 2023

driskull left a comment

Choose a reason for hiding this comment

driskull Dec 20, 2023

Choose a reason for hiding this comment

jcfranco Dec 20, 2023

Choose a reason for hiding this comment

jcfranco commented Dec 20, 2023

jcfranco commented Nov 14, 2023 •

edited

Loading