-
Notifications
You must be signed in to change notification settings - Fork 12.2k
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
In IE11 double focus bug (accessibility related) #13155
Conversation
…g SVG elements it will have two tab stops. Fix is to add focusable="false" to the SVG element. This works around an IE11 bug that defaults SVG elements to focusable="true". The double focus can also cause some screen readers to double-read.
@gtibrett thanks! |
is this also affecting Edge < 14.14393 ? |
We tested in Edge 17.17134. The IE bug is not present there. The linked Microsoft defect states that it is fixed in 14.14393
|
Ok, we'll have to be careful with this one. It's a simple code change but could have ripple effects. I'll get this one on the board. Thanks @gtibrett ! |
Any updates on this? It's still an issue currently that affects our users. I would open a new PR since there are conflicts here, but given that this repo is used only for reference/publishing there doesn't seem to be much value to that since the fix is simple to implement. |
Also, just a detail since we might have the tendency to dismiss IE issues, most JAWS users are likely still using IE. References: |
Alright folks, sorry for taking so long. We are catching up on older issues as we can. So I hesitate to add Right now you can add an icon and specify this yourself using the extra attribute pass through. Like this:
Would this work? If this is a valid workaround I'd be happy to add to our accessibility docs. |
The issue is that without adding The issue is widespread and affects all svgs, so I would expect it to be auto injected as part of the advertised auto-accessibility feature of FA. I added it inside the autoA11y blocks as that seemed to be the best solution. |
I agree with @gtibrett that we would prefer to have this functionality baked in, either as a configurable option or the default autoA11y behavior since it's going to require a lot of markup adjustments on our end. However, to answer your question @robmadole, adding focusable="false" to the |
I'd like to add my support for adding this feature. The accessibility docs say:
Since JAWS/IE is the most popular screen reader/browser combination, it seems that this attribute fits the qualification for the auto-accessibility feature. It would definitely make the icons more accessible to a large part of the audience. This is an easy thing to miss and a hard thing to figure out. If the accessibility feature is aimed at making the difficult task of accessibility easier, this seems like a perfect candidate to add by default. |
FWIW adding |
@stevefaulkner beat me to it :) Another thing to consider, per the previously linked accessibility docs <i class="fas fa-camera-retro" aria-hidden></i> snippets like that should |
@scottaohara thanks for reporting this. Could you please open a new issue? |
@gtibrett @bliles @jimjenkins5 @stevefaulkner ok, you all have convinced me. My only concern with making it the default is the potential to create a problem for someone else. You all are telling me there are no downsides so I'll take that bet with ya. Let's . This should be implemented as part of 5.7.0. |
In IE11 if you tab through links (or any focusable element) containing SVG elements it will have two tab stops.
Fix is to add focusable="false" to the SVG element.
This works around an IE11 bug that defaults SVG elements to focusable="true".
The double focus can also cause some screen readers to double-read.
Example Page: https://labs.levelaccess.com/index.php/Remove_SVG_from_Tab_Order
Also See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8090208/
I understand that:
I understand that it will not be merged and I will not be listed as a contributor on this project.