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

Fix note indicator and tabbability #2223

Closed
wants to merge 10 commits into from
Closed

Fix note indicator and tabbability #2223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6759b7f
Use new highlighter branch
RoyEJohnson Apr 17, 2024
ca2f9ba
Style highlight screenreader pseudoelements
RoyEJohnson Apr 17, 2024
9b2fe48
Put screenreaderOnly style in theme
RoyEJohnson Apr 26, 2024
73efc7a
Fix highlighter branch
RoyEJohnson May 30, 2024
fc82369
Current highlight is .focus
RoyEJohnson May 31, 2024
1525149
snaps
RoyEJohnson May 31, 2024
5b0238f
Pad highlight with note to help keep note indicator on the same line
RoyEJohnson May 31, 2024
bb6a37e
Merge branch 'main' into fix-non-tabbable-highlights
staxly[bot] Aug 13, 2024
7c4c03f
Merge branch 'main' into fix-non-tabbable-highlights
staxly[bot] Aug 13, 2024
38e81ee
Merge branch 'main' into fix-non-tabbable-highlights
staxly[bot] Aug 16, 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
Expand Up @@ -9,7 +9,7 @@
"@craco/craco": "<7",
"@formatjs/intl-pluralrules": "^5.2.3",
"@openstax/event-capture-client": "^2.0.2",
"@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.2",
"@openstax/highlighter": "https://github.com/openstax/highlighter#use-mark-dist-branch",
"@openstax/open-search-client": "0.1.0-build.7",
"@openstax/ts-utils": "1.6.0",
"@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",
Expand Down
149 changes: 91 additions & 58 deletions src/app/content/__snapshots__/routes.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,19 +321,21 @@ Array [
border-bottom: 1.2em solid transparent;
}

.c4 .highlight.yellow.first.text.has-note:after {
.c4 .highlight.yellow.first.text.has-note:not(.last)::before {
content: "";
}

.c4 .highlight.yellow.first.text.has-note::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
-webkit-clip-path: initial;
clip-path: initial;
-webkit-clip: initial;
clip: initial;
opacity: 0.8;
border-left: 0.9em solid #fed200;
border-top: 0.9em solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border-bottom: 0.9em solid transparent;
}

