fix(datetime): wheel picker is easier to use with screen readers

core/src/components/picker-column-internal/picker-column-internal.tsx

@@ -3,7 +3,8 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { getElementRoot, raf } from '../../utils/helpers';
+import { getElementRoot, raf, inheritAttributes } from '../../utils/helpers';
+import type { Attributes } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 import { createColorClasses } from '../../utils/theme';
 import type { PickerInternalCustomEvent } from '../picker-internal/picker-internal-interfaces';
@@ -27,6 +28,7 @@ export class PickerColumnInternal implements ComponentInterface {
   private isScrolling = false;
   private scrollEndCallback?: () => void;
   private isColumnVisible = false;
+  private inheritedAttributes: Attributes = {};
 
   @State() isActive = false;
 
@@ -147,6 +149,10 @@ export class PickerColumnInternal implements ComponentInterface {
    * height of 0px.
    */
   componentWillLoad() {
+    this.inheritedAttributes = {
+      ...inheritAttributes(this.el, ['aria-label']),
+    };
+
     const visibleCallback = (entries: IntersectionObserverEntry[]) => {
       const ev = entries[0];
 
@@ -159,7 +165,7 @@ export class PickerColumnInternal implements ComponentInterface {
         const oldActive = getElementRoot(this.el).querySelector(`.${PICKER_COL_ACTIVE}`);
         oldActive?.classList.remove(PICKER_COL_ACTIVE);
         this.scrollActiveItemIntoView();
-        this.activeItem?.classList.add(PICKER_COL_ACTIVE);
+        this.activeItemEl?.classList.add(PICKER_COL_ACTIVE);
 
         this.initializeScrollListener();
       } else {
@@ -180,10 +186,10 @@ export class PickerColumnInternal implements ComponentInterface {
   }
 
   componentDidRender() {
-    const { activeItem, items, isColumnVisible, value } = this;
+    const { activeItemEl, items, isColumnVisible, value } = this;
 
     if (isColumnVisible) {
-      if (activeItem) {
+      if (activeItemEl) {
         this.scrollActiveItemIntoView();
       } else if (items[0]?.value !== value) {
         /**
@@ -201,7 +207,7 @@ export class PickerColumnInternal implements ComponentInterface {
   /** @internal  */
   @Method()
   async scrollActiveItemIntoView() {
-    const activeEl = this.activeItem;
+    const activeEl = this.activeItemEl;
 
     if (activeEl) {
       this.centerPickerItemInView(activeEl, false);
@@ -296,7 +302,7 @@ export class PickerColumnInternal implements ComponentInterface {
     const { el } = this;
 
     let timeout: any;
-    let activeEl: HTMLElement | null = this.activeItem;
+    let activeEl: HTMLElement | null = this.activeItemEl;
 
     const scrollCallback = () => {
       raf(() => {
@@ -388,24 +394,54 @@ export class PickerColumnInternal implements ComponentInterface {
     });
   };
 
-  get activeItem() {
+  get activeItemEl() {
     return getElementRoot(this.el).querySelector(
       `.picker-item[data-value="${this.value}"]:not([disabled])`
     ) as HTMLElement | null;
   }
 
+  get activeItem() {
+    const { value, items } = this;
+
+    return items.find((item) => item.value === value && !item.disabled);
+  }
+
   render() {
-    const { items, color, isActive, numericInput } = this;
+    const { items, color, isActive, numericInput, activeItem, inheritedAttributes } = this;
     const mode = getIonMode(this);
-
     return (
       <Host
+        /*
+          Spin button allows users to swipe
+          between picker columns and then drag
+          to select items within a single column.
+          valuetext is required because valuenow does
+          not always reflect the intended value of the
+          spinbutton. Developers must also provide either
+          aria-label or aria-labelledby on the host.
+        */
+        role="spinbutton"
+        /*
+         * Spin buttons require an aria label.
+         * This default label is added as a default
+         * descriptor for the column. Developers may
+         * wish to choose a label that is more
+         * representative of the data users are
+         * trying to select.
+         */
+        aria-label="Picker Item"
+        aria-valuenow={activeItem?.value}
+        aria-valuetext={activeItem?.text}
         tabindex={0}
         class={createColorClasses(color, {
           [mode]: true,
           ['picker-column-active']: isActive,
           ['picker-column-numeric-input']: numericInput,
         })}
+        /*
+         * This allows the default aria label to be overridden.
+         */
+        {...inheritedAttributes}
       >
         <div class="picker-item picker-item-empty">&nbsp;</div>
         <div class="picker-item picker-item-empty">&nbsp;</div>

core/src/components/picker-internal/test/a11y/index.html

@@ -29,7 +29,7 @@ <h1>Picker - a11y</h1>
           { text: 'Fourth', value: '4' },
           { text: 'Fifth', value: '5' },
           { text: 'Sixth', value: '6' },
-          { text: 'Seventh', value: '7' },
+          { text: 'Seventh', value: '7', disabled: true },
         ];
       </script>
     </ion-app>

core/src/components/picker-internal/test/a11y/picker-internal.e2e.ts

@@ -10,4 +10,51 @@ test.describe('picker-internal: a11y', () => {
 
     expect(results.violations).toEqual([]);
   });
+  test('should set the aria-label, aria-valuenow, and aria-valuetext attributes', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs RTL layouts.');
+    test.skip(testInfo.project.metadata.mode === 'md', 'This does not have mode specific logic.');
+
+    await page.goto(`/src/components/picker-internal/test/a11y`);
+
+    const column = page.locator('ion-picker-column-internal');
+    await expect(column).toHaveAttribute('aria-label', 'Picker Item');
+
+    await expect(column).toHaveAttribute('aria-valuenow', '3');
+    await expect(column).toHaveAttribute('aria-valuetext', 'Third');
+
+    await column.evaluate((el: HTMLIonPickerColumnInternalElement) => (el.value = '6'));
+    await page.waitForChanges();
+
+    await expect(column).toHaveAttribute('aria-valuenow', '6');
+    await expect(column).toHaveAttribute('aria-valuetext', 'Sixth');
+
+    await column.evaluate((el: HTMLIonPickerColumnInternalElement) => (el.value = '7'));
+    await page.waitForChanges();
+
+    // Item 7 is disabled, so the picker will reset to the first item
+    await expect(column).toHaveAttribute('aria-valuenow', '1');
+    await expect(column).toHaveAttribute('aria-valuetext', 'First');
+  });
+  test('custom aria-label should be set', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs RTL layouts.');
+    test.skip(testInfo.project.metadata.mode === 'md', 'This does not have mode specific logic.');
+
+    await page.setContent(`
+      <ion-picker-column-internal value="5" aria-label="Custom label"></ion-picker-column-internal>
+
+      <script>
+        const column = document.querySelector('ion-picker-column-internal');
+        column.items = [
+          { text: '01', value: 1 },
+          { text: '02', value: 2 },
+          { text: '03', value: 3 },
+          { text: '04', value: 4 },
+          { text: '05', value: 5 }
+        ];
+      </script>
+    `);
+
+    const column = page.locator('ion-picker-column-internal');
+    await expect(column).toHaveAttribute('aria-label', 'Custom label');
+  });
 });