diff --git a/packages/field/src/utils/getAriaElementsInRightDomOrder.js b/packages/field/src/utils/getAriaElementsInRightDomOrder.js index 7bc3a17da..549f4ba04 100644 --- a/packages/field/src/utils/getAriaElementsInRightDomOrder.js +++ b/packages/field/src/utils/getAriaElementsInRightDomOrder.js @@ -1,3 +1,5 @@ +const isIE11 = /Trident/.test(window.navigator.userAgent); + /** * @desc Let the order of adding ids to aria element by DOM order, so that the screen reader * respects visual order when reading: @@ -5,16 +7,16 @@ * @param {array} descriptionElements - holds references to description or label elements whose * id should be returned * @returns {array} sorted set of elements based on dom order - * */ 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) { - return 1; + return isIE11 ? -1 : 1; } - return -1; + return isIE11 ? 1 : -1; }; const descriptionEls = descriptionElements.filter(el => el); // filter out null references