Skip to content

fix(picker-column): prevent focus issues on descendants of aria-hidde… #30061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

fix(picker-column): prevent focus issues on descendants of aria-hidde… #30061

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
53bc4c9
fix(picker-column): prevent focus issues on descendants of aria-hidde…
thetaPC Dec 4, 2024
d660163
refactor(picker-column): add presentation role
thetaPC Dec 4, 2024
3583fcd
refactor(picker-column): add ariahidden
thetaPC Dec 5, 2024
3c62f98
fix(picker-column): add ariaHidden based on platform
thetaPC Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions core/src/components/picker-column/picker-column.tsx
View file
Open in desktop
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 Expand Up @@ -716,7 +742,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>
Expand Down
Loading