a11y(table): add basic, sort, pager demos for a11y #6498 #6653
Conversation
googlebot
added
the
cla: yes
tinayuangao
added
Accessibility
| </ng-container> | ||
| <ng-container cdkColumnDef="color"> | ||
| <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> | ||
| <md-cell *cdkCellDef="let row" [style.color]="row.color">{{row.color}}</md-cell> |
There was a problem hiding this comment.
Some colors are hard to read like yellow. Can we make this more accessible? We can remove the styled colors
| <section> | ||
| <h2>Basic Table</h2> | ||
| <p>Shows name, color and age data.</p> | ||
| <md-table [dataSource]="basicDataSource"> |
There was a problem hiding this comment.
I took a quick looks at the guidance for role="grid": https://www.w3.org/TR/wai-aria/roles#grid
Something we missed earlier is that
A grid is considered editable unless otherwise specified.
We either need to add aria-readonly here, or we need to make the table set it by default. @andrewseguin thoughts?
There was a problem hiding this comment.
If the table has contents that are editable that would be misrepresentative of the contents. Its really up to the user implementing this to make that decision IMO.
There was a problem hiding this comment.
I was thinking the table would have something like editable that defaults to false, but we can sort that out later.
For now, just add aria-readonly to the md-table in the demo
| <section> | ||
| <h2>Basic Table</h2> | ||
| <p>Shows name, color and age data.</p> | ||
| <md-table [dataSource]="basicDataSource"> |
There was a problem hiding this comment.
Would be good to add an aria-label to the table element
jelbourn
added
pr: lgtm
action: merge
|
@amcdnl You need to |
| import {Observable} from 'rxjs/Observable'; | ||
| import {MdSort, MdPaginator} from '@angular/material'; | ||
|
|
||
| interface UserData { |
There was a problem hiding this comment.
Here UserData should be exported
|
@amcdnl Can you rebase? |
kara
added
pr: needs rebase
and removed
action: merge
|
@kara - done :) |
kara
added
action: merge
|
@amcdnl Can you check out the CI failure? Sorryyy |
|
Ok, how about now :) |
|
Is there a real CI failure? aot task looks to be failing |
|
Ah, |
jelbourn
added
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. |
No description provided.