Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Fix details polyfill for JAWS and NVDA in IE #440
What problem does the pull request solve?
As reported in #130, the details/summary cannot be opened when using JAWS or NVDA in Internet Explorer.
Some screen readers map the screen reader key + space (or enter) to the click event. As you can see in Event Handlers and Screen Readers, the click event is usually the only event fired for IE and JAWS/NVDA combinations.
Our polyfill is currently listening for the keyup, keypress and mouseup events. It used to listen to the click instead of the mouseup event, but that was changed because it made it trigger twice in Chrome.
I've now changed it to use click and keydown. As far as I know, it does not trigger twice anymore.
How has this been tested?
I have not tested within Elements but have isolated all the important bits into a JSbin. (I have added some debugging under that, not in a
I have tested in various browsers and screen reader combinations, mainly IE and Firefox with JAWS and NVDA, both and Chrome on its own. I found that it's more likely to be troublesome if the browser doesn't support
What type of change is it?
Bug fix (non-breaking change which fixes an issue)
I can see that @gemmaleigh has now deployed this to Heroku. (Thanks! Or does that happen automatically?)
There's only one thing I have noticed.
In Chrome, the current behaviour is that you can press either space, or enter to toggle the hidden content.
With this solution, only using the spacebar works.
Clicking or pressing the Enter or Space keys on the summary element should toggle the visibility of the details element's content.
So I think we'd want to preserve that existing behaviour.
I have pushed a new version.
Fixing the enter key was easy but that created a new bug and fixing that led to even more bugs... So, all in all it turned out to be more complex than I initially though. Big thanks to @tvararu, @joelanman and @splitbrain who helped me solve most issues.
I re-tested the automatically deployed version in Firefox and IE 11 in Windows 10 with and without JAWS and NVDA, macOS Firefox, Chrome, Safari (all latest), Edge and Chrome in Win 10, Firefox 45 (a version which doesn't support details), IE 9, IE 8, IE 7, Safari 5.1 and some more.
I haven't tried to debug those two new issues yet. I will do that tomorrow.
I have fixed IE 8 and under, and Safari 5.1 now works with enter but not with space. I'm happy with that.
Apr 7, 2017
I cannot reproduce that. I just tested in the same version (52.0.2) on a Mac as well as Windows 10 and it worked fine.