ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(core): order aria elements accordion to dom order

Browse source
This commit is contained in:
Thomas Allmer 2020-10-09 15:20:29 +02:00 committed by Thomas Allmer
parent acd9264091
commit e92b98a4b9
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/ten-beers-end.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/core': patch
---
Ordering aria elements according to dom structure in all browsers

10
packages/form-core/src/utils/getAriaElementsInRightDomOrder.js
View file

@ -1,5 +1,12 @@
/* eslint-disable no-bitwise */
import { browserDetection } from '@lion/core';
const moveDownConditions = [
Node.DOCUMENT_POSITION_PRECEDING,
Node.DOCUMENT_POSITION_CONTAINS,
Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING,
];
/**
* @desc Let the order of adding ids to aria element by DOM order, so that the screen reader
* respects visual order when reading:
@ -19,8 +26,9 @@ export function getAriaElementsInRightDomOrder(descriptionElements, { reverse }
const putPrecedingSiblingsAndLocalParentsFirst = (a, b) => {
// https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
const pos = a.compareDocumentPosition(b);
// Unfortunately, for IE, we have to switch the order (?)
if (pos === Node.DOCUMENT_POSITION_PRECEDING || pos === Node.DOCUMENT_POSITION_CONTAINED_BY) {
if (moveDownConditions.includes(pos)) {
return browserDetection.isIE11 ? -1 : 1;
}
return browserDetection.isIE11 ? 1 : -1;

7
packages/form-core/test/utils/getAriaElementsInRightDomOrder.test.js
View file

@ -12,6 +12,7 @@ describe('getAriaElementsInRightDomOrder', () => {
<div id="b">
<div></div>
<div id="b-child"></div>
<div id="b-child2"></div>
</div>
<div></div>
<div id="c"></div>
@ -19,10 +20,10 @@ describe('getAriaElementsInRightDomOrder', () => {
</div>
`);
// eslint-disable-next-line no-unused-vars
const [a, _1, b, _2, bChild, _3, c, _4] = Array.from(el.querySelectorAll('div'));
const unorderedNodes = [bChild, c, a, b];
const [a, _1, b, _2, bChild, child2, _3, c, _4] = Array.from(el.querySelectorAll('div'));
const unorderedNodes = [bChild, c, a, b, child2];
const result = getAriaElementsInRightDomOrder(unorderedNodes);
expect(result).to.eql([a, b, bChild, c]);
expect(result).to.eql([a, b, bChild, child2, c]);
});
it('can order reversely', async () => {