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

fix(ui): cleanup IE edge case in getAriaElementsInRightDomOrder

Browse source
This commit is contained in:
Thijs Louisse 2023-05-09 15:58:00 +02:00
parent 6264fe71f7
commit c6663068a7
1 changed files with 7 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/ui/components/form-core/src/utils/getAriaElementsInRightDomOrder.js
View file

@ -1,6 +1,4 @@
/* eslint-disable no-bitwise */ /* eslint-disable no-bitwise */
import { browserDetection } from '@lion/ui/core.js';
const moveDownConditions = [ const moveDownConditions = [
Node.DOCUMENT_POSITION_PRECEDING, Node.DOCUMENT_POSITION_PRECEDING,
Node.DOCUMENT_POSITION_CONTAINS, Node.DOCUMENT_POSITION_CONTAINS,
@ -8,30 +6,25 @@ const moveDownConditions = [
]; ];
/** /**
* @desc Let the order of adding ids to aria element by DOM order, so that the screen reader * 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:
* https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters * https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters
* @param {HTMLElement[]} descriptionElements - holds references to description or label elements whose * @param {Element[]} descriptionElements - holds references to description or label elements whose
* id should be returned * id should be returned
* @param {Object} opts * @param {Object} opts
* @param {boolean} [opts.reverse] * @param {boolean} [opts.reverse]
* @returns {HTMLElement[]} sorted set of elements based on dom order * @returns {Element[]} sorted set of elements based on dom order
*/ */
export function getAriaElementsInRightDomOrder(descriptionElements, { reverse } = {}) { export function getAriaElementsInRightDomOrder(descriptionElements, { reverse } = {}) {
/** /**
* @param {HTMLElement} a * @param {Node} a
* @param {HTMLElement} b * @param {Node} b
* @return {-1|1} * @returns {-1|1}
*/ */
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);
return moveDownConditions.includes(pos) ? 1 : -1;
// Unfortunately, for IE, we have to switch the order (?)
if (moveDownConditions.includes(pos)) {
return browserDetection.isIE11 ? -1 : 1;
}
return browserDetection.isIE11 ? 1 : -1;
}; };
const descriptionEls = descriptionElements.filter(el => el); // filter out null references const descriptionEls = descriptionElements.filter(el => el); // filter out null references