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 ad9406c commit 5a33dee
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 95 deletions.
12 changes: 0 additions & 12 deletions src/Highlight.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,21 +91,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 @@ -114,7 +114,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,12 +7,11 @@ 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"
tabindex="0"
>
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 @@ -30,11 +29,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 @@ -45,12 +43,11 @@ 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"
tabindex="0"
>
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 @@ -68,11 +65,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 @@ -83,24 +79,22 @@ 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"
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 @@ -111,24 +105,22 @@ 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"
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 @@ -139,12 +131,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 @@ -162,11 +153,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 @@ -177,12 +167,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 @@ -200,11 +189,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 @@ -215,24 +203,22 @@ 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"
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 @@ -243,24 +229,22 @@ 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"
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 @@ -271,24 +255,22 @@ 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"
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 @@ -299,12 +281,11 @@ 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"
tabindex="0"
>
Start of highlight
</span>
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</mark>
`;
Expand All @@ -322,11 +303,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 @@ -337,12 +317,11 @@ 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"
tabindex="0"
>
Start of highlight
</span>
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</mark>
`;
Expand All @@ -360,11 +339,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 @@ -375,19 +353,17 @@ 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"
tabindex="0"
>
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 @@ -398,18 +374,16 @@ 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"
tabindex="0"
>
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 5a33dee

Please sign in to comment.