.c4 .highlight.green {
Expand Down Expand Up @@ -368,19 +370,21 @@ Array [
border-bottom: 1.2em solid transparent;
}

.c4 .highlight.green.first.text.has-note:after {
.c4 .highlight.green.first.text.has-note:not(.last)::before {
content: "";
}

.c4 .highlight.green.first.text.has-note::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
-webkit-clip-path: initial;
clip-path: initial;
-webkit-clip: initial;
clip: initial;
opacity: 0.8;
border-left: 0.9em solid #92d101;
border-top: 0.9em solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border-bottom: 0.9em solid transparent;
}

.c4 .highlight.blue {
Expand Down Expand Up @@ -415,19 +419,21 @@ Array [
border-bottom: 1.2em solid transparent;
}

.c4 .highlight.blue.first.text.has-note:after {
.c4 .highlight.blue.first.text.has-note:not(.last)::before {
content: "";
}

.c4 .highlight.blue.first.text.has-note::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
-webkit-clip-path: initial;
clip-path: initial;
-webkit-clip: initial;
clip: initial;
opacity: 0.8;
border-left: 0.9em solid #00c3ed;
border-top: 0.9em solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border-bottom: 0.9em solid transparent;
}

.c4 .highlight.purple {
Expand Down Expand Up @@ -462,19 +468,21 @@ Array [
border-bottom: 1.2em solid transparent;
}

.c4 .highlight.purple.first.text.has-note:after {
.c4 .highlight.purple.first.text.has-note:not(.last)::before {
content: "";
}

.c4 .highlight.purple.first.text.has-note::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
-webkit-clip-path: initial;
clip-path: initial;
-webkit-clip: initial;
clip: initial;
opacity: 0.8;
border-left: 0.9em solid #545ec8;
border-top: 0.9em solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border-bottom: 0.9em solid transparent;
}

.c4 .highlight.pink {
Expand Down Expand Up @@ -509,19 +517,21 @@ Array [
border-bottom: 1.2em solid transparent;
}

.c4 .highlight.pink.first.text.has-note:after {
.c4 .highlight.pink.first.text.has-note:not(.last)::before {
content: "";
}

.c4 .highlight.pink.first.text.has-note::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
-webkit-clip-path: initial;
clip-path: initial;
-webkit-clip: initial;
clip: initial;
opacity: 0.8;
border-left: 0.9em solid #de017e;
border-top: 0.9em solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border-bottom: 0.9em solid transparent;
}

.c4 .os-figure,
Expand Down Expand Up @@ -582,83 +592,106 @@ Array [
}

@media screen {
.c4 .highlight.yellow[aria-current] {
.c4 .highlight[data-start-message]::before,
.c4 .highlight[data-end-message]::after {
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
clip: rect(1px,1px,1px,1px);
}

.c4 .highlight.first[data-start-message]::before {
content: attr(data-start-message);
}

.c4 .highlight.last[data-end-message]::after {
content: attr(data-end-message);
}
}

@media screen {
.c4 .highlight.yellow.focus {
background-color: #fed200;
border-bottom: 0.2rem solid #8f7700;
padding: 0.2rem 0 0;
}

.c4 .highlight.yellow[aria-current].block:after {
.c4 .highlight.yellow.focus.block:after {
background-color: #fed200;
}

.c4 .highlight.yellow[aria-current].first.text.has-note:after {
.c4 .highlight.yellow.focus.first.text.has-note:after {
display: none;
}
}

@media screen {
.c4 .highlight.green[aria-current] {
.c4 .highlight.green.focus {
background-color: #92d101;
border-bottom: 0.2rem solid #4e6f01;
padding: 0.2rem 0 0;
}

.c4 .highlight.green[aria-current].block:after {
.c4 .highlight.green.focus.block:after {
background-color: #92d101;
}

.c4 .highlight.green[aria-current].first.text.has-note:after {
.c4 .highlight.green.focus.first.text.has-note:after {
display: none;
}
}

@media screen {
.c4 .highlight.blue[aria-current] {
.c4 .highlight.blue.focus {
background-color: #00c3ed;
border-bottom: 0.2rem solid #006880;
padding: 0.2rem 0 0;
}

.c4 .highlight.blue[aria-current].block:after {
.c4 .highlight.blue.focus.block:after {
background-color: #00c3ed;
}

.c4 .highlight.blue[aria-current].first.text.has-note:after {
.c4 .highlight.blue.focus.first.text.has-note:after {
display: none;
}
}

@media screen {
.c4 .highlight.purple[aria-current] {
.c4 .highlight.purple.focus {
background-color: #545ec8;
border-bottom: 0.2rem solid #141a3e;
padding: 0.2rem 0 0;
color: #fff;
}

.c4 .highlight.purple[aria-current].block:after {
.c4 .highlight.purple.focus.block:after {
background-color: #545ec8;
}

.c4 .highlight.purple[aria-current].first.text.has-note:after {
.c4 .highlight.purple.focus.first.text.has-note:after {
display: none;
}
}

@media screen {
.c4 .highlight.pink[aria-current] {
.c4 .highlight.pink.focus {
background-color: #de017e;
border-bottom: 0.2rem solid #560131;
padding: 0.2rem 0 0;
color: #fff;
}

.c4 .highlight.pink[aria-current].block:after {
.c4 .highlight.pink.focus.block:after {
background-color: #de017e;
}

.c4 .highlight.pink[aria-current].first.text.has-note:after {
.c4 .highlight.pink.focus.first.text.has-note:after {
display: none;
}
}
Expand All @@ -673,13 +706,13 @@ Array [
background-color: #ffea00;
}

.c4 .search-highlight[aria-current],
.c4 .search-highlight[aria-current] .math {
.c4 .search-highlight.focus,
.c4 .search-highlight.focus .math {
background-color: #ff9e4b;
padding: 0.2rem 0;
}

.c4 .search-highlight[aria-current] .search-highlight {
.c4 .search-highlight.focus .search-highlight {
background-color: unset;
}
}
Expand Down
49 changes: 35 additions & 14 deletions src/app/content/components/Page/PageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Color from 'color';
import styled, { css } from 'styled-components/macro';
import MainContent from '../../../components/MainContent';
import { MAIN_CONTENT_ID } from '../../../context/constants';
import theme from '../../../theme';
import theme, { screenreaderOnly } from '../../../theme';
import { highlightStyles } from '../../constants';
import {
highlightBlockPadding,
Expand Down Expand Up @@ -54,6 +54,21 @@ export default styled(MainContent)`
.highlight {
position: relative;
z-index: 1;

@media screen {
&[data-start-message]::before,
&[data-end-message]::after {
${screenreaderOnly}
}

&.first[data-start-message]::before {
content: attr(data-start-message);
}

&.last[data-end-message]::after {
content: attr(data-end-message);
}
}
}

/* stylelint-disable selector-class-pattern */
Expand Down Expand Up @@ -95,21 +110,27 @@ export default styled(MainContent)`
}
}

&.first.text.has-note:after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
opacity: 0.8;
border-left: ${highlightIndicatorSize}em solid ${style.focused};
border-top: ${highlightIndicatorSize}em solid transparent;
transform: rotate(90deg);
&.first.text.has-note {
&:not(.last)::before {
content: "";
}

padding-left: 0.5rem;

::before {
position: absolute;
top: 0;
left: 0;
clip-path: initial;
clip: initial;
opacity: 0.8;
border-left: ${highlightIndicatorSize}em solid ${style.focused};
border-bottom: ${highlightIndicatorSize}em solid transparent;
}
}

@media screen {
&[aria-current] {
&.focus {
background-color: ${style.focused};
border-bottom: 0.2rem solid ${style.focusBorder};
padding: 0.2rem 0 0;
Expand Down Expand Up @@ -138,7 +159,7 @@ export default styled(MainContent)`
background-color: #ffea00;
}

&[aria-current] {
&.focus {
${SELF_AND_CHILD_MATH_SELECTOR} {
background-color: #ff9e4b;
padding: 0.2rem 0;
Expand Down
Loading
Loading