fix(dropdown): prevents navigating dropdown items with Tab key #7527

anveshmekala · 2023-08-15T20:10:12Z

Related Issue: #6610

Summary

Prevents navigating the dropdown list using Tab key
When Tab key is down with dropdown open the focus shifts on to next focusable element
When Shift+Tab key is down with dropdown open the focus shifts back on to trigger element.

jcfranco

Looking good, @anveshmekala! 😎

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

jcfranco · 2023-08-19T00:12:11Z

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

@@ -724,98 +724,169 @@ describe("calcite-dropdown", () => {
    await page.waitForChanges();
    expect(await dropdownWrapper.isVisible()).toBe(false);
  });
+  describe("keyboard support", () => {


I think tests and describe blocks may need rearranging. This top one is for keyboard support and there's nested ones covering pointer interaction.

removed the keyboard support describe block since most of the tests are using click to open the dropdown.

jcfranco · 2023-08-19T00:16:30Z

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

-          this.closeCalciteDropdown();
+        if (this.items.indexOf(target) > -1) {
+          this.open = false;
+          this.updateTabIndexOfItems(event);


Should we call this when the active item is updated vs only on Tab?

Its not required to call when active Item is updated. When the user hits Tab the tabIndex of the current focused item will be set to 0 ( though selected item is different from focused item). When the user opens the dropdown again then the selectedItem is focused using setFocus method.

Gotcha. I was wondering it the items could be left in an odd state.

jcfranco

Noice! 👇⌨️👇

jcfranco · 2023-08-22T19:06:54Z

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

@@ -675,4 +672,10 @@ export class Dropdown
      this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
    }
  };
+
+  private updateTabIndexOfItems(event: CustomEvent<ItemKeyboardEvent>): void {


To make it more general and decouple the event from this, can you update the signature to pass the item directly instead of the event?

makes sense. updated.

…ation-with-tab

geospatialem

Awesome! 💪🏻 Great a11y update - works well with keyboard navigation and with JAWS active.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.1...@esri/calcite-components@1.7.0) (2023-09-01) ### Features * **action-bar, action-pad, action-group:** Add label properties for group context ([#7415](#7415)) ([b34f36d](b34f36d)) * **combobox:** Add single-persist selection mode ([#7583](#7583)) ([dab06a3](dab06a3)) * **flow:** Add support for custom flow-item elements ([#7608](#7608)) ([197adfe](197adfe)) * **input-date-picker:** Normalize year to current century for user typed values only ([#7638](#7638)) ([a1db718](a1db718)) * **input-number:** Add integer property ([#7646](#7646)) ([cd66a6d](cd66a6d)) * **input-time-picker:** Support fractional seconds ([#7532](#7532)) ([c2bf34b](c2bf34b)) * **meter:** Add Meter component ([#7401](#7401)) ([47163ed](47163ed)) * **sheet:** Add Sheet component ([#7561](#7561)) ([f12a393](f12a393)) * **sheet:** Update default widths ([#7617](#7617)) ([47d2c0b](47d2c0b)) * **shell:** Add "Sheets" Slot ([#7579](#7579)) ([e798765](e798765)) * **table:** Add Table and related components ([#7607](#7607)) ([b067e72](b067e72)) ### Bug Fixes * **accordion, accordion-item:** Improve a11y ([#7560](#7560)) ([b5170b6](b5170b6)) * Add drag styles for improved UX ([#7644](#7644)) ([afbb764](afbb764)) * **block, block-section:** Improve a11y ([#7557](#7557)) ([1f44f6b](1f44f6b)) * **chip-group:** Add existence checks ([#7586](#7586)) ([5ca64f1](5ca64f1)) * **color-picker:** Update value when alphaChannel is toggled ([#7563](#7563)) ([1f753dd](1f753dd)) * **combobox:** Prevent deselecting items via keyboard in single-persist mode ([#7634](#7634)) ([4f5f8b0](4f5f8b0)) * **combobox:** Update combobox height to follow design spec ([#7558](#7558)) ([ec08845](ec08845)) * **date-picker:** Set start of week to monday in zh-CN ([#7578](#7578)) ([7e385cb](7e385cb)) * **dropdown:** Prevents navigating dropdown items with Tab key ([#7527](#7527)) ([3ea658d](3ea658d)) * Ensure label only focuses the first labelable child ([#7553](#7553)) ([426159c](426159c)) * **flow:** Catch error when beforeBack promise is rejected ([#7601](#7601)) ([cb70671](cb70671)) * **input-date-picker, input-time-picker:** Do not show dropdown affordance when read-only ([#7559](#7559)) ([5a3f19c](5a3f19c)) * **input, input-number:** Correctly sanitize numbers when pasting string with 'e' ([#7648](#7648)) ([b8bc11c](b8bc11c)) * **list, sortable-list, value-list:** Emit calciteListOrderChange when dragging between lists ([#7614](#7614)) ([4653581](4653581)) * **list:** Fixes dragging nested list items ([#7555](#7555)) ([c25f7b3](c25f7b3)) * **list:** Stop emitting calciteListChange when a list-item is disabled or closed. ([#7624](#7624)) ([7008463](7008463)) * **loader:** Tweak loading animations to work in Safari ([#7564](#7564)) ([2103654](2103654)) * **modal:** Catch error when beforeClose promise is rejected ([#7600](#7600)) ([70405d0](70405d0)) * **modal:** Handle removal of open attribute and prevent multiple beforeClose calls ([#7470](#7470)) ([f31588f](f31588f)) * **rating:** Adds focus outline on click ([#7341](#7341)) ([af30073](af30073)) * **segmented-control:** Refresh items when added dynamically ([#7567](#7567)) ([2e36eb3](2e36eb3)) * **split-button:** Update divider and borders to follow design spec ([#7568](#7568)) ([8df59ab](8df59ab)) * **tree-item:** Move focus outline to item label area ([#7581](#7581)) ([1327cef](1327cef)) * **tree-item:** Updates state when selection changes programmatically for `selection-mode='ancestors'` ([#7572](#7572)) ([40758c5](40758c5)) * **tree:** Improve keyboard navigation ([#7618](#7618)) ([826a5cb](826a5cb)) </details> <details><summary>@esri/calcite-components-react: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.1...@esri/calcite-components-react@1.7.0) (2023-09-01) ### Bug Fixes * Make sure components are defined in environments like in codesandbox ([#7632](#7632)) ([7005cce](7005cce)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.7.0-next.22 to ^1.7.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>

fix(dropdown): prevents navigating dropdown items with Tab key

20a47c3

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

github-actions bot assigned anveshmekala Aug 15, 2023

anveshmekala added 3 commits August 15, 2023 18:08

moves shift onto next focusable item

c82bc2b

refactor

ee24d69

add tests

471d2bc

anveshmekala marked this pull request as ready for review August 18, 2023 19:16

anveshmekala requested a review from a team as a code owner August 18, 2023 19:16

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 18, 2023

jcfranco reviewed Aug 19, 2023

View reviewed changes

anveshmekala requested a review from geospatialem August 21, 2023 15:18

feedback changes

33e3feb

anveshmekala 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 Aug 21, 2023

jcfranco approved these changes Aug 22, 2023

View reviewed changes

refactor

7199bfe

anveshmekala 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 Aug 22, 2023

Merge branch 'main' into anveshmekala/6610-dropdown-remove-list-navig…

6abed00

…ation-with-tab

anveshmekala 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 Aug 22, 2023

geospatialem approved these changes Aug 22, 2023

View reviewed changes

anveshmekala merged commit 3ea658d into main Aug 22, 2023

anveshmekala deleted the anveshmekala/6610-dropdown-remove-list-navigation-with-tab branch August 22, 2023 21:43

github-actions bot added this to the 2023 August Priorities milestone Aug 22, 2023

calcite-admin mentioned this pull request Aug 22, 2023

chore: release main #7571

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(dropdown): prevents navigating dropdown items with Tab key #7527

fix(dropdown): prevents navigating dropdown items with Tab key #7527

anveshmekala commented Aug 15, 2023 •

edited

Loading

jcfranco left a comment

jcfranco Aug 19, 2023

anveshmekala Aug 21, 2023

jcfranco Aug 19, 2023

anveshmekala Aug 21, 2023

jcfranco Aug 22, 2023

jcfranco left a comment

jcfranco Aug 22, 2023

anveshmekala Aug 22, 2023

geospatialem left a comment

fix(dropdown): prevents navigating dropdown items with Tab key #7527

fix(dropdown): prevents navigating dropdown items with Tab key #7527

Conversation

anveshmekala commented Aug 15, 2023 • edited Loading

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Aug 19, 2023

Choose a reason for hiding this comment

anveshmekala Aug 21, 2023

Choose a reason for hiding this comment

jcfranco Aug 19, 2023

Choose a reason for hiding this comment

anveshmekala Aug 21, 2023

Choose a reason for hiding this comment

jcfranco Aug 22, 2023

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Aug 22, 2023

Choose a reason for hiding this comment

anveshmekala Aug 22, 2023

Choose a reason for hiding this comment

geospatialem left a comment

Choose a reason for hiding this comment

anveshmekala commented Aug 15, 2023 •

edited

Loading