docs(button): enhance button docs and examples#8536
docs(button): enhance button docs and examples#8536EladBezalel wants to merge 1 commit intoangular:masterfrom
Conversation
EladBezalel
requested review from
amcdnl,
jelbourn and
tinayuangao
as code owners
googlebot
added
the
cla: yes
EladBezalel
force-pushed
the
docs/button
branch
from
4193930 to
325d956
Compare
| @@ -0,0 +1,3 @@ | |||
| .spacer { | |||
| flex: 1; | |||
| } | |||
| <button mat-icon-button> | ||
| <mat-icon aria-label="Example icon-button with a more vertical icon">more_vert</mat-icon> | ||
| </button> | ||
| </mat-toolbar> No newline at end of file |
| templateUrl: 'button-toolbar-example.html', | ||
| styleUrls: ['button-toolbar-example.css'], | ||
| }) | ||
| export class ButtonToolbarExample {} |
amcdnl
left a comment
amcdnl
left a comment
There was a problem hiding this comment.
Overall looks good but need to go back through and ensure files end w/ new line.
EladBezalel
force-pushed
the
docs/button
branch
from
325d956 to
7e88ab6
Compare
|
fixed |
jelbourn
left a comment
jelbourn
left a comment
There was a problem hiding this comment.
FYI the docs site also needs to be updated once this is merged:
(someday we'll get around to auto-generating this)
| <mat-card-title>Card with action buttons</mat-card-title> | ||
| </mat-card-header> | ||
| <mat-card-actions align="end"> | ||
| <button mat-button>CANCEL</button> |
There was a problem hiding this comment.
Use normal text case for buttons, the docs site capitalizes them via CSS. If screen-readers encounter ALL CAPS, it reads it as "A. L. L. C. ..."
(here and elsewhere)
| @@ -1 +1,16 @@ | |||
| /** No CSS for this example */ | |||
| .button-row { | |||
There was a problem hiding this comment.
Prefix all example styles with .example- (here and elsewhere)
This makes it super obvious which styles are from the example vs. the docs site (docs-) vs. material
| </mat-card-header> | ||
| <mat-card-actions align="end"> | ||
| <button mat-button>CANCEL</button> | ||
| <button mat-button color="primary">ACCEPT</button> |
There was a problem hiding this comment.
These should have an aria-label along the lines of "Example button, no action"
(here and elsewhere, where the label can be expanded with what the button is an example of)
| <h3>Icon Buttons</h3> | ||
| <div class="button-row"> | ||
| <button mat-icon-button> | ||
| <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon> |
There was a problem hiding this comment.
https://material.angular.io/components/icon/overview#accessibility
In cases like this the aria-label should go on the interactive element (the button or anchor)
| import {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example'; | ||
| import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example'; | ||
| import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simple-example'; | ||
| import {ButtonCardExample} from './button-card/button-card-example'; |
There was a problem hiding this comment.
Not sure if you knew this but this file is auto-generated
(I'm not sure why it's in source control... @amcdnl?)
|
angular/material.angular.io#330 here's the pr for the material.angular.io website |
EladBezalel
force-pushed
the
docs/button
branch
from
7e88ab6 to
40c2e00
Compare
|
@jelbourn it seems like once i removed |
EladBezalel
force-pushed
the
docs/button
branch
from
40c2e00 to
b0ea290
Compare
|
The changes to example-module are necessary, but you shouldn't need to make them by hand. The file also probably shouldn't need to be in source control (a matter for another PR) |
|
@EladBezalel could you rebase this PR? |
|
@EladBezalel could you rebase this PR (again)? |
|
Closing as we are going on ~6 months of inactvity on this PR. Feel free to open up a new PR with these changes if you would like to get them into the library. |
|
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. |
5 participants
changed the overview example to
and change examples section to
showing use cases