fixes tabs keyboard navigation bug in IE8 #1359
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
NickColley
reviewed
May 17, 2019
NickColley
reviewed
May 17, 2019
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
NickColley
reviewed
May 17, 2019
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
In IE8, the browser could not find the next/previous tab because it does not support `nextElementSibling` and `previousElementSibling` DOM traversal methods. To fix it I applied a polyfill for it. Once the browser could find the tab we then had to find the `firstChildElement` (i.e the anchor element) to add/edit the various data attributes to show/hide the tab panel. Again IE8 doesn't support it and instead of introducing another polyfill I used `querySelector instead to look up the "a". I assumed the first element would always be anchor for navigation purposes and also the nunjucks template uses an anchor with the class name that I'm looking up.
I've added two new files polyfill files although they didn't come directly from polyfill.io they were based off a PR that was merged in the library but not included in the new polyfill-library repo. I've added comments pointing to the original pull request for the detection and for the polyfill.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In IE8, the browser could not find the next/previous tab because it does
not support
nextElementSiblingandpreviousElementSiblingDOM traversalmethods. To fix it I applied a polyfill for it.
Once the browser could find the tab we then had to find the
firstChildElement(i.e the anchor element) to add/edit the various data attributes to show/hide
the tab panel. Again IE8 doesn't support it and instead of introducing another
polyfill I used `querySelector instead to look up the "a". I assumed the
first element would always be anchor for navigation purposes and also the
nunjucks template uses an anchor with the class name that I'm looking up.
Before:
After
fixes: #1327
👉 https://govuk-frontend-review-pr-1359.herokuapp.com/components/tabs
👉 https://govuk-frontend-review-pr-1359.herokuapp.com/components/tabs/preview