From 53bc4c99bb65be036b0920a6b01bebb778840997 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 3 Dec 2024 16:31:47 -0800
Subject: [PATCH 1/4] fix(picker-column): prevent focus issues on descendants
 of aria-hidden elements

---
 core/src/components/picker-column/picker-column.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 0b4f57dd8a1..9efa4609e77 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -682,7 +682,6 @@ export class PickerColumn implements ComponentInterface {
         {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
-          aria-hidden="true"
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;

From d6601635329914b9bfeca4a0757d4ee8a053844d Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 4 Dec 2024 15:56:55 -0800
Subject: [PATCH 2/4] refactor(picker-column): add presentation role

---
 core/src/components/picker-column/picker-column.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 9efa4609e77..dc11d7de754 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -682,6 +682,7 @@ export class PickerColumn implements ComponentInterface {
         {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
+          role="presentation"
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;

From 3583fcd77213c811791884edac011d1ab0318b8b Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 5 Dec 2024 08:10:15 -0800
Subject: [PATCH 3/4] refactor(picker-column): add ariahidden

---
 core/src/components/picker-column/picker-column.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index dc11d7de754..a971e32f61e 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -682,7 +682,7 @@ export class PickerColumn implements ComponentInterface {
         {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
-          role="presentation"
+          aria-hidden="true"
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;
@@ -716,7 +716,7 @@ export class PickerColumn implements ComponentInterface {
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;
           </div>
-          <slot></slot>
+          <slot aria-hidden="false"></slot>
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;
           </div>

From 3c62f985a203fa35599c5b14d1a08f876bc8ea7e Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 5 Dec 2024 12:21:48 -0800
Subject: [PATCH 4/4] fix(picker-column): add ariaHidden based on platform

---
 .../picker-column/picker-column.tsx           | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index a971e32f61e..1f16f4d55a6 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -669,6 +669,7 @@ export class PickerColumn implements ComponentInterface {
   render() {
     const { color, disabled, isActive, numericInput } = this;
     const mode = getIonMode(this);
+    const mobile = isPlatform('mobile');
 
     return (
       <Host
@@ -682,7 +683,32 @@ export class PickerColumn implements ComponentInterface {
         {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
-          aria-hidden="true"
+          /**
+           * This element is hidden from mobile screen readers.
+           * This prevents the element from being incorrectly
+           * focused and announced, which can happen on mobile
+           * devices due to its overflow styles. Hiding it ensures
+           * it is excluded from the accessibility tree and does
+           * not interfere with screen reader navigation.
+           * However, the options are still clickable on web apps.
+           *
+           */
+
+          /**
+           * his element is hidden from mobile screen readers.
+           * This prevents the element from being incorrectly
+           * focused and announced, which can happen on mobile
+           * devices due to its overflow styles. Hiding it ensures
+           * it is excluded from the accessibility tree.
+           *
+           * In web apps, users can click on the options inside
+           * this element, so applying `aria-hidden="true"` can
+           * lead to a blocked `aria-hidden` error.
+           * To prevent this issue, `aria-hidden` is only added
+           * on mobile devices where options cannot be tapped.
+           */
+
+          aria-hidden={mobile ? 'true' : undefined}
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;