Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

$mdAria.expect does not check for child aria-label attributes #567

Closed
marcysutton opened this issue Nov 7, 2014 · 1 comment
Closed
Assignees
Labels
a11y This issue is related to accessibility type: bug
Milestone

Comments

@marcysutton
Copy link
Contributor

A scenario has come up where $mdAria.expect('aria-label') throws an error where it shouldn't: when <md-icon> is nested inside of <md-button>, adding aria-label to the icon component still throws the error even though it has been made accessible. For example:

<md-button class="md-fab md-primary">
  <md-tooltip>
    Refresh
  </md-tooltip>
  <md-icon icon="/img/icons/ic_refresh_24px.svg" aria-label="Refresh"></md-icon>
</md-button>

In this example, even though <md-icon aria-label="Refresh"> provides an accessible text alternative, a console warning is thrown for <md-button>. Note: <md-tooltip> is not visible until :hover or :focus interaction so it does not contribute an accessible name.

$mdAria.expect() should also check for child aria-label attributes. The only catch is that the child element with aria-label must be visible and in the DOM.


An alternative approach would be to require alternative text as an attribute on <md-icon> and copy it into a child node as textContent. That would allow $mdAria.expect to work as-is. See separate issue for <md-icon>: #427

@marcysutton marcysutton added type: bug a11y This issue is related to accessibility labels Nov 7, 2014
@ThomasBurleson ThomasBurleson added this to the 0.7.0-rc1 milestone Nov 13, 2014
@ThomasBurleson
Copy link
Contributor

@marcysutton - I think the solution here is related to the #612

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants