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'; 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 * @desc Let the order of adding ids to aria element by DOM order, so that the screen reader
* respects visual order when reading: * respects visual order when reading:
@ -19,8 +26,9 @@ export function getAriaElementsInRightDomOrder(descriptionElements, { reverse }
const putPrecedingSiblingsAndLocalParentsFirst = (a, b) => { const putPrecedingSiblingsAndLocalParentsFirst = (a, b) => {
// https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
const pos = a.compareDocumentPosition(b); const pos = a.compareDocumentPosition(b);
// Unfortunately, for IE, we have to switch the order (?) // 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;
} }
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 id="b">
<div></div> <div></div>
<div id="b-child"></div> <div id="b-child"></div>
<div id="b-child2"></div>
</div> </div>
<div></div> <div></div>
<div id="c"></div> <div id="c"></div>
@ -19,10 +20,10 @@ describe('getAriaElementsInRightDomOrder', () => {
</div> </div>
`); `);
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [a, _1, b, _2, bChild, _3, c, _4] = Array.from(el.querySelectorAll('div')); const [a, _1, b, _2, bChild, child2, _3, c, _4] = Array.from(el.querySelectorAll('div'));
const unorderedNodes = [bChild, c, a, b]; const unorderedNodes = [bChild, c, a, b, child2];
const result = getAriaElementsInRightDomOrder(unorderedNodes); 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 () => { it('can order reversely', async () => {