Add accessibility GitHub issues link to component documentation (#573)

* add an accessibility permalink

* testing out two a11y sections

* added component and imported into component layout

* modified component layout

* added accessibility component into tooltip file

* fixed component

* individually importing the accessibility link component into docs pages

* added accessibility link component to components a-f

* added a11y component to the rest of component pages

* updated contribution guides to reflect these changes

* fixed linter

* fixed linter...again

* added consistent headings

* Update content/guides/contribute/documentation.mdx

Co-authored-by: Josep Martins <josepmartins@github.com>

* Update content/components/tooltip.mdx

* updated accessibility component

* updated Link to match link in footer

---------

Co-authored-by: Josep Martins <josepmartins@github.com>

content/components/action-bar.mdx

@@ -246,3 +246,4 @@ An action bar has an ARIA role of [`toolbar`](https://developer.mozilla.org/en-U
     width="456"
   />
 </Box>
+

content/components/action-list.mdx

@@ -12,6 +12,7 @@ description:
 import {Box, Button, Heading, Link} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <ImageContainer>
   <img
@@ -248,3 +249,9 @@ A nav list organizes navigation links for the user's current context and indicat
 </div>
 
 </Box>
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="ActionList"/>

content/components/action-menu.mdx

@@ -9,6 +9,7 @@ description: Action menu is composed of action list and overlay patterns used fo
 import {Box, Button, Heading, Link} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <Note>
   Looking for <a href="/guides/contribute">contributors</a> to add submenus to the React and Rails implementation, as
@@ -474,6 +475,10 @@ See [focus management](/guides/accessibility/focus-management) for more informat
 | <Box as="kbd" backgroundColor="canvas.subtle" borderRadius={1} borderColor="border.default" borderWidth={1} borderStyle="solid" py={1} px={2}>PageDown</Box>   | Move focus to last item                                         |
 | <Box as="kbd" backgroundColor="canvas.subtle" borderRadius={1} borderColor="border.default" borderWidth={1} borderStyle="solid" py={1} px={2}>Esc</Box>        | Close menu                                                      |
 
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="ActionMenu"/>
+
 ## Related components
 
 - [Action list](/components/action-list)

content/components/anchored-overlay.mdx

@@ -7,6 +7,7 @@ description: Anchored overlay opens an overlay relative to the anchor position.
 import {Box, Button, Heading} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Overview
 
@@ -19,3 +20,7 @@ Anchored overlay provides an anchor that will open a floating overlay positioned
 ## Accessibility
 
 The anchored overlay menu will automatically receive a focus trap and focus zone. Use up/down keys to navigate between buttons.
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="AnchoredOverlay"/>

content/components/autocomplete.mdx

@@ -12,6 +12,8 @@ rails: https://primer.style/view-components/components/beta/autocomplete
 import {Box} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
+
 
 ## Overview
 
@@ -108,3 +110,9 @@ If multiple values can be selected, the default behavior is to move the selected
 By default, menu items are filtered based on whether or not they match the value of the text input. The default filter is case-insensitive.
 
 Custom filtering logic can be applied if the default filtering behavior does not make sense for your use case. However, it is strongly discouraged to disable filtering entirely.
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="AutoComplete"/>

content/components/avatar-pair.mdx

@@ -8,6 +8,7 @@ figmaId: avatar_pair
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -40,6 +41,12 @@ Avatar pair has two parent-child combinations: the parent as the circle and the
   </div>
 </Box>
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="AvatarPair"/>
+
 ## Related components
 
 - [Avatar](/components/avatar)

content/components/avatar-stack.mdx

@@ -10,6 +10,7 @@ figmaId: avatar_stack
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -37,6 +38,12 @@ Only the 20px avatar size is currently used in the avatar stack.
 
 The default avatar stack is left-aligned. You can right-align the component for layouts that are better suited for it.
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="AvatarStack"/>
+
 ## Related components
 
 - [Avatar](/components/avatar)

content/components/avatar.mdx

@@ -10,6 +10,7 @@ figmaId: avatar
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -41,6 +42,12 @@ Avatars appear as two different shapes, each with their own functional purpose.
 - **Circle avatars** represent individual people.
 - **Square avatars** represent non-human entities, such as bots, teams, or organizations
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Avatar"/>
+
 ## Related components
 
 - [Avatar pair](/components/avatar-pair)

content/components/banner.mdx

@@ -10,5 +10,12 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 For general design and usage guidelines of banners, see the [flash component](/components/flash).
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Banner"/>

content/components/blankslate.mdx

@@ -12,6 +12,7 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Anatomy
 
@@ -70,3 +71,9 @@ Empty states should explain features _in addition_ to conveying intention. In th
 For first time user experiences, use illustration Blankslates to playfully engage the user and introduce the Octocat as a symbol of GitHub. Primary text should welcome the user to the platform and feature. Secondary text should seek to educate the user, but at a simpler, less-technical level.
 
 ![first time user Blankslate](https://user-images.githubusercontent.com/6846673/62813307-efb9e200-babe-11e9-93e7-a6fd45d7f942.png)
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Blankslate"/>

content/components/border-box.mdx

@@ -9,9 +9,16 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <Note variant="warning">
   <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
   <Text>Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link></Text>
 </Note>
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="BorderBox"/>
+

content/components/box.mdx

@@ -10,9 +10,16 @@ rails: https://primer.style/view-components/components/box
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Usage
 
 The box component is considered a utility component, as it can be used for something as simple as a rounded corner box.
 
 By default there are no additional styles, as these can be achieved using styled system props to enable custom theme-aware styling.
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Box"/>

content/components/branch-name.mdx

@@ -9,6 +9,7 @@ figmaId: branch_name
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -41,3 +42,9 @@ Branch name is rendered as a link by default. You can also represent the branch
   alt="An image showing a branch name component as a link and a branch name component as plain text."
   src="https://user-images.githubusercontent.com/586552/204637507-08c61b68-c474-4d64-9d64-91bf46fcff42.png"
 />
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="BranchName"/>

content/components/breadcrumbs.mdx

@@ -11,6 +11,7 @@ rails: https://primer.style/view-components/components/beta/breadcrumbs
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -52,3 +53,9 @@ By default the breadcrumbs component can show up to 10 items within the chain.
   alt="An image showing various breadcrumbs with different numbers of items in the breadcrumb chain"
   src="https://user-images.githubusercontent.com/586552/204618645-1abd2204-f197-402d-9b01-de648ddd1812.png"
 />
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Breadcrumbs"/>

content/components/button-group.mdx

@@ -11,6 +11,7 @@ rails: https://primer.style/view-components/components/beta/buttongroup
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   src="https://user-images.githubusercontent.com/586552/226987730-84d99d46-1dd4-4ddc-91b3-046d7eeedbad.png"
@@ -86,6 +87,10 @@ Labeling buttons properly lets users know what will happen when they activate th
 
 Read more about [descriptive buttons](/guides/accessibility/descriptive-buttons).
 
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="ButtonGroup"/>
+
 ## Related links
 
 - [Button](/components/button)

content/components/button-marketing.mdx

@@ -9,6 +9,7 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 For general design and usage guidelines of this component, see the [button component](https://primer.style/brand/components/Button#usage) in our Brand documentation.
 
@@ -18,3 +19,9 @@ For general design and usage guidelines of this component, see the [button compo
   width="960"
   alt="A marketing button Rails component"
 />
+
+## Accessibility 
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="ButtonMarketing"/>

content/components/button.mdx

@@ -13,6 +13,7 @@ cssId: button
 import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -353,3 +354,7 @@ Limit primary button usage. Only use one primary button on the page, whenever po
 Labeling buttons properly lets users know what will happen when they activate the control, lessens errors, and increases confidence.
 
 Read more about [descriptive buttons](/guides/accessibility/descriptive-buttons).
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Button"/>

content/components/checkbox-group.mdx

@@ -8,6 +8,7 @@ railsIds:
 
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <img
   width="960"
@@ -48,6 +49,10 @@ Use checkbox group to allow users to select multiple items from a list of indivi
 Once a user checks an option from a checkbox group, the result should not be saved or applied until the user has explicitly submitted their input using a "save" or "submit" button. See the [saving pattern guidelines](../ui-patterns/saving) for more information.
 Alternative: you can use a [toggle switch](/components/toggle-switch) to immediately toggle something on and off as long as it's not in the context of a bigger form that applies other input values when submited
 
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="CheckboxGroup"/>
+
 ## Related links
 
 - [Forms](../ui-patterns/forms/overview)

content/components/checkbox.mdx

@@ -9,6 +9,7 @@ figmaId: checkbox
 
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Usage
 
@@ -40,6 +41,12 @@ Checkboxes are capable of showing two forms of selection: checked (left) or inde
 - An individual checkbox should not have its own validation message or style. Instead, show a validation message on the [checkbox group](/components/checkbox-group). For more information, see the [Validation Message](../ui-patterns/forms/overview#validation) section in the Forms documentation.
 - An individual checkbox button cannot be marked as required. Instead, make a selection required using the [checkbox group](/components/checkbox-group). For more information, see the [Required field indicator](../ui-patterns/forms/overview#required-field-indicator) in the Forms documentation.
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="Checkbox"/>
+
 ## Related links
 
 - [Forms](../ui-patterns/forms/overview)

content/components/circle-badge.mdx

@@ -9,6 +9,7 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <Note variant="warning">
   <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
@@ -26,3 +27,9 @@ export default ComponentLayout
 ## Usage
 
 Use circle badge to visually connect logos of third party services. 
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="CircleBadge"/>

content/components/clipboard-copy.mdx

@@ -9,6 +9,7 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <Note variant="warning">
   <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
@@ -24,3 +25,8 @@ export default ComponentLayout
   alt="The copy icon next to text that says Copy to clipboard"
 />
 
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="ClipboardCopy"/>

content/components/close-button.mdx

@@ -9,8 +9,15 @@ import ComponentLayout from '~/src/layouts/component-layout'
 import {Link, Text} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 <Note variant="warning">
   <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
   <Text>Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link></Text>
-</Note>
+</Note>
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+ <AccessibilityLink label="CloseButton"/>