demo(list): Add accessibility demo page for list #6363

tinayuangao · 2017-08-09T00:46:38Z

No description provided.

jelbourn · 2017-08-16T22:05:00Z

src/demo-app/a11y/list/list-a11y.html

+  <section>
+    <h2>Mailbox navigation</h2>
+    <p>Showing a navigation list with links to google search, and "more information" icon button</p>
+    <md-nav-list>


md-nav-list is only meant to contain <a md-list-item> children.

This makes me realize that we probably need tweaks as part of this:

Removing the existing roles and saying that, by default, md-list is assumed to be presentational, and add instructions to add the roles for non-interactive content (same as grid-list).

Give md-nav-list role="navigation"

Thoughts?

Made another component MdNavList for mat-nav-list with role="navigation"

Removed role="list" for MdList

Added "accessibility" section in list.md (Same as grid-list)

kara

LGTM, one nit

kara · 2017-08-17T20:38:41Z

src/lib/list/list.md

+### Accessibility
+By default, the list assumes that it will be used in a purely decorative fashion and thus sets no
+roles, ARIA attributes, or keyboard shortcuts.
+This is equivalent to having a sequence of <div> elements on the page. Any interactive content


Nit: Missing new line before this paragraph starts?

kara · 2017-08-17T20:41:05Z

src/lib/list/list.ts

  constructor(private _renderer: Renderer2,
              private _element: ElementRef,
              @Optional() private _list: MdList,
-              @Optional() navList: MdNavListCssMatStyler) {


Are we still using MdNavListCssMatStyler for anything or can we remove it now?

crisbeto

LGTM, a few nits.

crisbeto · 2017-08-17T21:00:17Z

src/demo-app/a11y/list/list-a11y.html

+  </section>
+
+  <section>
+    <h2> Seasoning</h2>


Spacing inside the tag seems uneven.

crisbeto · 2017-08-17T21:01:59Z

src/demo-app/a11y/list/list-a11y.html

+  </section>
+
+  <section>
+    <h2>Messages </h2>


Uneven spacing here as well.

crisbeto · 2017-08-17T21:05:16Z

src/demo-app/a11y/list/list-a11y.ts

+    }
+  ];
+
+  links: any[] = [


If you remove the any[] from these arrays, TS should be able to figure out the proper type.

crisbeto

LGTM

tinayuangao · 2017-08-17T21:43:56Z

Thanks for review.

Removed MdNavListCssMatStyler and MdListCssMatStyler.

jelbourn · 2017-08-17T21:44:40Z

src/lib/list/list.md

+### Accessibility
+By default, the list assumes that it will be used in a purely decorative fashion and thus sets no
+roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of <div>
+elements on the page. Any interactive content within the grid-list should be given an appropriate


This line still says grid-list

jelbourn · 2017-08-17T21:44:53Z

src/lib/list/list.md

+accessibility treatment based on the specific workflow of your application.
+
+If the list is used to present a list of non-interactive content items, then the list element should
+be given `role="list"` and each tile should be given `role="listitem"`.


tile -> list item

tinayuangao · 2017-08-17T21:51:33Z

Comments addressed. PTAL. Thanks!

jelbourn

LGTM

kara · 2017-08-21T20:40:17Z

@tinayuangao There looks like there might be a real unit test failure for list here: https://travis-ci.org/angular/material2/jobs/265757068

Can you take a look?

angular-automatic-lock-bot · 2019-09-07T01:02:49Z

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.}

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 9, 2017

tinayuangao requested a review from jelbourn August 9, 2017 00:46

tinayuangao added Accessibility This issue is related to accessibility (a11y) pr: needs review labels Aug 9, 2017

tinayuangao force-pushed the master branch from 2745835 to 2df9f8d Compare August 9, 2017 23:43

jelbourn reviewed Aug 16, 2017

View reviewed changes

tinayuangao requested review from crisbeto and kara as code owners August 17, 2017 20:26

tinayuangao force-pushed the master branch 2 times, most recently from 2b1e3f5 to 66b88c2 Compare August 17, 2017 20:33

kara approved these changes Aug 17, 2017

View reviewed changes

crisbeto approved these changes Aug 17, 2017

View reviewed changes

jelbourn reviewed Aug 17, 2017

View reviewed changes

tinayuangao force-pushed the master branch from 234ed81 to 3d74068 Compare August 17, 2017 21:50

jelbourn approved these changes Aug 17, 2017

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Aug 17, 2017

kara removed the action: merge The PR is ready for merge by the caretaker label Aug 21, 2017

kara assigned tinayuangao Aug 21, 2017

tinayuangao force-pushed the master branch 2 times, most recently from cec0398 to 65f82c3 Compare August 22, 2017 00:02

tinayuangao requested a review from amcdnl as a code owner August 22, 2017 00:02

tinayuangao force-pushed the master branch 2 times, most recently from f6cdcf0 to 44b53bf Compare August 28, 2017 17:35

tinayuangao added the action: merge The PR is ready for merge by the caretaker label Aug 29, 2017

tinayuangao force-pushed the master branch 2 times, most recently from 1453d17 to 8e2af31 Compare September 5, 2017 22:13

update version and change log to beta-11

dba1ca4

tinayuangao force-pushed the master branch from 8e2af31 to dba1ca4 Compare September 7, 2017 17:45

mmalerba merged commit ba2f498 into angular:master Sep 11, 2017

tinayuangao mentioned this pull request Sep 12, 2017

demo(list): Add accessibility demo page for list #7020

Merged

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 15, 2017

update version and change log to beta-11 (angular#6363)

58d9895

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

demo(list): Add accessibility demo page for list #6363

demo(list): Add accessibility demo page for list #6363

Uh oh!

Conversation

tinayuangao commented Aug 9, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kara left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tinayuangao commented Aug 17, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tinayuangao commented Aug 17, 2017

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

kara commented Aug 21, 2017

Uh oh!

angular-automatic-lock-bot bot commented Sep 7, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

crisbeto left a comment •

edited

Loading

crisbeto left a comment •

edited

Loading