From 4296d75404c92bf038509a74ea743d488e09aebf Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Wed, 20 Mar 2024 12:36:08 -0500 Subject: [PATCH] Use classes to indicate language and position of screenreader markers --- src/Highlight.ts | 14 +- src/Highlighter.ts | 1 - .../injectHighlightWrappers.spec.ts.snap | 130 +++++++----------- src/injectHighlightWrappers.spec.ts | 3 +- src/injectHighlightWrappers.ts | 7 +- 5 files changed, 59 insertions(+), 96 deletions(-) diff --git a/src/Highlight.ts b/src/Highlight.ts index 8af4aea..fc96f9e 100644 --- a/src/Highlight.ts +++ b/src/Highlight.ts @@ -1,6 +1,6 @@ import * as uuid from 'uuid/v4'; import dom from './dom'; -import { DATA_SCREEN_READERS_ATTR, DATA_SCREEN_READERS_ATTR_SELECTOR } from './injectHighlightWrappers'; +import { DATA_SCREEN_READERS_ATTR_SELECTOR } from './injectHighlightWrappers'; import SerializedHighlight from './SerializedHighlight'; export interface IHighlightData { @@ -92,21 +92,9 @@ export default class Highlight { return this; } - public updateStartMarker(el: Element, position: string) { - const marker = el.querySelector(`[${DATA_SCREEN_READERS_ATTR}][tabindex]`); - - if (!marker) { - return; - } - marker.textContent = this.getMessage(`i18n:highlighter:highlight:${position}`); - } - /** - * Add class 'focus' to all elements of this highlight. - */ public addFocusedStyles(): Highlight { this.elements.forEach((el: HTMLElement) => { el.setAttribute('aria-current', 'true'); - this.updateStartMarker(el, 'start-selected'); }); return this; } diff --git a/src/Highlighter.ts b/src/Highlighter.ts index 5ba0157..62d65b0 100644 --- a/src/Highlighter.ts +++ b/src/Highlighter.ts @@ -116,7 +116,6 @@ export default class Highlighter { if (!highlight) { return; } - highlight.updateStartMarker(el, 'start'); }); } diff --git a/src/__snapshots__/injectHighlightWrappers.spec.ts.snap b/src/__snapshots__/injectHighlightWrappers.spec.ts.snap index 436535d..ec2cdf9 100644 --- a/src/__snapshots__/injectHighlightWrappers.spec.ts.snap +++ b/src/__snapshots__/injectHighlightWrappers.spec.ts.snap @@ -7,11 +7,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending data-highlighted="true" > - Start of highlight - + /> hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building. `; @@ -29,11 +28,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b" /> - End of highlight - + /> `; @@ -44,11 +42,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending data-highlighted="true" > - Start of highlight - + /> hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building. `; @@ -66,11 +63,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b" /> - End of highlight - + /> `; @@ -81,11 +77,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c - End of highlight - + /> `; @@ -108,11 +102,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c - End of highlight - + /> `; @@ -135,12 +127,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c Figure - End of highlight - + /> `; @@ -173,11 +163,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c Figure - End of highlight - + /> `; @@ -210,11 +198,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c - End of highlight - + /> `; @@ -237,11 +223,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c - End of highlight - + /> `; @@ -264,11 +248,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin data-highlighted="true" > - Start of highlight - + /> A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c - End of highlight - + /> `; @@ -291,11 +273,10 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa data-highlighted="true" > - Start of highlight - + /> the first terms, the outer terms, the inner terms, and then the last terms of each binomial. `; @@ -313,11 +294,10 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6" /> - End of highlight - + /> `; @@ -328,11 +308,10 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = ` data-highlighted="true" > - Start of highlight - + /> the first terms, the outer terms, the inner terms, and then the last terms of each binomial. `; @@ -350,11 +329,10 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 2`] = ` src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6" /> - End of highlight - + /> `; @@ -365,18 +343,16 @@ exports[`inject highlight wrappers for text followed by section in chrome and sa data-highlighted="true" > - Start of highlight - + /> How To - End of highlight - + /> `; @@ -387,17 +363,15 @@ exports[`inject highlight wrappers for text followed by section in firefox 1`] = data-highlighted="true" > - Start of highlight - + /> How To - End of highlight - + /> `; diff --git a/src/injectHighlightWrappers.spec.ts b/src/injectHighlightWrappers.spec.ts index 63dfa26..c659375 100644 --- a/src/injectHighlightWrappers.spec.ts +++ b/src/injectHighlightWrappers.spec.ts @@ -4,8 +4,7 @@ import { DATA_ATTR } from './injectHighlightWrappers'; import { adjacentTextSections, imageBetweenParagraphs, paragraphFigureAndCaption } from './injectHighlightWrappers.spec.data'; const messages: { [key: string]: string } = { - 'i18n:highlighter:highlight:end': 'End of highlight', - 'i18n:highlighter:highlight:start': 'Start of highlight', + 'i18n:highlighter:language': 'spanish', }; describe('inject highlight wrappers for figure with caption', () => { diff --git a/src/injectHighlightWrappers.ts b/src/injectHighlightWrappers.ts index 8dfcb99..ec7459f 100644 --- a/src/injectHighlightWrappers.ts +++ b/src/injectHighlightWrappers.ts @@ -71,9 +71,12 @@ function createAndInsertNodeForScreenReaders(highlight: Highlight, element: HTML node.setAttribute(DATA_SCREEN_READERS_ATTR, 'true'); node.setAttribute(DATA_ID_ATTR, highlight.id); - const message = highlight.getMessage(`i18n:highlighter:highlight:${position}`); + const language = highlight.getMessage(`i18n:highlighter:language`); - node.textContent = message; + if (language) { + node.classList.add(language); + } + node.classList.add(position); if (position === 'start') { if (highlight.options.tabbable) {