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

Add new aria-hidden toggle #56

Merged
merged 9 commits into from
Dec 28, 2022
Merged

Add new aria-hidden toggle #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b596c4d
docs(readme): update build badge
blackfalcon Dec 21, 2022
9f1c1bd
chore(deps): update github actions workflow
blackfalcon Dec 21, 2022
276887b
fix(deps): update dependencies
blackfalcon Dec 21, 2022
f5ab904
chore(deps): update patch releases
blackfalcon Dec 21, 2022
42eca42
chore(deps): update minor releases
blackfalcon Dec 21, 2022
ceee7f9
docs(demo): update marked rendering per version change
blackfalcon Dec 21, 2022
b92c789
feat(a11y toggle): add new aria-hidden option #54
blackfalcon Dec 21, 2022
9163cb9
test: add test for new aria feature #54
blackfalcon Dec 21, 2022
2ade45d
refactor: update feature per review feedback
blackfalcon Dec 28, 2022
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
10 changes: 5 additions & 5 deletions .github/workflows/testPublish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ jobs:
node-version: [12.x, 14.x]

steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
Expand All @@ -37,10 +37,10 @@ jobs:
runs-on: ubuntu-latest
needs: test
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
persist-credentials: false
- uses: actions/setup-node@v1
- uses: actions/setup-node@v3
with:
node-version: 14
- run: npm ci
Expand All @@ -49,7 +49,7 @@ jobs:
- run: npm run sassRender
- run: npm run distJS
- run: npm run bundler
- uses: cycjimmy/semantic-release-action@v2
- uses: cycjimmy/semantic-release-action@v3
env:
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ For the most up to date information on [UI development browser support](https://

## Install

[![Build Status](https://img.shields.io/github/workflow/status/AlaskaAirlines/auro-icon/Test%20and%20publish?branch=master&style=for-the-badge)](https://github.com/AlaskaAirlines/[namespace]-[name]/actions?query=workflow%3A%22test+and+publish%22)
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-icon/testPublish.yml?branch=master&style=for-the-badge)](https://github.com/AlaskaAirlines/[namespace]-[name]/actions?query=workflow%3A%22test+and+publish%22)
[![See it on NPM!](https://img.shields.io/npm/v/@alaskaairux/auro-icon?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@alaskaairux/auro-icon)
[![License](https://img.shields.io/npm/l/@alaskaairux/auro-icon?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)

Expand Down
2 changes: 1 addition & 1 deletion demo/alaska.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
fetch('/demo/alaska.md')
.then((response) => response.text())
.then((text) => {
const rawHtml = marked(text);
const rawHtml = marked.parse(text);
document.querySelector('main').innerHTML = rawHtml;
Prism.highlightAll();
});
Expand Down
154 changes: 66 additions & 88 deletions demo/demo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,94 +6,72 @@ The `auro-icon` web component comes pre-configured with all the available [Auro

## Default component

The following is an example of the default use of the `auro-icon` element.

<div class="exampleWrapper">
<auro-icon category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon>
```

</auro-accordion>

## Default component with a11y description
## Accessibility

If assistive technologies are needed to read back a description of the icon, simply add content within the element that will be hidden from view, but read back by screen readers.
By default `aria-hidden` on the SVG inside the `auro-icon` element is set to `true`. Using the `ariaHidden` attribute on `auro-icon` you can set that value to `false`. This will allow the screen reader to announce the content from the SVG's `title` element.

<div class="exampleWrapper">
<auro-icon category="terminal" name="plane-diag-fill">Icon: plane-diag-fill</auro-icon>
<auro-icon category="interface" name="pin-trip" ariaHidden="false"></auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon category="terminal" name="plane-diag-fill">Icon: plane-diag-fill</auro-icon>
<auro-icon category="interface" name="pin-trip" ariaHidden="false"></auro-icon>
```

</auro-accordion>

## Default component with label

In situations where the icon is to be listed with a descriptive label, simply use the `label` attribute and the text in the `slot` will appear next to the icon.
### Alter the accessibility description

The `primary` attribute is assigned by default. Other attributes, `emphasis`, `accent`, `disabled`, `error`, `success`, and `advisory` are supported. All `ondark` versions as well.
If the description you intend to be read back is different than the content in the default `title` element of the SVG, leave the `aria-hidden="true"` default on the SVG and enter the custom description into the `auro-icon` slot.

<div class="exampleWrapper">
<auro-icon label category="in-flight" name="wifi">Wi-Fi</auro-icon>
<auro-icon label emphasis category="in-flight" name="plug">Power</auro-icon>
<auro-icon label accent category="in-flight" name="food-and-drink">Food</auro-icon>
<auro-icon label disabled category="in-flight" name="wifi-disabled">No Wi-Fi</auro-icon>
<auro-icon label error category="in-flight" name="flight-delayed">Flight is delayed.</auro-icon>
<auro-icon label success category="in-flight" name="flight-on-time">Flight is on time</auro-icon>
<auro-icon label advisory category="in-flight" name="wine-and-spirits">21 and over only</auro-icon>
<auro-icon category="interface" name="pin-trip">Your trip starts here!</auro-icon>
</div>
<div class="exampleWrapper">

<style>
.responsiveExample {
width: 100%;
}
<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

@media screen and (min-width: 769px) {
.responsiveExample {
width: 30%;
}
}
</style>
```html
<auro-icon category="interface" name="pin-trip">Your trip starts here!</auro-icon>
```

<auro-icon class="responsiveExample" label warning category="in-flight" name="flight-delayed">Your flight's arrival has been delayed. We apologize for the delay, but your aircraft was delayed due to a late inbound aircraft.</auro-icon>
</auro-accordion>

## Default component with label (accessibility recommendation)

While you may place the icon alone, it is considered best practice to combine the icon with a description statement. The `auro-icon` element easily supports this with the use of the `label` attribute. By using the `label` attribute, content you enter into the `slot` of the element will appear next to the icon of choice. Changing the `aria-hidden` state of the icon is NOT needed. The assistive technologies will bypass the icon and announce the label string of content.

In situations where the icon is to be listed with a descriptive label, simply use the `label` attribute and the text in the `slot` will appear next to the icon.

<div class="exampleWrapper">
<auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon label category="in-flight" name="wifi">Wi-Fi</auro-icon>
<auro-icon label emphasis category="in-flight" name="plug">Power</auro-icon>
<auro-icon label accent category="in-flight" name="food-and-drink">Food</auro-icon>
<auro-icon label disabled category="in-flight" name="wifi-disabled">No Wi-Fi</auro-icon>
<auro-icon label error category="in-flight" name="flight-delayed">Flight is delayed.</auro-icon>
<auro-icon label success category="in-flight" name="flight-on-time">Flight is on time</auro-icon>
<auro-icon label advisory category="in-flight" name="wine-and-spirits">21 and over only</auro-icon>

<style>
.responsiveExample {
width: 100%;
}

@media screen and (min-width: 769px) {
.responsiveExample {
width: 30%;
}
}
</style>

<auro-icon class="responsiveExample" label warning category="in-flight" name="flight-delayed">Your flight's arrival has been delayed. We apologize for the delay, but your aircraft was delayed due to a late inbound aircraft.</auro-icon>

<auro-icon label category="in-flight" name="wifi">
Your flight is enabled with super fast Wi-Fi
</auro-icon>
```

</auro-accordion>
Expand All @@ -105,53 +83,53 @@ Mono-color icons support the following attributes to illustrate visual state. Th
See the [API](/components/auro/icon/api) for details and use cases.

<div class="exampleWrapper">
<auro-icon category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" emphasis></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" accent></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" disabled></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" error></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" success></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" advisory></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon>
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon category="interface" name="pin-trip" accent></auro-icon>
<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon category="interface" name="pin-trip" error></auro-icon>
<auro-icon category="interface" name="pin-trip" success></auro-icon>
<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" emphasis></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" accent></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" disabled></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" error></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" success></auro-icon>
<auro-icon category="terminal" name="plane-diag-fill" advisory></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon>
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon category="interface" name="pin-trip" accent></auro-icon>
<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon category="interface" name="pin-trip" error></auro-icon>
<auro-icon category="interface" name="pin-trip" success></auro-icon>
<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
```

</auro-accordion>

All compatible with `ondark` attribute.

<div class="exampleWrapper--ondark">
<auro-icon ondark category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" emphasis></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" accent></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" disabled></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" error></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" success></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" advisory></auro-icon>
<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon ondark category="terminal" name="plane-diag-fill"></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" emphasis></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" accent></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" disabled></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" error></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" success></auro-icon>
<auro-icon ondark category="terminal" name="plane-diag-fill" advisory></auro-icon>
<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
```

</auro-accordion>
Expand All @@ -161,18 +139,18 @@ All compatible with `ondark` attribute.
The `auro-icon` by default apply the `primary` selector for color application. This can be over written using the defined API listed above. Custom colors are also allowed when using the `customColor` attribute and a parent element with a color setting.

<div class="exampleWrapper">
<auro-icon category="terminal" name="plane-diag-fill" ></auro-icon> default inherits color<br/>
<auro-icon category="terminal" name="plane-diag-fill" customColor></auro-icon> applies primary color selector<br/>
<auro-icon category="terminal" name="plane-diag-fill" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
<auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
<auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
<auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-icon category="terminal" name="plane-diag-fill" ></auro-icon> default inherits color<br/>
<auro-icon category="terminal" name="plane-diag-fill" customColor></auro-icon> applies primary color selector<br/>
<auro-icon category="terminal" name="plane-diag-fill" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
<auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
<auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
<auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
```

</auro-accordion>
Expand All @@ -182,7 +160,7 @@ The `auro-icon` by default apply the `primary` selector for color application. T
Auro icon's by default are set to the value of the `--auro-size-lg` token. To customize the icon size, add the `customSize` attribute and adjust the `width` of the parent element.

<div class="exampleWrapper">
<auro-icon style="width: 30rem" category="terminal" name="plane-diag-fill" success customSize></auro-icon>
<auro-icon style="width: 30rem" category="interface" name="pin-trip" success customSize></auro-icon>
</div>

<auro-accordion lowProfile justifyRight>
Expand All @@ -192,8 +170,8 @@ Auro icon's by default are set to the value of the `--auro-size-lg` token. To cu
<auro-icon
style="width: 30rem"
customSize
category="terminal"
name="plane-diag-fill"
category="interface"
name="pin-trip"
success >
</auro-icon>

Expand Down
31 changes: 16 additions & 15 deletions docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,34 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca

## Attributes

| Attribute | Type | Description |
|--------------|-----------|----------------------------|
| `customSize` | `Boolean` | Allows for custom size use |
| Attribute | Type | Description |
|--------------|-----------|-----------------------------|
| `customSize` | `Boolean` | Allows for custom size use. |

## Properties

| Property | Attribute | Type | Default | Description |
|------------------|------------------|-----------|---------|--------------------------------------------------|
| `accent` | `accent` | `Boolean` | | Sets the icon to use the accent style |
| `advisory` | `advisory` | `Boolean` | | Sets the icon to use the advisory style |
| `category` | `category` | `String` | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage |
| `customColor` | `customColor` | `Boolean` | | Removes primary selector |
| `disabled` | `disabled` | `Boolean` | | Sets the icon to use the disabled style |
| `emphasis` | `emphasis` | `Boolean` | | Sets the icon to use the emphasis style |
| `error` | `error` | `Boolean` | | Sets the icon to use the error style |
| `accent` | `accent` | `Boolean` | | Sets the icon to use the accent style. |
| `advisory` | `advisory` | `Boolean` | | Sets the icon to use the advisory style. |
| `ariaHidden` | `ariaHidden` | `String` | | Set aria-hidden value. Default is `true`. Option is `false`. |
| `category` | `category` | `String` | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. |
| `customColor` | `customColor` | `Boolean` | | Removes primary selector. |
| `disabled` | `disabled` | `Boolean` | | Sets the icon to use the disabled style. |
| `emphasis` | `emphasis` | `Boolean` | | Sets the icon to use the emphasis style. |
| `error` | `error` | `Boolean` | | Sets the icon to use the error style. |
| `hidden` | `hidden` | `Boolean` | | If present, the component will be hidden both visually and from screen readers |
| `hiddenAudible` | `hiddenAudible` | `Boolean` | | If present, the component will be hidden from screen readers, but seen visually |
| `hiddenVisually` | `hiddenVisually` | `Boolean` | | If present, the component will be hidden visually, but still read by screen readers |
| `label` | `label` | `Boolean` | | Exposes content in slot as icon label |
| `label` | `label` | `Boolean` | | Exposes content in slot as icon label. |
| `name` | `name` | `String` | | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage |
| `onDark` | `onDark` | `Boolean` | false | Set value for on-dark version of auro-icon |
| `primary` | `primary` | `Boolean` | | Sets the icon to use the baseline primary icon style |
| `success` | `success` | `Boolean` | | Sets the icon to use the success style |
| `warning` | `warning` | `Boolean` | | Sets the icon to use the warning style |
| `primary` | `primary` | `Boolean` | | Sets the icon to use the baseline primary icon style. |
| `success` | `success` | `Boolean` | | Sets the icon to use the success style. |
| `warning` | `warning` | `Boolean` | | Sets the icon to use the warning style. |

## Slots

| Name | Description |
|------|--------------------------------------------------|
| | Hidden from visibility, used for a11y if icon description is needed |
| | Hidden from visibility, used for a11y if icon description is needed. |
Loading