fix(picker-column-internal): tabbing between columns works (#25464)

ionic-team · Jun 14, 2022 · db02772 · db02772
1 parent ec4a36e
commit db02772
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/core/src/components/picker-column-internal/picker-column-internal.tsx b/core/src/components/picker-column-internal/picker-column-internal.tsx
@@ -306,8 +306,19 @@ export class PickerColumnInternal implements ComponentInterface {
         <div class="picker-item picker-item-empty">&nbsp;</div>
         <div class="picker-item picker-item-empty">&nbsp;</div>
         {items.map((item, index) => {
+          {
+            /*
+            Users should be able to tab
+            between multiple columns. As a result,
+            we set tabindex here so that tabbing switches
+            between columns instead of buttons. Users
+            can still use arrow keys on the keyboard to
+            navigate the column up and down.
+          */
+          }
           return (
             <button
+              tabindex="-1"
               class={{
                 'picker-item': true,
                 'picker-item-disabled': item.disabled || false,

diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
@@ -12,6 +12,65 @@ test.describe('picker-internal', () => {
     );
   });
 
+  test.describe('picker-internal: focus', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(`
+        <ion-picker-internal>
+          <ion-picker-column-internal value="full-stack" id="first"></ion-picker-column-internal>
+          <ion-picker-column-internal value="onion" id="second"></ion-picker-column-internal>
+        </ion-picker-internal>
+
+        <script>
+          const columns = document.querySelectorAll('ion-picker-column-internal');
+          columns[0].items = [
+            { text: 'Minified', value: 'minified' },
+            { text: 'Responsive', value: 'responsive' },
+            { text: 'Full Stack', value: 'full-stack' },
+            { text: 'Mobile First', value: 'mobile-first' },
+            { text: 'Serverless', value: 'serverless' },
+          ]
+
+          columns[1].items = [
+            { text: 'Tomato', value: 'tomato' },
+            { text: 'Avocado', value: 'avocado' },
+            { text: 'Onion', value: 'onion' },
+            { text: 'Potato', value: 'potato' },
+            { text: 'Artichoke', value: 'artichoke' },
+          ];
+        </script>
+      `);
+    });
+
+    test('tabbing should correctly move focus between columns', async ({ page }) => {
+      const firstColumn = page.locator('ion-picker-column-internal#first');
+      const secondColumn = page.locator('ion-picker-column-internal#second');
+
+      // Focus first column
+      await page.keyboard.press('Tab');
+      expect(firstColumn).toBeFocused();
+
+      await page.waitForChanges();
+
+      // Focus second column
+      await page.keyboard.press('Tab');
+      expect(secondColumn).toBeFocused();
+    });
+
+    test('tabbing should correctly move focus back', async ({ page }) => {
+      const firstColumn = page.locator('ion-picker-column-internal#first');
+      const secondColumn = page.locator('ion-picker-column-internal#second');
+
+      await secondColumn.focus();
+      expect(secondColumn).toBeFocused();
+
+      await page.waitForChanges();
+
+      // Focus first column
+      await page.keyboard.press('Shift+Tab');
+      expect(firstColumn).toBeFocused();
+    });
+  });
+
   test.describe('within overlay:', () => {
     // TODO (FW-1397): Remove this test.skip when the issue is fixed.
     test.skip(true, 'Mobile Safari and Chrome on Linux renders the selected option incorrectly');