Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add note in Flash and PageHead for accessibility #859

Merged
merged 2 commits into from
Sep 17, 2024
Merged

Add note in Flash and PageHead for accessibility #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ffcc9f
Add notes on a11y
TylerJDev Sep 13, 2024
b4d7ff0
Update content/components/pagehead.mdx
patrickhlauke Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions content/components/pagehead.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,17 @@ Pagehead is a heading component for the title and start of a given page section.

## Accessibility

### Heading usage
`Pagehead` does not provide a heading by default. Since this component is intended to be used for the title and start of a given page section, it should include a heading (`<h1>-<h6>`) in most cases.

```xml
<Pagehead>
<Heading as="h2">
Heading title for Pagehead
</Heading>
</Pagehead>
```

### Known accessibility issues (GitHub staff only)

<AccessibilityLink label="Pagehead"/>
Expand Down
6 changes: 6 additions & 0 deletions content/deprecated-components/flash.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ These updates are typically not user-initiated but rather alerts that require th

- They do not typically timeout on their own, but can include a dismiss action for messages that can be closed.

- Don't rely on just color to convey the meaning of the flash alert. You should pair a message with an icon that clearly relates to the selected variant.

## Options

### Types
Expand Down Expand Up @@ -76,6 +78,10 @@ Banners contain options to add an icon, button, or dismiss button to the content
src="https://user-images.githubusercontent.com/586552/217706817-8a647058-9ab6-40d9-a5f7-289d67150add.png"
/>

### Icon usage

Icons can help convey what the flash alert is for visually. It should be used alongside a message that further explains what the flash alert is aiming to indicate. You should never rely on just the color of the flash alert to convey a status, as this becomes a [WCAG 1.4.1 Use of Color](https://www.w3.org/TR/WCAG22/#use-of-color) issue.

## Accessibility

The flash component should trigger notifications for users utilizing assistive technology. They should be considered as part of the overall messaging in the product and do not recieve focus (therefore, they do not _require_ a dismiss button).
Expand Down
Loading