From 39b5577c77531964b5eee94699eb5c45bfba8be7 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 27 Sep 2018 07:08:18 -0700 Subject: [PATCH] docs(icon): fix the bidi section interupting the a11y section (#13331) --- src/lib/icon/icon.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/lib/icon/icon.md b/src/lib/icon/icon.md index aa3f7b47b73..c4e40c99224 100644 --- a/src/lib/icon/icon.md +++ b/src/lib/icon/icon.md @@ -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 - -``` - #### Decorative icons When the icon is purely cosmetic and conveys no real semantic meaning, the `` 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 ``. 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 + +```