Open guledfarah opened 2 years ago
We had the same issues with mat-dialog but we were able to hack the mat-dialog issue by adding "aria-hidden" attribute on the main content (app-root) of the page when the dialog opens and then removing the attribute upon the dialog closing.
We can not use that trick on the mat-select because it is using "aria-controls", "aria-activedescendant", and "aria-owns" on the trigger and adding "aria-hidden" on the app-root of the page will officially disable all aria support for all controls inside the app-root including our mat-select control leading to more issues.
Is this a regression?
The previous version in which this bug was not present was
No response
Description
When using a screen reader on mobile device such as Voice Over in iOS, 1) on the double tap of the mat-select control, the focus stays on the control instead of focusing on the selected or first element in the panel. Until we manually tab inside the panel. Please see the attached video 1.
2) When the focus is inside the panel, on the first option and we swipe backwards (swipe to left), the focus goes to the last element on the page (last element on the footer of the host page). Please see the attached video 2.
Though I only documented iOS here, the issue also exists on Android (tested with Pixel 2 + Android 11). In Android swiping in either direction, left when on the first option and right when on the last option, will cause the focus to leave the panel and enter the content behind while the panel is still open.
Video 1: https://user-images.githubusercontent.com/13901527/193904148-52b7e842-25e5-44d6-835a-83aeaeecec7b.MOV
Video 2: https://user-images.githubusercontent.com/13901527/193904171-b5c59c89-8e8e-4c63-8bc2-b56db659f993.MOV
Reproduction
Steps to reproduce:
Expected Behavior
1) With Voice Over turned on, On double tab of the mat-select control, after the drop down panel opens, the selected option or the first option must have being focused.
2) With Voice Over turned on and dropdown panel open, while swaping backwards, the focus must not go into the background content. Focus must either stay in the panel or go to the Safari toolbar (refresh button, back button, etc...).
Actual Behavior
1) Focus stays on the mat-select control even though the panel has opened.
2) Focus leaves the panel and enters other page content while the panel is still open.
Environment