docs(icon): Add docs for inline icon #10348
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
googlebot
added
the
cla: yes
jelbourn
reviewed
Mar 9, 2018
src/lib/icon/icon.md
Outdated
| 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. | ||
|
|
||
| 4. **Inline**: the icon is not interactive and is inlined into a block of text to convey |
Member
There was a problem hiding this comment.
I would prefer not to add a fourth category, since it makes it seem more complicated overall. I think we could do:
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.
donroyco
reviewed
Mar 9, 2018
src/lib/icon/icon.md
Outdated
| ``` | ||
|
|
||
| #### Decorative icons | ||
| When the icon is puely cosmetic and conveys no real semantic meaning, the `<mat-icon>` element |
donroyco
reviewed
Mar 9, 2018
| #### Indicator icons/Inline icons | ||
| 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 |
Contributor
There was a problem hiding this comment.
screen-readers » screen readers
Member
Author
There was a problem hiding this comment.
Leaving as screen-readers as this is the choice used throughout the library.
donroyco
reviewed
Mar 9, 2018
| 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. |
Contributor
There was a problem hiding this comment.
screen-reader » screen reader
josephperrott
force-pushed
the
inline-icon
branch
from
6c9ddf1 to
3fb24dc
Compare
josephperrott
force-pushed
the
inline-icon
branch
6 times, most recently
from
f3e3a6d to
7f086c6
Compare
Member
Author
|
@jelbourn when you can, PTAL. |
jelbourn
reviewed
Apr 3, 2018
src/lib/icon/icon.md
Outdated
| 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 | ||
| #### Indicator icons/Inline icons |
Member
There was a problem hiding this comment.
Keep this as just "Indicator icons" since we're still using that above?
josephperrott
force-pushed
the
inline-icon
branch
from
7f086c6 to
53481a4
Compare
jelbourn
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.