Skip to content

Commit c6ed432

Browse files
staxly[bot]staxly[bot]
authored
Merge branch 'main' into dependabot/npm_and_yarn/follow-redirects-1.15.4
2 parents 5c224da + 3255c0d commit c6ed432

File tree

15 files changed

+484
-438
lines changed

15 files changed

+484
-438
lines changed

‎src/app/components/Dropdown.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
12
import { HTMLElement } from '@openstax/types/lib.dom';
23
import flow from 'lodash/fp/flow';
34
import isUndefined from 'lodash/fp/isUndefined';
45
import omitBy from 'lodash/fp/omitBy';
56
import React, { ReactNode } from 'react';
67
import { FormattedMessage, useIntl } from 'react-intl';
78
import styled, { css, keyframes } from 'styled-components/macro';
8-
import { useFocusLost } from '../reactUtils';
9+
import { useFocusLost, useTrapTabNavigation } from '../reactUtils';
910
import { useOnEsc } from '../reactUtils';
10-
import theme from '../theme';
11+
import theme, { defaultFocusOutline } from '../theme';
1112
import { preventDefault } from '../utils';
1213
import { textStyle } from './Typography/base';
1314

@@ -165,8 +166,19 @@ const TabTransparentDropdown = styled((
165166
`}
166167
`;
167168

169+
function TrappingDropdownList(props: object) {
170+
const ref = React.useRef(null);
171+
172+
useTrapTabNavigation(ref);
173+
174+
return (
175+
<ol ref={ref} {...props} />
176+
);
177+
}
178+
179+
168180
// tslint:disable-next-line:variable-name
169-
export const DropdownList = styled.ol`
181+
export const DropdownList = styled(TrappingDropdownList)`
170182
margin: 0;
171183
padding: 0.6rem 0;
172184
background: ${theme.color.neutral.formBackground};
@@ -198,12 +210,12 @@ export const DropdownList = styled.ol`
198210
&:hover,
199211
&:focus {
200212
background: ${theme.color.neutral.formBorder};
201-
outline: 0.2rem auto Highlight;
202-
outline: 0.2rem inset -webkit-focus-ring-color;
213+
${defaultFocusOutline}
203214
}
204215
}
205216
`;
206217

218+
207219
interface DropdownItemProps {
208220
message: string;
209221
ariaMessage?: string;

‎src/app/components/__snapshots__/DotMenu.spec.tsx.snap

+3-2
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ exports[`Dropdown matches snapshot 1`] = `
179179
.c12 li a:focus {
180180
background: #d5d5d5;
181181
outline: 0.2rem auto Highlight;
182-
outline: 0.2rem inset -webkit-focus-ring-color;
182+
outline: 0.2rem auto -webkit-focus-ring-color;
183183
}
184184
185185
.c12.c12 {
@@ -452,7 +452,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
452452
.c12 li a:focus {
453453
background: #d5d5d5;
454454
outline: 0.2rem auto Highlight;
455-
outline: 0.2rem inset -webkit-focus-ring-color;
455+
outline: 0.2rem auto -webkit-focus-ring-color;
456456
}
457457
458458
.c12.c12 {
@@ -499,6 +499,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
499499
</button>
500500
<ol
501501
className="c12"
502+
rightAlign={true}
502503
>
503504
<li>
504505
<a

‎src/app/components/__snapshots__/Dropdown.spec.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ exports[`Dropdown matches snapshot 1`] = `
135135
.c6 li a:focus {
136136
background: #d5d5d5;
137137
outline: 0.2rem auto Highlight;
138-
outline: 0.2rem inset -webkit-focus-ring-color;
138+
outline: 0.2rem auto -webkit-focus-ring-color;
139139
}
140140
141141
.c1 {
@@ -443,7 +443,7 @@ exports[`Dropdown matches snapshot for tab hidden (open) 1`] = `
443443
.c4 li a:focus {
444444
background: #d5d5d5;
445445
outline: 0.2rem auto Highlight;
446-
outline: 0.2rem inset -webkit-focus-ring-color;
446+
outline: 0.2rem auto -webkit-focus-ring-color;
447447
}
448448
449449
.c1 {

‎src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ input:checked + .c10 .c12 {
115115
.c8:focus-within {
116116
border-radius: 0.4rem;
117117
background-color: #f1f1f1;
118-
outline: 0.1rem dotted #212121;
119-
outline: 0.5rem auto -webkit-focus-ring-color;
118+
outline: 0.2rem auto Highlight;
119+
outline: 0.2rem auto -webkit-focus-ring-color;
120120
}
121121
122122
.c8:focus-within .c9 {
@@ -161,8 +161,8 @@ input:checked + .c10 .c12 {
161161
.c15:focus-within {
162162
border-radius: 0.4rem;
163163
background-color: #f1f1f1;
164-
outline: 0.1rem dotted #212121;
165-
outline: 0.5rem auto -webkit-focus-ring-color;
164+
outline: 0.2rem auto Highlight;
165+
outline: 0.2rem auto -webkit-focus-ring-color;
166166
}
167167
168168
.c15:focus-within .c9 {

‎src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap

+19-14
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ input:checked + .c8 .c10 {
115115
.c6:focus-within {
116116
border-radius: 0.4rem;
117117
background-color: #f1f1f1;
118-
outline: 0.1rem dotted #212121;
119-
outline: 0.5rem auto -webkit-focus-ring-color;
118+
outline: 0.2rem auto Highlight;
119+
outline: 0.2rem auto -webkit-focus-ring-color;
120120
}
121121
122122
.c6:focus-within .c7 {
@@ -161,8 +161,8 @@ input:checked + .c8 .c10 {
161161
.c22:focus-within {
162162
border-radius: 0.4rem;
163163
background-color: #f1f1f1;
164-
outline: 0.1rem dotted #212121;
165-
outline: 0.5rem auto -webkit-focus-ring-color;
164+
outline: 0.2rem auto Highlight;
165+
outline: 0.2rem auto -webkit-focus-ring-color;
166166
}
167167
168168
.c22:focus-within .c7 {
@@ -296,8 +296,9 @@ input:checked + .c8 .c10 {
296296
297297
.c13 input:focus + .c16 {
298298
display: block;
299-
outline: 0.1rem dotted #212121;
300-
outline: 0.5rem auto -webkit-focus-ring-color;
299+
outline: 0.2rem auto Highlight;
300+
outline: 0.2rem auto -webkit-focus-ring-color;
301+
z-index: 1;
301302
}
302303
303304
.c20 {
@@ -329,8 +330,9 @@ input:checked + .c8 .c10 {
329330
330331
.c20 input:focus + .c16 {
331332
display: block;
332-
outline: 0.1rem dotted #212121;
333-
outline: 0.5rem auto -webkit-focus-ring-color;
333+
outline: 0.2rem auto Highlight;
334+
outline: 0.2rem auto -webkit-focus-ring-color;
335+
z-index: 1;
334336
}
335337
336338
.c23 {
@@ -362,8 +364,9 @@ input:checked + .c8 .c10 {
362364
363365
.c23 input:focus + .c16 {
364366
display: block;
365-
outline: 0.1rem dotted #212121;
366-
outline: 0.5rem auto -webkit-focus-ring-color;
367+
outline: 0.2rem auto Highlight;
368+
outline: 0.2rem auto -webkit-focus-ring-color;
369+
z-index: 1;
367370
}
368371
369372
.c25 {
@@ -395,8 +398,9 @@ input:checked + .c8 .c10 {
395398
396399
.c25 input:focus + .c16 {
397400
display: block;
398-
outline: 0.1rem dotted #212121;
399-
outline: 0.5rem auto -webkit-focus-ring-color;
401+
outline: 0.2rem auto Highlight;
402+
outline: 0.2rem auto -webkit-focus-ring-color;
403+
z-index: 1;
400404
}
401405
402406
.c27 {
@@ -428,8 +432,9 @@ input:checked + .c8 .c10 {
428432
429433
.c27 input:focus + .c16 {
430434
display: block;
431-
outline: 0.1rem dotted #212121;
432-
outline: 0.5rem auto -webkit-focus-ring-color;
435+
outline: 0.2rem auto Highlight;
436+
outline: 0.2rem auto -webkit-focus-ring-color;
437+
z-index: 1;
433438
}
434439
435440
.c19 {

‎src/app/content/highlights/components/ColorIndicator.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ const ColorIndicator = styled(Hoc)`
110110
input:focus + ${FocusedStyle} {
111111
display: block;
112112
${defaultFocusOutline}
113+
z-index: 1;
113114
}
114115
`;
115116

‎src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -126,12 +126,14 @@ const ContextMenu = ({
126126
transparentTab={false}
127127
>
128128
<HighlightToggleEditContent>
129-
<ColorPicker
130-
color={color}
131-
size='small'
132-
onChange={onColorChange}
133-
/>
134129
<StyledDropdownList>
130+
<li>
131+
<ColorPicker
132+
color={color}
133+
size='small'
134+
onChange={onColorChange}
135+
/>
136+
</li>
135137
<DropdownItem
136138
data-testid='edit'
137139
ariaMessage={editMessage}

0 commit comments

Comments
 (0)