@primer/gatsby-theme-doctocat 4.4.1 → 4.4.2
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,11 @@
|
|
|
1
1
|
# @primer/gatsby-theme-doctocat
|
|
2
2
|
|
|
3
|
+
## 4.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`84f8a7e`](https://github.com/primer/doctocat/commit/84f8a7e6b64b431a620b59e5dcb54366ccc3f5c6) [#565](https://github.com/primer/doctocat/pull/565) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Accessibility improvements
|
|
8
|
+
|
|
3
9
|
## 4.4.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/package.json
CHANGED
package/src/components/header.js
CHANGED
|
@@ -8,6 +8,7 @@ import MobileSearch from './mobile-search'
|
|
|
8
8
|
import NavDrawer, {useNavDrawerState} from './nav-drawer'
|
|
9
9
|
import NavDropdown, {NavDropdownItem} from './nav-dropdown'
|
|
10
10
|
import Search from './search'
|
|
11
|
+
import SkipLink from './skip-link'
|
|
11
12
|
|
|
12
13
|
export const HEADER_HEIGHT = 66
|
|
13
14
|
|
|
@@ -21,7 +22,6 @@ function Header({isSearchEnabled}) {
|
|
|
21
22
|
<Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
|
|
22
23
|
<Box
|
|
23
24
|
as="header"
|
|
24
|
-
aria-labelledby="site-heading"
|
|
25
25
|
sx={{
|
|
26
26
|
display: 'flex',
|
|
27
27
|
height: HEADER_HEIGHT,
|
|
@@ -31,6 +31,7 @@ function Header({isSearchEnabled}) {
|
|
|
31
31
|
bg: 'canvas.default'
|
|
32
32
|
}}
|
|
33
33
|
>
|
|
34
|
+
<SkipLink />
|
|
34
35
|
<Box sx={{display: 'flex', alignItems: 'center'}}>
|
|
35
36
|
<Link
|
|
36
37
|
href={siteMetadata.header.logoUrl}
|
|
@@ -42,56 +43,50 @@ function Header({isSearchEnabled}) {
|
|
|
42
43
|
>
|
|
43
44
|
<StyledOcticon icon={MarkGithubIcon} size="medium" />
|
|
44
45
|
</Link>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
{siteMetadata.header.title ? (
|
|
47
|
+
<Link
|
|
48
|
+
href={siteMetadata.header.url}
|
|
49
|
+
sx={{
|
|
50
|
+
color: 'accent.fg',
|
|
51
|
+
fontFamily: 'mono',
|
|
52
|
+
display: [
|
|
53
|
+
// We only hide "Primer" on small viewports if a shortName is defined.
|
|
54
|
+
siteMetadata.shortName ? 'none' : 'inline-block',
|
|
55
|
+
null,
|
|
56
|
+
null,
|
|
57
|
+
'inline-block'
|
|
58
|
+
]
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
{siteMetadata.header.title}
|
|
62
|
+
</Link>
|
|
63
|
+
) : null}
|
|
64
|
+
{siteMetadata.shortName ? (
|
|
65
|
+
<>
|
|
66
|
+
{siteMetadata.header.title && (
|
|
67
|
+
<Text
|
|
68
|
+
sx={{
|
|
69
|
+
display: ['none', null, null, 'inline-block'],
|
|
70
|
+
color: 'accent.fg',
|
|
71
|
+
fontFamily: 'mono',
|
|
72
|
+
mx: 2
|
|
73
|
+
}}
|
|
74
|
+
>
|
|
75
|
+
/
|
|
76
|
+
</Text>
|
|
77
|
+
)}
|
|
51
78
|
<Link
|
|
52
|
-
|
|
79
|
+
as={GatsbyLink}
|
|
80
|
+
to="/"
|
|
53
81
|
sx={{
|
|
54
82
|
color: 'accent.fg',
|
|
55
|
-
fontFamily: 'mono'
|
|
56
|
-
display: [
|
|
57
|
-
// We only hide "Primer" on small viewports if a shortName is defined.
|
|
58
|
-
siteMetadata.shortName ? 'none' : 'inline-block',
|
|
59
|
-
null,
|
|
60
|
-
null,
|
|
61
|
-
'inline-block'
|
|
62
|
-
]
|
|
83
|
+
fontFamily: 'mono'
|
|
63
84
|
}}
|
|
64
85
|
>
|
|
65
|
-
{siteMetadata.
|
|
86
|
+
{siteMetadata.shortName}
|
|
66
87
|
</Link>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<>
|
|
70
|
-
{siteMetadata.header.title && (
|
|
71
|
-
<Text
|
|
72
|
-
sx={{
|
|
73
|
-
display: ['none', null, null, 'inline-block'],
|
|
74
|
-
color: 'accent.fg',
|
|
75
|
-
fontFamily: 'mono',
|
|
76
|
-
mx: 2
|
|
77
|
-
}}
|
|
78
|
-
>
|
|
79
|
-
/
|
|
80
|
-
</Text>
|
|
81
|
-
)}
|
|
82
|
-
<Link
|
|
83
|
-
as={GatsbyLink}
|
|
84
|
-
to="/"
|
|
85
|
-
sx={{
|
|
86
|
-
color: 'accent.fg',
|
|
87
|
-
fontFamily: 'mono'
|
|
88
|
-
}}
|
|
89
|
-
>
|
|
90
|
-
{siteMetadata.shortName}
|
|
91
|
-
</Link>
|
|
92
|
-
</>
|
|
93
|
-
) : null}
|
|
94
|
-
</Box>
|
|
88
|
+
</>
|
|
89
|
+
) : null}
|
|
95
90
|
|
|
96
91
|
{isSearchEnabled ? (
|
|
97
92
|
<Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
|
package/src/components/layout.js
CHANGED
|
@@ -52,8 +52,6 @@ function Layout({children, pageContext}) {
|
|
|
52
52
|
<Sidebar />
|
|
53
53
|
</Box>
|
|
54
54
|
<Box
|
|
55
|
-
as="main"
|
|
56
|
-
id="skip-nav"
|
|
57
55
|
sx={{
|
|
58
56
|
justifyContent: 'center',
|
|
59
57
|
flexDirection: 'row-reverse',
|
|
@@ -82,7 +80,7 @@ function Layout({children, pageContext}) {
|
|
|
82
80
|
</Box>
|
|
83
81
|
) : null}
|
|
84
82
|
<Box sx={{width: '100%', maxWidth: '960px'}}>
|
|
85
|
-
<Box sx={{mb: 4}}>
|
|
83
|
+
<Box as="main" id="skip-nav" sx={{mb: 4}}>
|
|
86
84
|
<Box sx={{alignItems: 'center', display: 'flex'}}>
|
|
87
85
|
<Heading as="h1">{title}</Heading>{' '}
|
|
88
86
|
</Box>
|
|
@@ -31,10 +31,10 @@ function NavItem({href, children}) {
|
|
|
31
31
|
function NavItems({items}) {
|
|
32
32
|
return (
|
|
33
33
|
<>
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
<NavList aria-label="Site">
|
|
35
|
+
<VisuallyHidden>
|
|
36
|
+
<h3>Site navigation</h3>
|
|
37
|
+
</VisuallyHidden>
|
|
38
38
|
{items.map(item => (
|
|
39
39
|
<React.Fragment key={item.title}>
|
|
40
40
|
{item.children ? (
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {BaseStyles, themeGet} from '@primer/react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import {createGlobalStyle} from 'styled-components'
|
|
4
|
-
import SkipLink from './skip-link'
|
|
5
4
|
|
|
6
5
|
const GlobalStyles = createGlobalStyle`
|
|
7
6
|
body {
|
|
@@ -29,7 +28,6 @@ function wrapPageElement({element}) {
|
|
|
29
28
|
return (
|
|
30
29
|
<BaseStyles>
|
|
31
30
|
<GlobalStyles />
|
|
32
|
-
<SkipLink />
|
|
33
31
|
{element}
|
|
34
32
|
</BaseStyles>
|
|
35
33
|
)
|