I'm working on a web app that features a number of regions that are dynamically shown and hidden throughout use of the application.
As the application is striving for WCAG Compliance, I have logic in place that causes the first selectable input of any region that is activated receive focus when a region is activated. This allows for a visually impaired user to have their attention applied to the proper region of the application.
This works perfectly fine on Windows, Android, and MacOS. However, when using iOS Safari the picker is automatically activated when a <select> receives focus. This is undesirable behaviour, as every time these regions are activated the picker dialogue is displayed.
Is there a way I can make it so that iOS Safari doesn't display the picker dialogue when an element receives focus?
I ended up working around this by assigning focus to the parent element whenever iOS is in use. This works with my application thanks to how the HTML is structured.
I looked into using <aria-live> but that wasn't suitable for the cases where a modal disables the background. Ideal behaviour has focus being directed to the modal and then the user cannot get out of it until they acknowledge or close it.
The code that I used to resolve this issue is as follows:
if (navigator.userAgent.search(/iPad|iPhone|iPod/g) === -1) {
focus(currentControl);
} else {
currentControl.parentElement.setAttribute("tabindex", "-1");
focus(currentControl.parentElement);
currentControl.parentElement.removeAttribute("tabindex");
}
setAttribute is used in case the parent element is a <div> or other untabbable element.
Not an ideal solution, but it worked for me.