Skip to content

Commit

Permalink
fix(picker-column): add ariaHidden based on platform
Browse files Browse the repository at this point in the history
  • Loading branch information
thetaPC committed Dec 5, 2024
1 parent 3583fcd commit 3c62f98
Showing 1 changed file with 27 additions and 1 deletion.
28 changes: 27 additions & 1 deletion core/src/components/picker-column/picker-column.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand Down

0 comments on commit 3c62f98

Please sign in to comment.