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

Use frame for sandboxed component preview, stricter accessibility checks #437

Closed
wants to merge 10 commits into from
Closed

Use frame for sandboxed component preview, stricter accessibility checks #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0469776
Support frame for sandboxed component preview
aduth Apr 19, 2024
4bbebc1
Render accordion as frame preview
aduth Apr 19, 2024
32cf298
Run Axe accessibility tests with best practices
aduth Apr 19, 2024
23c19cc
Sync frame margin to code-example.html helper
aduth Apr 19, 2024
8856261
Limit margin to top
aduth Apr 19, 2024
1c723d6
Force margin collapse via frame display block
aduth Apr 19, 2024
6cea649
Use IIFE to create closure for multiple embeds
aduth Apr 22, 2024
25d48f2
Embedify Accordions, Alerts, Badges, Banner, Button Groups
aduth Apr 22, 2024
fdd8787
Shuffle padding/margin to allow space for focus outline
aduth Apr 22, 2024
02df907
Embedify Primary Default button
aduth Apr 22, 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
4 changes: 4 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,7 @@ defaults:
path: ''
values:
layout: two_column
- scope:
type: embeds
values:
layout: embed
55 changes: 2 additions & 53 deletions docs/_components/accordions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,59 +12,8 @@ In the examples below, replace `<h2>` with the appropriate heading level to main

## Default

{% capture example %}
<div class="usa-accordion">
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="unique-id-1">
How do I make an accordion’s content shown by default?
</button>
</h2>
<div id="unique-id-1" class="usa-accordion__content usa-prose">
<p>Follow this example! Mark the <code>.usa-accordion__button</code> with <code>aria-expanded="true"</code> to indicate that the content referenced with the ID listed in <code>aria-controls</code> is expanded by default.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-2">
How do I make an accordion’s content hidden by default?
</button>
</h2>
<div id="unique-id-2" class="usa-accordion__content usa-prose">
<p>Mark the <code>.usa-accordion__button</code> with <code>aria-expanded="false"</code> to indicate that the content referenced with the ID listed in <code>aria-controls</code> is collapsed by default.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-3">
How can I allow more than one accordion item to be open simultaneously?
</button>
</h2>
<div id="unique-id-3" class="usa-accordion__content usa-prose">
<p>On the wrapping <code>.usa-accordion</code>, add the <code>aria-multiselectable="true"</code> attribute.</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="accordions/default" %}

## Bordered

{% capture example %}
<div class="usa-accordion usa-accordion--bordered">
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="unique-id-4">
First Amendment
</button>
</h2>
<div id="unique-id-4" class="usa-accordion__content usa-prose">
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-5">
Second Amendment
</button>
</h2>
<div id="unique-id-5" class="usa-accordion__content usa-prose">
<p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="accordions/bordered" %}
45 changes: 5 additions & 40 deletions docs/_components/alerts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,55 +21,20 @@ Visit the [USWDS Alerts component](https://designsystem.digital.gov/components/a

### Success

{% capture example %}
<div class="usa-alert usa-alert--success">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="alerts/success" %}

### Warning

{% capture example %}
<div class="usa-alert usa-alert--warning">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="alerts/warning" %}

### Error

{% capture example %}
<div class="usa-alert usa-alert--error">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="alerts/error" %}

### Information

{% capture example %}
<div class="usa-alert usa-alert--info">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="alerts/info" %}

### Other

{% capture example %}
<div class="usa-alert usa-alert--other">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="alerts/other" %}
16 changes: 2 additions & 14 deletions docs/_components/badges.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,10 @@ Badges are comprised with a div using the `lg-verification-badge` class and a sm

The unphishable badge is used to indicate that an account is only using security keys as its MFA method.

{% capture example %}
<div class="lg-verification-badge">
<img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" alt="" />
Unphishable
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="badges/unphishable" %}

## A verified account badge example

A verfied account badge is used to indicate that an account has completed the identity verification process.

{% capture example %}
<div class="lg-verification-badge">
<img src="{{ site.baseurl }}/assets/img/alerts/success.svg" role="img" width="16" height="16" alt="" />
Verified Account
</div>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="badges/verified-account" %}
10 changes: 2 additions & 8 deletions docs/_components/banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,8 @@ lead: Banners identify official websites of government organizations in the Unit

## Default

{% capture example %}
{% include banner.html id="gov-banner-default" %}
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="banner/default" %}

## Centered

{% capture example %}
{% include banner.html centered=true id="gov-banner-centered" %}
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="banner/centered" %}
30 changes: 2 additions & 28 deletions docs/_components/button-groups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,8 @@ title: Button Groups

