Skip to content

Commit 56b8b1d

Browse files
committed
fix(picker): rollback aria-hidden to avoid a11y structure issues
1 parent a1ea905 commit 56b8b1d

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
@@ -716,24 +716,16 @@ export class PickerColumn implements ComponentInterface {
716716
* This causes keyboard navigation to focus to this
717717
* element instead of going to the next element in
718718
* the tab order.
719-
*
720-
* The desired behavior is for the user to be able to
721-
* focus the assistive focusable element and tab to
722-
* the next element in the tab order. Instead of tabbing
723-
* to this element.
724-
*
725-
* To prevent this, we set the tabIndex to -1. This
726-
* will match the behavior of the other browsers.
727719
*/
728-
tabIndex={-1}
720+
tabIndex={0}
729721
>
730-
<div class="picker-item-empty">&nbsp;</div>
731-
<div class="picker-item-empty">&nbsp;</div>
732-
<div class="picker-item-empty">&nbsp;</div>
722+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
723+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
724+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
733725
<slot></slot>
734-
<div class="picker-item-empty">&nbsp;</div>
735-
<div class="picker-item-empty">&nbsp;</div>
736-
<div class="picker-item-empty">&nbsp;</div>
726+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
727+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
728+
<div class="picker-item-empty" aria-hidden="true">&nbsp;</div>
737729
</div>
738730
<slot name="suffix"></slot>
739731
</Host>

core/src/components/picker/picker.tsx

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

0 commit comments

Comments
 (0)