docs: added accessibility guidelines to icons

adobe · Sep 16, 2024 · 0687744 · 0687744
1 parent 2ffb8d5
commit 0687744
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/icons-ui/README.md b/packages/icons-ui/README.md
@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:
 
@@ -162,3 +162,7 @@ VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined,
 ```
 
 In this way the icons exported by `@spectrum-web-components/icons-ui` can be leveraged in projects powered by the the likes of hyperHTML, lighterhtml, lit-html, Preact, React, Vanilla JS, Vue.js, and more!
+
+### Accessibility guidelines
+
+Review the guidelines for the [icon](../icon#accessibility-guidelines).
diff --git a/packages/icons-workflow/README.md b/packages/icons-workflow/README.md
@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 Deliver [Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) as either:
 
@@ -165,3 +165,7 @@ VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined,
 ```
 
 In this way the icons exported by `@spectrum-web-components/icons-workflow` can be leveraged in projects powered by the the likes of hyperHTML, lighterhtml, lit-html, Preact, React, Vanilla JS, Vue.js, and more!
+
+### Accessibility guidelines
+
+Review the guidelines for the [icon](../icon#accessibility-guidelines).
diff --git a/packages/icons/README.md b/packages/icons/README.md
@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 The `<sp-icons-medium>` and `<sp-icons-large>` elements that are included in this package supply your application with the Spectrum CSS Icons at both the medium and large sizes for use via the `<sp-icon>` element also provided by the Spectrum Web Components library. Include at least one of these elements in a project that makes use of icons in these sets, but feel free to include these sets in the scope of any element that leverages them as they will be deduplicated as appropriate to ensure all of your components are able to deliver the icons included therein.
 
@@ -23,3 +23,7 @@ When looking to leverage the `IconsMedium` or `IconsLarge` base classes as a typ
 ```
 import { IconsMedium, IconsLarge } from '@spectrum-web-components/icons';
 ```
+
+### Accessibility guidelines
+
+Review the guidelines for the [icon](../icon#accessibility-guidelines).
diff --git a/packages/iconset/README.md b/packages/iconset/README.md
@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-icon name="custom-icons:icon">` across your application.
 
@@ -32,3 +32,7 @@ export class IconsLarge extends IconsetSVG {
 ### Deprecated
 
 Iconsets have been deprecated and will be removed from the project in an upcoming version. Using a technique that ensures only the icons actually leveraged in your application are present in your build, like UI Icons (../icons-ui/) or Workflow Icons (../icons-workflow/), will ensure smaller bundles and higher performance for you visitor. For non-Spectrum icons, you can still slot SVG and image content into an [`sp-icon` element](../icon/) or sanitize the SVG to a template literal so that it can be returned from the `render()` method in an extension of `IconBase` to create your own named icon element.
+
+### Accessibility guidelines
+
+Review the guidelines for the [icon](../icon#accessibility-guidelines).