Skip to content

Commit

Permalink
Bump @primer/gatsby-theme-doctocat from 3.1.1 to 4.0.0 (primer#278)
Browse files Browse the repository at this point in the history 
* Remove unused images and grid columns

* Bump @primer/gatsby-theme-doctocat from 3.1.1 to 4.0.0

* Update eslint and eslint-plugin-github packages

* Add @github/prettier-config

* Fix index pages to use Text & bolded Links

* Fix Video and Heading styles
  • Loading branch information
Josep Martins authored Aug 16, 2022
1 parent 9e5f7a5 commit d52cbf1
Show file tree
Hide file tree
Showing 30 changed files with 6,444 additions and 6,947 deletions.
6 changes: 4 additions & 2 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
{
"extends": [
"plugin:github/es6",
"plugin:github/react",
"plugin:jsx-a11y/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"env": {
"jest": false
},
Expand All @@ -12,7 +14,7 @@
},
"settings": {
"react": {
"version": "16"
"version": "17"
}
}
}
13 changes: 13 additions & 0 deletions babel-defines.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const shared = {
__DEV__: "process.env.NODE_ENV !== 'production'",
}

module.exports = {
development: shared,
test: shared,
production: {
...shared,
__DEV__: 'false',
'process.env.NODE_ENV': "'production'",
},
}
115 changes: 80 additions & 35 deletions content/accessibility/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,110 @@
title: Accessibility
---

import {Grid, Flex, Box, Link, Text, Label} from '@primer/components'
import {Box, Link, Text, Label} from '@primer/react'

<Grid gridTemplateColumns="1fr" gridGap={4}>


<Grid gridTemplateColumns="1fr" gridGap={4}>
<Box display="grid" gridTemplateColumns="1fr" gridGap={4}>
<Box display="grid" gridTemplateColumns="1fr" gridGap={4}>
<h2>General</h2>
<div>
<Link href="/design/accessibility/accessibility-at-github" fontWeight="bold">Accessibility at GitHub</Link>
<Box as="p">Get started with accessibility at GitHub.</Box>
<Link href="/design/accessibility/accessibility-at-github" sx={{fontWeight: 'bold'}}>
Accessibility at GitHub
</Link>
<Text as="p">Get started with accessibility at GitHub.</Text>
</div>
<div>
<Link href="/design/accessibility/guidelines" fontWeight="bold">Guidelines</Link>
<Box as="p">Basic guidelines for designers when creating or updating features.</Box>
<Link href="/design/accessibility/guidelines" sx={{fontWeight: 'bold'}}>
Guidelines
</Link>
<Text as="p">Basic guidelines for designers when creating or updating features.</Text>
</div>
<div>
<Link href="/design/accessibility/tools" fontWeight="bold">Tools</Link>
<Box as="p">A selection of tools to help designers create accessible designs.</Box>
<Link href="/design/accessibility/tools" sx={{fontWeight: 'bold'}}>
Tools
</Link>
<Text as="p">A selection of tools to help designers create accessible designs.</Text>
</div>
</Grid>


