feat(picker-column): assign custom aria-labels to column options (#26749)

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

@@ -360,7 +360,6 @@ export class PickerColumnCmp implements ComponentInterface {
 
   render() {
     const col = this.col;
-    const Button = 'button' as any;
     const mode = getIonMode(this);
     return (
       <Host
@@ -382,9 +381,13 @@ export class PickerColumnCmp implements ComponentInterface {
         )}
         <div class="picker-opts" style={{ maxWidth: col.optionsWidth! }} ref={(el) => (this.optsEl = el)}>
           {col.options.map((o, index) => (
-            <Button type="button" class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }} opt-index={index}>
+            <button
+              aria-label={o.ariaLabel}
+              class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }}
+              opt-index={index}
+            >
               {o.text}
-            </Button>
+            </button>
           ))}
         </div>
         {col.suffix && (

core/src/components/picker-column/test/picker-column-aria.spec.tsx

@@ -0,0 +1,35 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { PickerColumnCmp } from '../picker-column';
+/**
+ * Stencil has an issue where having multiple spec tests in the same file,
+ * will cause an exception to be thrown. This test is located in a separate file
+ * to avoid this issue: https://github.com/ionic-team/stencil/issues/4053
+ */
+describe('picker-column', () => {
+  it('should add aria-label to the picker column option', async () => {
+    const col = {
+      options: [
+        {
+          text: 'C#',
+          ariaLabel: 'C Sharp',
+        },
+        {
+          text: 'Java',
+        },
+      ],
+    };
+
+    const page = await newSpecPage({
+      components: [PickerColumnCmp],
+      template: () => <ion-picker-column col={col}></ion-picker-column>,
+    });
+
+    const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
+    const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
+
+    expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
+    expect(secondOption.getAttribute('aria-label')).toBe(null);
+  });
+});

core/src/components/picker-column/test/picker-column.spec.tsx

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
+
 import { PickerColumnCmp } from '../picker-column';
 
 describe('picker-column', () => {

core/src/components/picker/picker-interface.ts

@@ -57,4 +57,8 @@ export interface PickerColumnOption {
   duration?: number;
   transform?: string;
   selected?: boolean;
+  /**
+   * The optional text to assign as the aria-label on the picker column option.
+   */
+  ariaLabel?: string;
 }