Skip to content
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.

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

INSTUI-4080 fix(ui-selectable): fix Select options not being selectable on iOS Safari with VoiceOver on #1668

Merged
merged 1 commit into from
Sep 12, 2024

Conversation

matyasf
Copy link
Collaborator

@matyasf matyasf commented Sep 3, 2024

aria-owns seems to be misused here. It rearranges the DOM seen by the screenreader, so the subtree owned by the element will be its child. In our case it meant that a popup will the the child of an input component.
Also its very rarely used, see https://www.makethingsaccessible.com/guides/aria-controls-vs-aria-owns/ , there is just one sample use case for it at W3C (a navigation treeview)

To test:

  • Test all examples of Select, SimpleSelect, Selectable with keyboard navigation and VoiceOver. Test on mobile devices with TalkBack/VoiceOver and Windows too if possible

Note: This will need to be ported to InstUI v8 and v9

…fari with VoiceOver on

aria-owns seems to be misused here
@matyasf matyasf self-assigned this Sep 3, 2024
@matyasf matyasf changed the title fix(ui-selectable): fix Select options not being selectable on iOS Safari with VoiceOver on INSTUI-4080 fix(ui-selectable): fix Select options not being selectable on iOS Safari with VoiceOver on Sep 3, 2024
Copy link

github-actions bot commented Sep 3, 2024

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-09-12 07:55 UTC

@matyasf matyasf requested review from ToMESSKa, balzss and HerrTopi and removed request for balzss September 5, 2024 12:34
@ToMESSKa
Copy link
Contributor

ToMESSKa commented Sep 6, 2024

  • on Mac with keyboard navigation and Voiceover: tested, it worked
  • on Android with Talkback: it doesn't work for me, I can select the input field, but it doesn't react to double tap or anything else

@matyasf
Copy link
Collaborator Author

matyasf commented Sep 11, 2024

  • on Mac with keyboard navigation and Voiceover: tested, it worked
  • on Android with Talkback: it doesn't work for me, I can select the input field, but it doesn't react to double tap or anything else

I've verified that this fix does not fix the issue on Android (but it does on iOS)

@matyasf matyasf merged commit aae996f into master Sep 12, 2024
11 checks passed
@matyasf matyasf deleted the fix_mobile_vo_select branch September 12, 2024 07:55
matyasf added a commit that referenced this pull request Sep 18, 2024
…fari with VoiceOver on

aria-owns seems to be misused here. It rearranges the DOM seen by the screenreader, so the subtree
owned by the element will be its child. In our case it meant that a popup will the the child of an
input component. Backport of #1668
TEST PLAN:
Test all examples of Select, SimpleSelect, Selectable with keyboard navigation and VoiceOver. Test
on mobile devices with TalkBack/VoiceOver and Windows too if possible
HerrTopi pushed a commit that referenced this pull request Sep 18, 2024
…fari with VoiceOver on

aria-owns seems to be misused here. It rearranges the DOM seen by the screenreader, so the subtree
owned by the element will be its child. In our case it meant that a popup will the the child of an
input component. Backport of #1668
TEST PLAN:
Test all examples of Select, SimpleSelect, Selectable with keyboard navigation and VoiceOver. Test
on mobile devices with TalkBack/VoiceOver and Windows too if possible
matyasf added a commit that referenced this pull request Sep 19, 2024
…fari with VoiceOver on

aria-owns seems to be misused here. It rearranges the DOM seen by the screenreader, so the subtree
owned by the element will be its child. Backport of
#1668
TEST PLAN:
Test all examples of Select, SimpleSelect, Selectable with keyboard navigation and VoiceOver. Test
on mobile devices with TalkBack/VoiceOver and Windows too if possible
matyasf added a commit that referenced this pull request Sep 23, 2024
…fari with VoiceOver on

aria-owns seems to be misused here. It rearranges the DOM seen by the screenreader, so the subtree
owned by the element will be its child. Backport of
#1668
TEST PLAN:
Test all examples of Select, SimpleSelect, Selectable with keyboard navigation and VoiceOver. Test
on mobile devices with TalkBack/VoiceOver and Windows too if possible
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants