@primer/doctocat-nextjs 0.9.0 → 0.9.1-rc.d685601
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @primer/doctocat-nextjs
|
|
2
2
|
|
|
3
|
+
## 0.9.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#92](https://github.com/primer/doctocat-nextjs/pull/92) [`bc694fa`](https://github.com/primer/doctocat-nextjs/commit/bc694fae9e9565c55b67e5b8c9d9302067061226) Thanks [@rezrah](https://github.com/rezrah)! - Increase contrast of the "Skip to main content" link where Primer React link color rules were overriding component-level ones.
|
|
8
|
+
|
|
9
|
+
- [#91](https://github.com/primer/doctocat-nextjs/pull/91) [`af9b369`](https://github.com/primer/doctocat-nextjs/commit/af9b369e0bba2765ba762d6aa8ba31f619c7b1de) Thanks [@danielguillan](https://github.com/danielguillan)! - [a11y] Fix search results not announced by screen readers and dropdown overflowing viewport at small sizes
|
|
10
|
+
|
|
11
|
+
- [#94](https://github.com/primer/doctocat-nextjs/pull/94) [`dcd8034`](https://github.com/primer/doctocat-nextjs/commit/dcd803457570c35876eb8f6a609d02e3873e295a) Thanks [@rezrah](https://github.com/rezrah)! - Increase contrast of all `code span` syntax highlights in code fences on light mode.
|
|
12
|
+
|
|
13
|
+
Before: 4.31:1 AA (fails WCAG AA)
|
|
14
|
+
After: 5.03:1 AA (passes WCAG AA)
|
|
15
|
+
|
|
3
16
|
## 0.9.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
max-width: calc(100% - 46px);
|
|
21
21
|
border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
|
|
22
22
|
border-radius: var(--brand-borderRadius-medium);
|
|
23
|
-
max-height: 300px;
|
|
23
|
+
max-height: min(300px, 50vh);
|
|
24
|
+
max-height: min(300px, 50dvh);
|
|
24
25
|
overflow-y: auto;
|
|
25
26
|
overflow-x: hidden;
|
|
26
27
|
}
|
|
@@ -32,6 +32,22 @@ export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
|
|
|
32
32
|
const [searchResults, setSearchResults] = useState<SearchResult[]>([])
|
|
33
33
|
const [searchTerm, setSearchTerm] = useState<string | undefined>('')
|
|
34
34
|
const [activeDescendant, setActiveDescendant] = useState<number>(-1)
|
|
35
|
+
const [statusMessage, setStatusMessage] = useState('')
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
const timeout = setTimeout(() => {
|
|
39
|
+
setStatusMessage(
|
|
40
|
+
searchTerm
|
|
41
|
+
? searchResults.length === 0
|
|
42
|
+
? 'No results found'
|
|
43
|
+
: `${searchResults.length} result${searchResults.length === 1 ? '' : 's'} available`
|
|
44
|
+
: '',
|
|
45
|
+
)
|
|
46
|
+
// debounce
|
|
47
|
+
}, 1000)
|
|
48
|
+
|
|
49
|
+
return () => clearTimeout(timeout)
|
|
50
|
+
}, [searchTerm, searchResults.length])
|
|
35
51
|
|
|
36
52
|
useEffect(() => {
|
|
37
53
|
const handleClickAway = (event: MouseEvent) => {
|
|
@@ -187,6 +203,9 @@ export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
|
|
|
187
203
|
aria-expanded={isSearchResultOpen}
|
|
188
204
|
/>
|
|
189
205
|
</FormControl>
|
|
206
|
+
<div className="visually-hidden" aria-live="polite" role="status">
|
|
207
|
+
{statusMessage}
|
|
208
|
+
</div>
|
|
190
209
|
{searchTerm && (
|
|
191
210
|
<div
|
|
192
211
|
className={clsx(
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
z-index: 999;
|
|
6
6
|
padding: var(--base-size-16);
|
|
7
7
|
background-color: var(--base-color-scale-blue-5);
|
|
8
|
-
color: var(--base-color-scale-white-0);
|
|
8
|
+
color: var(--base-color-scale-white-0) !important; /* Override the PRC default link styles */
|
|
9
9
|
}
|
|
10
10
|
.SkipToMainContent:not(:focus) {
|
|
11
11
|
clip: rect(1px, 1px, 1px, 1px);
|
package/css/global.css
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
html,
|
|
6
6
|
body {
|
|
7
7
|
background-color: var(--brand-color-canvas-default) !important;
|
|
8
|
-
font-family:
|
|
9
|
-
'Segoe UI Emoji';
|
|
8
|
+
font-family:
|
|
9
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
[data-color-mode='dark'] {
|
|
@@ -39,6 +39,11 @@ code span {
|
|
|
39
39
|
color: var(--shiki-light);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
/* Override shiki-light keyword color for better contrast */
|
|
43
|
+
code span[style*='--shiki-light:#D73A49'] {
|
|
44
|
+
--shiki-light: var(--base-color-scale-red-5) !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
42
47
|
[data-color-mode='dark'] code span {
|
|
43
48
|
color: var(--shiki-dark);
|
|
44
49
|
}
|