Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use mark instead of span #75

Closed
wants to merge 16 commits into from
Closed

Use mark instead of span #75

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7af5df5
Replace span with mark
RoyEJohnson Nov 20, 2023
a8f9bb6
Add aria-current to focused highlights
RoyEJohnson Feb 9, 2024
bd9a4be
Add tabbable option to Highlight object
RoyEJohnson Jan 29, 2024
f051cbb
Include test with tabbable=true
RoyEJohnson Feb 5, 2024
6537821
Use and update start-selected marker
RoyEJohnson Feb 15, 2024
b060ae8
Update spec to use mark
RoyEJohnson Mar 20, 2024
4f7c077
Use text content instead of aria-label for begin/end spans
RoyEJohnson Feb 27, 2024
4296d75
Use classes to indicate language and position of screenreader markers
RoyEJohnson Mar 20, 2024
4f61498
Use data-startMessage as start marker
RoyEJohnson Mar 22, 2024
16cb18f
Put tabIndex back in for tabbable entries
RoyEJohnson Apr 15, 2024
7869c30
Fix highlight.focus
RoyEJohnson Apr 15, 2024
a3f650d
remove screenreader nodes
RoyEJohnson Apr 16, 2024
fcb95c9
Adjust tests
RoyEJohnson Apr 16, 2024
6384d5f
only first highlight is tabbable
RoyEJohnson Apr 17, 2024
3f9d7a0
Remove aria-current; use start-message to find currently selected
RoyEJohnson May 17, 2024
676f94e
use .focus again
RoyEJohnson May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@openstax/highlighter",
"version": "1.13.0",
"version": "1.14.0",
"main": "dist/index.js",
"license": "MIT",
"files": [
Expand Down
76 changes: 38 additions & 38 deletions src/__snapshots__/injectHighlightWrappers.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in chrome and safari 1`] = `
<span
<mark
class="highlight first text yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -13,11 +13,11 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
tabindex="0"
/>
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.
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in chrome and safari 2`] = `
<span
<mark
class="highlight block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -33,11 +33,11 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in firefox 1`] = `
<span
<mark
class="highlight first text yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -49,11 +49,11 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
tabindex="0"
/>
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.
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in firefox 2`] = `
<span
<mark
class="highlight block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -69,11 +69,11 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting and ending on an <img> in chrome and safari 1`] = `
<span
<mark
class="highlight first block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -95,11 +95,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting and ending on an <img> in firefox 1`] = `
<span
<mark
class="highlight first block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -121,11 +121,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in chrome and safari 1`] = `
<span
<mark
class="highlight first block yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -142,11 +142,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in chrome and safari 2`] = `
<span
<mark
class="highlight text last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -157,11 +157,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in firefox 1`] = `
<span
<mark
class="highlight first block yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -178,11 +178,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
id="test-img"
src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in firefox 2`] = `
<span
<mark
class="highlight text last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -193,11 +193,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in chrome 1`] = `
<span
<mark
class="highlight first block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -219,11 +219,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in firefox 1`] = `
<span
<mark
class="highlight first block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -245,11 +245,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in safari 1`] = `
<span
<mark
class="highlight first block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -271,11 +271,11 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for img between paragraphs in chrome and safari 1`] = `
<span
<mark
class="highlight first text yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -287,11 +287,11 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa
tabindex="0"
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</span>
</mark>
`;

exports[`inject highlight wrappers for img between paragraphs in chrome and safari 2`] = `
<span
<mark
class="highlight block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -307,11 +307,11 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = `
<span
<mark
class="highlight first text yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -323,11 +323,11 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = `
tabindex="0"
/>
the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
</span>
</mark>
`;

exports[`inject highlight wrappers for img between paragraphs in firefox 2`] = `
<span
<mark
class="highlight block last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -343,11 +343,11 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 2`] = `
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for text followed by section in chrome and safari 1`] = `
<span
<mark
class="highlight first text last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -364,11 +364,11 @@ exports[`inject highlight wrappers for text followed by section in chrome and sa
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;

exports[`inject highlight wrappers for text followed by section in firefox 1`] = `
<span
<mark
class="highlight first text last yellow"
data-highlight-id="some-highlight"
data-highlighted="true"
Expand All @@ -385,5 +385,5 @@ exports[`inject highlight wrappers for text followed by section in firefox 1`] =
data-for-screenreaders="true"
data-highlight-id="some-highlight"
/>
</span>
</mark>
`;
10 changes: 5 additions & 5 deletions src/injectHighlightWrappers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,15 +394,15 @@ function mergeSiblingHighlights(highlights: Node[]) {
* Creates wrapper for highlights.
*/
function createWrapper(options: any) {
const span = document.createElement('span');
span.className = options.className;
const el = document.createElement('mark');
el.className = options.className;
if (options.timestamp) {
span.setAttribute(TIMESTAMP_ATTR, options.timestamp);
el.setAttribute(TIMESTAMP_ATTR, options.timestamp);
}
if (options.id) {
span.setAttribute(DATA_ID_ATTR, options.id);
el.setAttribute(DATA_ID_ATTR, options.id);
}
return span;
return el;
}

function isHighlight(el: any): el is HTMLElement {
Expand Down
Loading