Skip to content

Commit

Permalink
Style highlight screenreader pseudoelements
Browse files Browse the repository at this point in the history
  • Loading branch information
@RoyEJohnson
RoyEJohnson committed Apr 17, 2024
1 parent 34b80f8 commit 538fd09
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 245 deletions.
129 changes: 59 additions & 70 deletions src/app/content/__snapshots__/routes.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,19 +320,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 @@ -367,19 +369,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 @@ -414,19 +418,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 @@ -461,19 +467,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 @@ -508,19 +516,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 @@ -581,24 +591,24 @@ Array [
}
@media screen {
.c4 .highlight::before,
.c4 .highlight::after {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
clip: rect(1px,1px,1px,1px);
.c4 .highlight[data-start-message]::before,
.c4 .highlight[data-end-message]::after {
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
clip: rect(1px,1px,1px,1px);
}
.c4 .highlight[data-start-message]::before {
.c4 .highlight.first[data-start-message]::before {
content: attr(data-start-message);
}
.c4 .highlight[data-end-message]::after {
.c4 .highlight.last[data-end-message]::after {
content: attr(data-end-message);
}
}
Expand Down Expand Up @@ -690,32 +700,11 @@ Array [
font-weight: bold;
}
.c4 .search-highlight::before,
.c4 .search-highlight::after {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-clip: rect(1px,1px,1px,1px);
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.c4 .search-highlight,
.c4 .search-highlight .math {
background-color: #ffea00;
}
.c4 .search-highlight[data-start-message]::before {
content: attr(data-start-message);
}
.c4 .search-highlight[data-end-message]::after {
content: attr(data-end-message);
}
.c4 .search-highlight[aria-current],
.c4 .search-highlight[aria-current] .math {
background-color: #ff9e4b;
Expand Down
64 changes: 29 additions & 35 deletions src/app/content/components/Page/PageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,14 @@ export const contentTextStyle = css`
// Search and key term highlights need to target .math as well,
// otherwise math elements won't have full height background color
const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';

const hideBeforeAndAfter = `
&::before,
&::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
const screenreaderOnly = `
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
`;

export default styled(MainContent)`
Expand Down Expand Up @@ -70,13 +66,16 @@ export default styled(MainContent)`
z-index: 1;
@media screen {
${hideBeforeAndAfter}
&[data-start-message]::before,
&[data-end-message]::after {
${screenreaderOnly}
}
&[data-start-message]::before {
&.first[data-start-message]::before {
content: attr(data-start-message);
}
&[data-end-message]::after {
&.last[data-end-message]::after {
content: attr(data-end-message);
}
}
Expand Down Expand Up @@ -122,17 +121,21 @@ 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: "";
}
::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 {
Expand Down Expand Up @@ -161,21 +164,12 @@ export default styled(MainContent)`
@media screen {
.search-highlight {
${hideBeforeAndAfter}
font-weight: bold;
${SELF_AND_CHILD_MATH_SELECTOR} {
background-color: #ffea00;
}
&[data-start-message]::before {
content: attr(data-start-message);
}
&[data-end-message]::after {
content: attr(data-end-message);
}
&[aria-current] {
${SELF_AND_CHILD_MATH_SELECTOR} {
background-color: #ff9e4b;
Expand Down
Loading

0 comments on commit 538fd09

Please sign in to comment.