Skip to content

Commit 77f60f2

Browse files
committed
fix(picker): rollback aria-hidden to avoid a11y structure issues
1 parent 5ea744f commit 77f60f2

File tree

2 files changed

+8
-15
lines changed

2 files changed

+8
-15
lines changed

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -715,24 +715,16 @@ export class PickerColumn implements ComponentInterface {
715715
* This causes keyboard navigation to focus to this
716716
* element instead of going to the next element in
717717
* the tab order.
718-
*
719-
* The desired behavior is for the user to be able to
720-
* focus the assistive focusable element and tab to
721-
* the next element in the tab order. Instead of tabbing
722-
* to this element.
723-
*
724-
* To prevent this, we set the tabIndex to -1. This
725-
* will match the behavior of the other browsers.
726718
*/
727-
tabIndex={-1}
719+
tabIndex={0}
728720
>
729-
<div class="picker-item-empty">&nbsp;</div>
730-
<div class="picker-item-empty">&nbsp;</div>
731-
<div class="picker-item-empty">&nbsp;</div>
721+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
722+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
723+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
732724
<slot></slot>
733-
<div class="picker-item-empty">&nbsp;</div>
734-
<div class="picker-item-empty">&nbsp;</div>
735-
<div class="picker-item-empty">&nbsp;</div>
725+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
726+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
727+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
736728
</div>
737729
<slot name="suffix"></slot>
738730
</Host>

core/src/components/picker/picker.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,7 @@ export class Picker implements ComponentInterface {
537537
return (
538538
<Host onPointerDown={(ev: PointerEvent) => this.onPointerDown(ev)} onClick={() => this.onClick()}>
539539
<input
540+
aria-hidden="true"
540541
tabindex={-1}
541542
inputmode="numeric"
542543
type="number"

0 commit comments

Comments
 (0)