Skip to content
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.

Sign up for GitHub

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

Fix details element in firefox nvda #773

Merged
merged 3 commits into from
Sep 20, 2021
Merged

Fix details element in firefox nvda #773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b96defb
Only polyfill details component if native does not exist
andymantell Sep 16, 2021
4da6af0
Fix linting issue
andymantell Sep 16, 2021
0d7e4b0
Add changelog entry for b96defbac870f7de758923038454e14503462d30
andymantell Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Transactional header defaults to wrapping underneath the logo without the need for a modifier ([Issue 720](https://github.com/nhsuk/nhsuk-frontend/issues/720)).
- Add width, height, stroke and fill attributes to inline SVGs in order that they render at appropriate sizes when viewed with disabled/broken/missing CSS ([PR 761](https://github.com/nhsuk/nhsuk-frontend/pull/761)).
- Search input focus state style (desktop) – fix border width ([Issue 768](https://github.com/nhsuk/nhsuk-frontend/issues/768), [PR 771](https://github.com/nhsuk/nhsuk-frontend/pull/771)).
- Stop polyfilling details elements in browsers that support it natively since the polyfill was causing issues with JAWS/Firefox ([Issue 754](https://github.com/nhsuk/nhsuk-frontend/issues/754), [PR 773](https://github.com/nhsuk/nhsuk-frontend/pull/773))

## 5.1.0 - 14 May 2021

Expand Down
19 changes: 10 additions & 9 deletions packages/components/details/details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import { toggleAttribute } from '../../common';
export default () => {
// Does the browser support details component
const nativeSupport = typeof document.createElement('details').open === 'boolean';
if (nativeSupport) {
return;
}

// Nodelist of all details elements
const allDetails = document.querySelectorAll('details');

Expand Down Expand Up @@ -41,21 +45,18 @@ export default () => {
} else {
summary.setAttribute('aria-expanded', 'false');
content.setAttribute('aria-hidden', 'true');
// Hide content on browsers without native details support
if (!nativeSupport) content.style.display = 'none';
content.style.display = 'none';
}

const toggleDetails = () => {
toggleAttribute(summary, 'aria-expanded');
toggleAttribute(content, 'aria-hidden');

if (!nativeSupport) {
content.style.display = content.getAttribute('aria-hidden') === 'true' ? 'none' : '';
if (element.hasAttribute('open')) {
element.removeAttribute('open');
} else {
element.setAttribute('open', 'open');
}
content.style.display = content.getAttribute('aria-hidden') === 'true' ? 'none' : '';
if (element.hasAttribute('open')) {
element.removeAttribute('open');
} else {
element.setAttribute('open', 'open');
}
};

Expand Down