Skip to content

Commit

Permalink
Use classes to indicate language and position of screenreader markers
Browse files Browse the repository at this point in the history
  • Loading branch information
@RoyEJohnson
RoyEJohnson committed Mar 20, 2024
1 parent 4f7c077 commit 4296d75
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 96 deletions.
14 changes: 1 addition & 13 deletions src/Highlight.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
1 change: 0 additions & 1 deletion src/Highlighter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ export default class Highlighter {
if (!highlight) {
return;
}
highlight.updateStartMarker(el, 'start');
});
}

Expand Down
130 changes: 52 additions & 78 deletions src/__snapshots__/injectHighlightWrappers.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
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.
</mark>
`;
Expand All @@ -29,11 +28,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -44,11 +42,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
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.
</mark>
`;
Expand All @@ -66,11 +63,10 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -81,23 +77,21 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -108,23 +102,21 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -135,12 +127,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
tabindex="0"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
Expand All @@ -158,11 +149,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
>
Figure
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -173,11 +163,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
Expand All @@ -195,11 +184,10 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
>
Figure
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -210,23 +198,21 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -237,23 +223,21 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -264,23 +248,21 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
<img
alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
data-media-type="image/jpg"
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -291,11 +273,10 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</mark>
`;
Expand All @@ -313,11 +294,10 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa
src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -328,11 +308,10 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = `
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</mark>
`;
Expand All @@ -350,11 +329,10 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 2`] = `
src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6"
/>
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -365,18 +343,16 @@ exports[`inject highlight wrappers for text followed by section in chrome and sa
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
How To
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Expand All @@ -387,17 +363,15 @@ exports[`inject highlight wrappers for text followed by section in firefox 1`] =
data-highlighted="true"
>
<span
class="spanish start"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
Start of highlight
</span>
/>
How To
<span
class="spanish end"
data-for-screenreaders="true"
data-highlight-id="some-highlight"
>
End of highlight
</span>
/>
</mark>
`;
Loading

0 comments on commit 4296d75

Please sign in to comment.