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): fix the bidi section interupting the a11y section (#13331)

Browse Source
This commit is contained in:
Jeremy Elbourn
2018-09-27 07:08:18 -07:00
committed by GitHub
parent 74fdedba56
commit 39b5577c77
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/icon/icon.md
+10 -10
View File
@@ -95,16 +95,6 @@ In thinking about accessibility, it is useful to place icon use into one of thre
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
By default icons in an RTL layout will look exactly the same as in LTR, however certain icons have
to be [mirrored for RTL users](https://material.io/guidelines/usability/bidirectionality.html). If
you want to mirror an icon only in an RTL layout, you can use the `mat-icon-rtl-mirror` CSS class.
```html
<mat-icon class="mat-icon-rtl-mirror" svgIcon="thumb-up"></mat-icon>
```
#### Decorative icons
When the icon is purely cosmetic and conveys no real semantic meaning, the `<mat-icon>` element
is marked with `aria-hidden="true"`.
@@ -124,3 +114,13 @@ screen-readers. The most straightforward way to do this is to
information as the icon.
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.
### Bidirectionality
By default icons in an RTL layout will look exactly the same as in LTR, however certain icons have
to be [mirrored for RTL users](https://material.io/guidelines/usability/bidirectionality.html). If
you want to mirror an icon only in an RTL layout, you can use the `mat-icon-rtl-mirror` CSS class.
```html
<mat-icon class="mat-icon-rtl-mirror" svgIcon="thumb-up"></mat-icon>
```