Skip to content

a11y(grid-list): Add grid list to accessibility demo page #6091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Aug 1, 2017
Merged

a11y(grid-list): Add grid list to accessibility demo page #6091

merged 4 commits into from
Aug 1, 2017

Conversation

tinayuangao
Copy link
Contributor

@tinayuangao tinayuangao commented Jul 27, 2017 •
edited
Loading

Remove the default roles in grid list and grid tile

@googlebot
Copy link

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

@googlebot googlebot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label Jul 27, 2017
@tinayuangao tinayuangao requested a review from jelbourn July 27, 2017 17:07
@tinayuangao tinayuangao added pr: needs review cla: yes PR author has agreed to Google's Contributor License Agreement Accessibility This issue is related to accessibility (a11y) and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jul 27, 2017
jelbourn
jelbourn reviewed Jul 27, 2017
View reviewed changes
src/demo-app/a11y/grid-list/grid-list-a11y.ts Outdated
{text: 'One', cols: 3, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment on having more "real world" text

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
<md-grid-list cols="3" rowHeight="200px">
<md-grid-tile *ngFor="let dog of dogs">
<md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
<img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now the tiles have role="listitem". Is it valid for a listitem to contain an img? It will probably be a common use case for people to want to include images in a gird-list, so we should figure out what the best practice is here.

I'm thinking that it might make sense to have grid-list change to not use list-based roles by default and assume the default use-case is for page layout with users having the option to add list roles (which we would outline in our docs). Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think role="listitem" is okay to contain images. The description in w3c https://www.w3.org/TR/wai-aria/roles#list says it' document structure with non-interactive elements. It doesn't say it cannot contain images.

I'm okay to remove the default roles in grid list and grid tile, as users may want to use them as interactive elements.

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
<md-grid-list cols="3" rowHeight="200px">
<md-grid-tile *ngFor="let dog of dogs">
<md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
<img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The alt should be something like "Photo of ..."

@googlebot googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Jul 28, 2017
jelbourn
jelbourn reviewed Jul 28, 2017
View reviewed changes
src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
@@ -0,0 +1,42 @@
<section>
<h2>Fixed-height grid list</h2>
<md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the list roles removed from the components, should we add them to the demos for these cases that are non-interactive content?

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
@@ -0,0 +1,42 @@
<section>
<h2>Fixed-height grid list</h2>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this header "Types of coffee (fix-height grid-list)"?

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
</section>

<section>
<h2>Ratio-height grid list</h2>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this header "Types of coffee (fix-height grid-list)"?

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
</section>

<section>
<h2>Grid list with header and footer</h2>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this header "Angular team dogs (grid-list with tile headers and footers)"?

jelbourn
jelbourn approved these changes Jul 28, 2017
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, can add "merge-ready" when ready

src/demo-app/a11y/grid-list/grid-list-a11y.html Outdated
@@ -1,41 +1,41 @@
<section>
<h2>Fixed-height grid list</h2>
<md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
<h2>Types of coffee (fix-height grid-list)</h2>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: "fix" -> "fixed"

@jelbourn jelbourn added cla: yes PR author has agreed to Google's Contributor License Agreement action: merge The PR is ready for merge by the caretaker and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla pr: needs review labels Jul 28, 2017
@googlebot googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Jul 31, 2017
@tinayuangao tinayuangao added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jul 31, 2017
devversion and others added 4 commits August 1, 2017 15:01
@devversion @tinayuangao
feat: expose version object in releases (angular#4962)
fbd08b6 
* In releases there will be a constant called `VERSION` that holds the current version of the installed package (material or cdk)
* This is similar as for every @angular package like core, forms, compiler.

Add accessibility demo page for grid list

.
@tinayuangao
real world example
7dee14d
@tinayuangao
remove roles
7864677
@tinayuangao
change header and add roles
8dd8ba4
@tinayuangao tinayuangao requested a review from kara as a code owner August 1, 2017 22:02
@googlebot googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Aug 1, 2017
@tinayuangao tinayuangao added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Aug 1, 2017
@tinayuangao tinayuangao merged commit 8a23157 into angular:master Aug 1, 2017
@tinayuangao tinayuangao deleted the a11y-grid branch March 9, 2018 23:31
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn jelbourn approved these changes

@kara kara Awaiting requested review from kara

Assignees

@jelbourn jelbourn

Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@tinayuangao @googlebot @jelbourn @devversion