Skip to content

demo(card): Add accessibility demo page for card #6358

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.

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

Merged
merged 2 commits into from
Aug 21, 2017

Conversation

tinayuangao
Copy link
Contributor

No description provided.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 8, 2017
@tinayuangao tinayuangao changed the title https://github.com/angular/material2/compare/master...tinayuangao:a11y-card?expand=1 demo(card): Add accessibility demo page for card Aug 8, 2017
@tinayuangao tinayuangao requested a review from jelbourn August 8, 2017 21:34
@tinayuangao tinayuangao added Accessibility This issue is related to accessibility (a11y) pr: needs review labels Aug 8, 2017
@tinayuangao tinayuangao force-pushed the a11y-card branch 3 times, most recently from b274185 to fad7589 Compare August 10, 2017 00:23
<section>
<h2>Husky</h2>
<p>Showing a card with title only</p>
<md-card class="example-card">
Copy link
Member

Choose a reason for hiding this comment

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

Should any of these <md-card> instances have role="group"?
(to line up with the docs https://material.angular.io/components/card/overview)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added another example with role="group"

<p>Showing a card with title, subtitle, and avatar as header and a card image.</p>
<md-card class="example-card">
<md-card-header>
<img md-card-avatar src="a11y/card/assets/dachshund-avatar.jpg" aria-label="Dachshund avatar">
Copy link
Member

Choose a reason for hiding this comment

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

Each image should have an alt

language. The breed is also known as the Alsatian in Britain and Ireland.
</md-card-content>
<md-card-actions>
Search for more dogs...
Copy link
Member

Choose a reason for hiding this comment

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

Will this be weird since there's not a real search?

@tinayuangao
Copy link
Contributor Author

Added another example for role="group" and removed the progress bar & fake search button. PTAL. Thanks!

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

@jelbourn 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 kara merged commit 215ff3c into angular:master Aug 21, 2017
@tinayuangao tinayuangao deleted the a11y-card branch March 9, 2018 23:30
@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.
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
Development

Successfully merging this pull request may close these issues.

4 participants