From ed06dc502a09af76a8f488bd32a322802e5454db Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Tue, 20 Dec 2022 20:20:35 -0800 Subject: [PATCH] feat(a11y toggle): add new aria-hidden option #54 Changes to be committed: modified: demo/demo.md modified: src/auro-icon.js modified: src/style.scss --- demo/demo.md | 152 ++++++++++++++++++++--------------------------- docs/api.md | 32 +++++----- src/auro-icon.js | 49 ++++++++++----- src/style.scss | 4 ++ 4 files changed, 119 insertions(+), 118 deletions(-) diff --git a/demo/demo.md b/demo/demo.md index 5af6a96..b077476 100644 --- a/demo/demo.md +++ b/demo/demo.md @@ -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. +
- +
See code ```html - + ``` -## 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.
- Icon: plane-diag-fill +
See code ```html - Icon: plane-diag-fill + ``` -## 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.
- Wi-Fi - Power - Food - No Wi-Fi - Flight is delayed. - Flight is on time - 21 and over only + Your trip starts here!
-
- +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. - Your flight's arrival has been delayed. We apologize for the delay, but your aircraft was delayed due to a late inbound aircraft. +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. + +
+ Your flight is enabled with super fast Wi-Fi
See code ```html - Wi-Fi - Power - Food - No Wi-Fi - Flight is delayed. - Flight is on time - 21 and over only - - - - Your flight's arrival has been delayed. We apologize for the delay, but your aircraft was delayed due to a late inbound aircraft. - + Your flight is enabled with super fast Wi-Fi ``` @@ -105,26 +81,26 @@ Mono-color icons support the following attributes to illustrate visual state. Th See the [API](/components/auro/icon/api) for details and use cases.
- - - - - - - + + + + + + +
See code ```html - - - - - - - + + + + + + + ``` @@ -132,26 +108,26 @@ See the [API](/components/auro/icon/api) for details and use cases. All compatible with `ondark` attribute.
- - - - - - - + + + + + + +
See code ```html - - - - - - - + + + + + + + ``` @@ -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.
- default inherits color
- applies primary color selector
- applies the color from the style attribute + default inherits color
+ applies primary color selector
+ applies the color from the style attribute
See code ```html - default inherits color
- applies primary color selector
- applies the color from the style attribute + default inherits color
+ applies primary color selector
+ applies the color from the style attribute ``` @@ -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.
- +
@@ -192,8 +168,8 @@ Auro icon's by default are set to the value of the `--auro-size-lg` token. To cu diff --git a/docs/api.md b/docs/api.md index 2d13d06..39ad129 100644 --- a/docs/api.md +++ b/docs/api.md @@ -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. | diff --git a/src/auro-icon.js b/src/auro-icon.js index 6a9088e..58b7c28 100644 --- a/src/auro-icon.js +++ b/src/auro-icon.js @@ -7,6 +7,7 @@ import { html, css } from "lit-element"; import { classMap } from 'lit-html/directives/class-map'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; import BaseIcon from "./baseIcon"; import styleCss from "./iconStyle-css.js"; @@ -14,20 +15,22 @@ import styleCss from "./iconStyle-css.js"; /** * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. * - * @attr {Boolean} customSize - Allows for custom size use - * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage + * @attr {Boolean} customSize - Allows for custom size use. + * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage - * @attr {Boolean} customColor - Removes primary selector - * @attr {Boolean} label - Exposes content in slot as icon label - * @attr {Boolean} primary - Sets the icon to use the baseline primary icon style - * @attr {Boolean} emphasis - Sets the icon to use the emphasis style - * @attr {Boolean} accent - Sets the icon to use the accent style - * @attr {Boolean} advisory - Sets the icon to use the advisory style - * @attr {Boolean} success - Sets the icon to use the success style - * @attr {Boolean} error - Sets the icon to use the error style - * @attr {Boolean} disabled - Sets the icon to use the disabled style - * @attr {Boolean} warning - Sets the icon to use the warning style - * @slot - Hidden from visibility, used for a11y if icon description is needed + * @attr {Boolean} customColor - Removes primary selector. + * @attr {Boolean} label - Exposes content in slot as icon label. + * @attr {Boolean} primary - Sets the icon to use the baseline primary icon style. + * @attr {Boolean} emphasis - Sets the icon to use the emphasis style. + * @attr {Boolean} accent - Sets the icon to use the accent style. + * @attr {Boolean} advisory - Sets the icon to use the advisory style. + * @attr {Boolean} success - Sets the icon to use the success style. + * @attr {Boolean} error - Sets the icon to use the error style. + * @attr {Boolean} disabled - Sets the icon to use the disabled style. + * @attr {Boolean} warning - Sets the icon to use the warning style. + * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`. + * @attr {String} title - Set custom description of icon in use. + * @slot - Hidden from visibility, used for a11y if icon description is needed. */ // build the component class @@ -107,6 +110,14 @@ class AuroIcon extends BaseIcon { }, customColor: { type: Boolean + }, + ariaHidden: { + type: String, + reflect: true + }, + title: { + type: String, + reflect: true } }; } @@ -133,12 +144,20 @@ class AuroIcon extends BaseIcon { } const a11y = { + 'labelContainer': true, 'util_displayHiddenVisually': !this.label } return html` -
- ${this.svg} +
+ + + ${this.svg} + +
diff --git a/src/style.scss b/src/style.scss index 7d4cd62..4b57304 100644 --- a/src/style.scss +++ b/src/style.scss @@ -21,3 +21,7 @@ color: var(--auro-color-brand-midnight-400); } } + +.labelContainer { + line-height: 1.8; +}