skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(icon): Add docs for inline icon. (#10348)

Browse Source
This commit is contained in:
Joey Perrott
2018-04-26 01:01:32 -04:00
committed by Andrew Seguin
parent 6dd6080d58
commit 4ca41a620a
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/icon/icon-demo.html
+6 -2
View File
@@ -54,7 +54,11 @@
<mat-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></mat-icon>
</p>
<span>Inline styling allows icons to appear as the same size as text around them.</span>
<p>
Inline styling <mat-icon inline="true">favorite</mat-icon> icons appear as
the same <mat-icon inline="true">directions_car</mat-icon>size as text around them.</p>
My <span class="cdk-visually-hidden">dog</span><mat-icon inline="true">pets</mat-icon> is my
<span class="cdk-visually-hidden">favorite</span><mat-icon inline="true">favorite</mat-icon>,
he loves to go on <span class="cdk-visually-hidden">walks</span>
<mat-icon inline="true">directions_walk</mat-icon>
</p>
</div>
src/lib/icon/icon.md
+9 -9
View File
@@ -92,7 +92,8 @@ element.
In thinking about accessibility, it is useful to place icon use into one of three categories:
1. **Decorative**: the icon conveys no real semantic meaning and is purely cosmetic.
2. **Interactive**: a user will click or otherwise interact with the icon to perform some action.
3. **Indicator**: the icon is not interactive, but it conveys some information, such as a status.
3. **Indicator**: the icon is not interactive, but it conveys some information, such as a status. This
includes using the icon in place of text inside of a larger message.
### Bidirectionality
@@ -105,22 +106,21 @@ you want to mirror an icon only in an RTL layout, you can use the `mat-icon-rtl-
```
#### Decorative icons
When the icon is puely cosmetic and conveys no real semantic meaning, the `<mat-icon>` element
should be marked with `aria-hidden="true"`.
When the icon is purely cosmetic and conveys no real semantic meaning, the `<mat-icon>` element
is marked with `aria-hidden="true"`.
#### Interactive icons
Icons alone are not interactive elements for screen-reader users; when the user would interact with
some icon on the page, a more appropriate element should "own" the interaction:
* The `<mat-icon>` element should be a child of a `<button>` or `<a>` element.
* The `<mat-icon>` element should be marked with `aria-hidden="true"`.
* The parent `<button>` or `<a>` should either have a meaningful label provided either through
direct text content, `aria-label`, or `aria-labelledby`.
#### Indicator icons
When the presence of an icon communicates some information to the user, that information must also
be made available to screen-readers. The most straightforward way to do this is to
1. Mark the `<mat-icon>` as `aria-hidden="true"`
2. Add a `<span>` as an adjacent sibling to the `<mat-icon>` element with text that conveys the same
When the presence of an icon communicates some information to the user whether as an indicator or
by being inlined into a block of text, that information must also be made available to
screen-readers. The most straightforward way to do this is to
1. Add a `<span>` as an adjacent sibling to the `<mat-icon>` element with text that conveys the same
information as the icon.
3. Add the `cdk-visually-hidden` class to the `<span>`. This will make the message invisible
2. Add the `cdk-visually-hidden` class to the `<span>`. This will make the message invisible
on-screen but still available to screen-reader users.