### Default

{% capture example %}
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Button</button>
</li>
</ul>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="button-groups/default-segmented" %}

### Big

{% capture example %}
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big usa-button--outline">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big usa-button--outline">Button</button>
</li>
</ul>
{% endcapture %}
{% include helpers/code-example.html code=example %}
{% include helpers/embed.html embed="button-groups/big-segmented" %}
12 changes: 1 addition & 11 deletions docs/_components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,7 @@ subnav:

### Primary

```html
<button class="usa-button">
```

<div>
<button class="usa-button">Default</button>
<button class="usa-button usa-button--hover">Hover</button>
<button class="usa-button usa-button--active">Active</button>
<button class="usa-button usa-focus">Focus</button>
<button class="usa-button" disabled>Disabled</button>
</div>
{% include helpers/embed.html embed="buttons/default-primary" %}

### Outline

Expand Down
23 changes: 23 additions & 0 deletions docs/_embeds/accordions/bordered.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
title: Bordered Accordion
---

<div class="usa-accordion usa-accordion--bordered">
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="unique-id-4">
First Amendment
</button>
</h2>
<div id="unique-id-4" class="usa-accordion__content usa-prose">
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-5">
Second Amendment
</button>
</h2>
<div id="unique-id-5" class="usa-accordion__content usa-prose">
<p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
</div>
</div>
32 changes: 32 additions & 0 deletions docs/_embeds/accordions/default.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
title: Default Accordion
---

<div class="usa-accordion">
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="unique-id-1">
How do I make an accordion’s content shown by default?
</button>
</h2>
<div id="unique-id-1" class="usa-accordion__content usa-prose">
<p>Follow this example! Mark the <code>.usa-accordion__button</code> with <code>aria-expanded="true"</code> to indicate that the content referenced with the ID listed in <code>aria-controls</code> is expanded by default.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-2">
How do I make an accordion’s content hidden by default?
</button>
</h2>
<div id="unique-id-2" class="usa-accordion__content usa-prose">
<p>Mark the <code>.usa-accordion__button</code> with <code>aria-expanded="false"</code> to indicate that the content referenced with the ID listed in <code>aria-controls</code> is collapsed by default.</p>
</div>

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="unique-id-3">
How can I allow more than one accordion item to be open simultaneously?
</button>
</h2>
<div id="unique-id-3" class="usa-accordion__content usa-prose">
<p>On the wrapping <code>.usa-accordion</code>, add the <code>aria-multiselectable="true"</code> attribute.</p>
</div>
</div>
9 changes: 9 additions & 0 deletions docs/_embeds/alerts/error.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Error Alert
---

<div class="usa-alert usa-alert--error">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
9 changes: 9 additions & 0 deletions docs/_embeds/alerts/info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Info Alert
---

<div class="usa-alert usa-alert--info">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
9 changes: 9 additions & 0 deletions docs/_embeds/alerts/other.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Other Alert
---

<div class="usa-alert usa-alert--other">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
9 changes: 9 additions & 0 deletions docs/_embeds/alerts/success.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Success Alert
---

<div class="usa-alert usa-alert--success">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
9 changes: 9 additions & 0 deletions docs/_embeds/alerts/warning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Warning Alert
---

<div class="usa-alert usa-alert--warning">
<div class="usa-alert__body">
<p class="usa-alert__text">Banner text</p>
</div>
</div>
8 changes: 8 additions & 0 deletions docs/_embeds/badges/unphishable.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Unphishable Badge
---

<div class="lg-verification-badge">
<img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" alt="" />
Unphishable
</div>
8 changes: 8 additions & 0 deletions docs/_embeds/badges/verified-account.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Verified Account Badge
---

<div class="lg-verification-badge">
<img src="{{ site.baseurl }}/assets/img/alerts/success.svg" role="img" width="16" height="16" alt="" />
Verified Account
</div>
5 changes: 5 additions & 0 deletions docs/_embeds/banner/centered.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
title: Centered Banner
---

{% include banner.html centered=true id="gov-banner-centered" %}
5 changes: 5 additions & 0 deletions docs/_embeds/banner/default.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
title: Default Banner
---

{% include banner.html id="gov-banner-default" %}
15 changes: 15 additions & 0 deletions docs/_embeds/button-groups/big-segmented.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Big Segmented Button Group
---

<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big usa-button--outline">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big usa-button--outline">Button</button>
</li>
</ul>
15 changes: 15 additions & 0 deletions docs/_embeds/button-groups/default-segmented.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Default Segmented Button Group
---

<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Button</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Button</button>
</li>
</ul>
Loading
Loading