<Grid gridTemplateColumns="1fr" gridGap={4}>
</Box>
<Box display="grid" gridTemplateColumns="1fr" gridGap={4}>
<h2>Specific</h2>
<div>
<Link href="/design/accessibility/alternative-text-for-images" fontWeight="bold">Alternative text for images</Link>
<Box as="p">Alternative text on images allows assistive technology like screen readers to understand the purpose of an image on a page or allow them to skip it if purely decorative. </Box>
<Link href="/design/accessibility/alternative-text-for-images" sx={{fontWeight: 'bold'}}>
Alternative text for images
</Link>
<Text as="p">
Alternative text on images allows assistive technology like screen readers to understand the purpose of an image
on a page or allow them to skip it if purely decorative.{' '}
</Text>
</div>
<div>
<Link href="/design/accessibility/announcements" fontWeight="bold">Assistive technology announcements</Link>
<Box as="p">Events like toasts and status messages are visually communicated to GitHub users. Making sure those announcements are read via assistive technology allows users with low or no vision to get that status information.</Box>
<Link href="/design/accessibility/announcements" sx={{fontWeight: 'bold'}}>
Assistive technology announcements
</Link>
<Text as="p">
Events like toasts and status messages are visually communicated to GitHub users. Making sure those
announcements are read via assistive technology allows users with low or no vision to get that status
information.
</Text>
</div>
<div>
<Link href="/design/accessibility/descriptive-buttons" fontWeight="bold">Descriptive buttons</Link>
<Box as="p">Labeling buttons properly let's users know what will happen when they activate the control, lessens errors, and increases confidence.</Box>
<Link href="/design/accessibility/descriptive-buttons" sx={{fontWeight: 'bold'}}>
Descriptive buttons
</Link>
<Text as="p">
Labeling buttons properly let's users know what will happen when they activate the control, lessens errors, and
increases confidence.
</Text>
</div>
<div>
<Link href="/design/accessibility/focus-management" fontWeight="bold">Focus management</Link>
<Box as="p">Managing focus within a page or application is essential for users to successfully navigate, complete actions, and understand where they are.</Box>
<Link href="/design/accessibility/focus-management" sx={{fontWeight: 'bold'}}>
Focus management
</Link>
<Text as="p">
Managing focus within a page or application is essential for users to successfully navigate, complete actions,
and understand where they are.
</Text>
</div>
<div>
<Link href="/design/accessibility/headings" fontWeight="bold">Headings</Link>
<Box as="p">Headings play a critical role in communicating the structure of a page. Find out why they're critical and how to create an accessible hierarchy in your pages.</Box>
<Link href="/design/accessibility/headings" sx={{fontWeight: 'bold'}}>
Headings
</Link>
<Text as="p">
Headings play a critical role in communicating the structure of a page. Find out why they're critical and how to
create an accessible hierarchy in your pages.
</Text>
</div>
<div>
<Link href="/design/accessibility/links" fontWeight="bold">Links</Link>
<Box as="p">Links help us navigate a website. Learn how to style links appropriately to keep them usable by all.</Box>
<Link href="/design/accessibility/links" sx={{fontWeight: 'bold'}}>
Links
</Link>
<Text as="p">
Links help us navigate a website. Learn how to style links appropriately to keep them usable by all.
</Text>
</div>
<div>
<Link href="/design/accessibility/semantic-html" fontWeight="bold">Semantic HTML</Link>
<Box as="p">Understand when and how to use semantic HTML to improve the experience of the largest number of users possible.</Box>
<Link href="/design/accessibility/semantic-html" sx={{fontWeight: 'bold'}}>
Semantic HTML
</Link>
<Text as="p">
Understand when and how to use semantic HTML to improve the experience of the largest number of users possible.
</Text>
</div>
<div>
<Link href="/design/accessibility/text-resize-and-respacing" fontWeight="bold">Text resize and respacing</Link>
<Box as="p">People on the web should be able to resize text to improve legibility without blocking or obscuring any other part of the UI.</Box>
<Link href="/design/accessibility/text-resize-and-respacing" sx={{fontWeight: 'bold'}}>
Text resize and respacing
</Link>
<Text as="p">
People on the web should be able to resize text to improve legibility without blocking or obscuring any other
part of the UI.
</Text>
</div>
<div>
<Link href="/design/accessibility/tooltip-alternatives" fontWeight="bold">Tooltip alternatives</Link>
<Box as="p">Most UI cases don't call for tooltips. Learn some alternative methods to use in place of tooltips.</Box>
<Link href="/design/accessibility/tooltip-alternatives" sx={{fontWeight: 'bold'}}>
Tooltip alternatives
</Link>
<Text as="p">
Most UI cases don't call for tooltips. Learn some alternative methods to use in place of tooltips.
</Text>
</div>
</Grid>
</Grid>
</Box>
</Box>
2 changes: 1 addition & 1 deletion content/accessibility/tooltip-alternatives.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Tooltip alternatives
---

import {Box, Text} from '@primer/components'
import {Box, Text} from '@primer/react'

## Overview

Expand Down
Loading

0 comments on commit d52cbf1

Please sign in to comment.