Skip to content

Commit 208e71a

Browse files
thisisdanothisisdano
authored
Merge pull request #1180 from uswds/uswds-2.11.0-docs
Update docs to USWDS 2.11.0
2 parents 49d938f + bbc9200 commit 208e71a

File tree

552 files changed

+4953
-5751
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

552 files changed

+4953
-5751
lines changed

‎.snyk‎

Lines changed: 335 additions & 83 deletions
Large diffs are not rendered by default.

‎_components/accordion/accordion.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
category: Components
3+
component:
4+
name: accordion
5+
status: ready
6+
package: usa-accordion
7+
dependencies:
8+
lead: An accordion is a list of headers that hide or reveal additional content when selected.
9+
permalink: /components/accordion/
10+
redirect_from:
11+
- /accordions/
12+
- /components/accordions/
13+
subnav:
14+
- text: Preview
15+
href: '#accordion-preview'
16+
- text: Code
17+
href: '#accordion-code'
18+
- text: Guidance
19+
href: '#accordion-guidance'
20+
- text: Package
21+
href: '#accordion-package'
22+
title: Accordion
23+
variants:
24+
- variant: "`.usa-accordion--bordered`"
25+
description: Display a border around accordion content
26+
---

‎_components/accordion/guidance/accessibility.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
- **Code header areas in the accordion as buttons.** Using a `<button>` assures that accordions are usable with both screen readers and the keyboard.
2+
- **Use `aria-expanded` on buttons to express an accordion’s default state.** Buttons should state if they are expanded by default with `aria-expanded="true"`. The `aria-expanded="false"` attributes will be added to other buttons when the accordion is initialized by the JavaScript.
3+
- **Use unique ids.** Each button has a unique name `aria-controls="id"` that associates the control to the appropriate region by referencing the controlled element’s `id`.
4+
- **The accordion uses javascript to set the `hidden` value of its content area.** Each content area will have its `hidden` attribute set by the component, depending on its corresponding button’s `aria-expanded` attribute. To ensure that your content is accessible in the event that the JavaScript does not load or is disabled, you should not manually set `hidden` on any of your content areas.

‎_components/accordion/guidance/implementation.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- **Multiselectable accordion groups.** Add the `aria-multiselectable="true"` attribute to any usa-accordion to create a multiselectable accordion group.
2+
- **Default an accordion button to open.** Add the `aria-expanded="true"` attribute to any `usa-accordion__button` to have that section open by default at page load.

‎_components/accordion/guidance/usability.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- **Make the entire header selectable.** Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
2+
- **Give interactive elements enough space.** Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)

‎_components/accordion/guidance/when-to-consider-something-else.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- **If users need to see most or all of the information on a page.** Use well-formatted text instead.
2+
- **If there is not enough content to warrant condensing.** Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

‎_components/accordion/guidance/when-to-use.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- **If users will only need a few specific pieces of content within a page.**
2+
- **If you have only a small space to display a lot of content.**

‎_components/accordions.md‎

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎_components/alert/alert.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
category: Components
3+
component:
4+
name: alert
5+
status: ready
6+
package: usa-alert
7+
dependencies:
8+
lead: An alert keeps users informed of important and sometimes time-sensitive changes.
9+
permalink: /components/alert/
10+
redirect_from:
11+
- /alerts/
12+
- /components/alerts/
13+
subnav:
14+
- text: Preview
15+
href: '#alert-preview'
16+
- text: Code
17+
href: '#alert-code'
18+
- text: Guidance
19+
href: '#alert-guidance'
20+
- text: Package
21+
href: '#alert-package'
22+
title: Alert
23+
variants:
24+
- variant: "`.usa-alert--info`"
25+
description: Display an informational status alert
26+
- variant: "`.usa-alert--warning`"
27+
description: Display an warning status alert
28+
- variant: "`.usa-alert--error`"
29+
description: Display an error status alert
30+
- variant: "`.usa-alert--success`"
31+
description: Display an success status alert
32+
- variant: "`.usa-alert--slim`"
33+
description: Display a slimmer version of the alert
34+
- variant: "`.usa-alert--no-icon`"
35+
description: Display an alert without an icon
36+
---

‎_components/alert/guidance/accessibility.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- **Use the proper ARIA role.** If the message is not interactive, use the ARIA `role="alert"` to inform assistive technologies of a time-sensitive and important message. If the message is interactive, use the use the ARIA `role="alertdialog"` instead.
2+
- **Don’t visually hide alert messages and then make them visible when they are needed.** Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.

0 commit comments

Comments
 (0)