From daa89a26ac8fa655c56c9447a8635e7c436e4f63 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 13 Feb 2023 16:30:03 -0500
Subject: [PATCH] feat(picker-column): assign custom aria-labels to column
 options (#26749)

---
 .../picker-column/picker-column.tsx           |  9 +++--
 .../test/picker-column-aria.spec.tsx          | 35 +++++++++++++++++++
 .../picker-column/test/picker-column.spec.tsx |  1 +
 .../src/components/picker/picker-interface.ts |  4 +++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 core/src/components/picker-column/test/picker-column-aria.spec.tsx

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index f75ce92ad6..f643c086ef 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/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 && (
diff --git a/core/src/components/picker-column/test/picker-column-aria.spec.tsx b/core/src/components/picker-column/test/picker-column-aria.spec.tsx
new file mode 100644
index 0000000000..9e518e655a
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/core/src/components/picker-column/test/picker-column.spec.tsx b/core/src/components/picker-column/test/picker-column.spec.tsx
index f072f92c2c..d09d5980f5 100644
--- a/core/src/components/picker-column/test/picker-column.spec.tsx
+++ b/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', () => {
diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts
index 649e3dbecb..fb0529fb63 100644
--- a/core/src/components/picker/picker-interface.ts
+++ b/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;
 }