Skip to content

Commit

Permalink
feat(a11y toggle): add new aria-hidden option #54
Browse files Browse the repository at this point in the history 
Changes to be committed:
modified:   demo/demo.md
modified:   src/auro-icon.js
modified:   src/style.scss
  • Loading branch information
@blackfalcon @jason-capsule42
blackfalcon authored and jason-capsule42 committed Dec 28, 2022
1 parent ccddffd commit ed06dc5
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 118 deletions.
152 changes: 64 additions & 88 deletions demo/demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,94 +6,70 @@ 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>

```html
<auro-icon category="interface" name="pin-trip">Your trip starts here!</auro-icon>
```

</auro-accordion>

## Default component with label (accessibility recommendation)

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

<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>
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 +81,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 +137,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 +158,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 +168,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
32 changes: 17 additions & 15 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,35 @@ 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. |
| `title` | `title` | `String` | | Set custom description of icon in use. |
| `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

0 comments on commit ed06dc5

Please sign in to comment.