-
Notifications
You must be signed in to change notification settings - Fork 3.4k
[a11y] aria-hidden/aria-label on <md-icon> inside of button is ignored with ligature icon #7376
Comments
To clarify: the button's aria-label is currently
when it should just be |
@calebegg @topherfangio I know what you mean, but it is quite difficult to walk through all children and concat the right strings together. Do you have any other thoughts / or suggestions, instead of iterating through all child elements? |
@devversion Where is this happening? I'm having trouble tracking down the code. My first thought would simply be: if the element has |
Why do we need to do this generated aria-label thing at all? Do screenreaders not just read the children of the button by default? Chromevox seems to. I feel like even if they don't, this is enough of an edge case that it's best to just require users of the library to put their own aria-label on there if they want something other than the default screenreader behavior. Trying to walk the children to create our own label seems fraught. |
@calebegg Indeed; it looks like you can just set Perhaps this just needs some docs in the icon/button pages to help guide users? |
I also can't find it, but it has to be somewhere -- how else would the aria-label on my example get added? I did find this test for it:
But github's search is awful, so it's hard to find anything. I could set the aria-label manually, but my point is that I shouldn't have to override some crummy behavior from the system generating the aria-label for buttons. |
@topherfangio I'm not sure, how the browser is building the When we filter for |
Finally tracked it down; this is happening in the It simply uses the jQuery/jQlite version of @devversion I agree that iterating over all children may cause a significant performance penalty, so it may be something we wish to avoid. After a bit of thought, the only semi-sane idea I've come up with is to have the icon watch the
Either way, the extra functionality could only be run if we detect the special class so that the performance hit is reduced to this particular instance. Thoughts? |
@topherfangio I like the second approach. It may be much faster than a plain iteration and also gives us a very easy way to handle a11y texts. |
@devversion Cool; you want to give it a go and see if it works like we think? 😄 |
@topherfangio Yes definitely, will do that and let you know 😄 |
* $mdAria is currently just using `textContent` for retrieving the `aria-label`. This is not valid, since some child-texts can be hidden in aria (`aria-hidden="true") * Using a TreeWalker is super elegant and performant. The current use of the TreeWalker is supported by all browser we support. Fixes angular#7376
* $mdAria is currently just using `textContent` for retrieving the `aria-label`. This is not valid, since some child-texts can be hidden in aria (`aria-hidden="true") * Using a TreeWalker is super elegant and performant. The current use of the TreeWalker is supported by all browser we support. Fixes angular#7376
* $mdAria is currently just using `textContent` for retrieving the `aria-label`. This is not valid, since some child-texts can be hidden in aria (`aria-hidden="true") * Using a TreeWalker is super elegant and performant. The current use of the TreeWalker is supported by all browser we support. Fixes angular#7376 Closes angular#7957
See demo:
http://codepen.io/anon/pen/mPJOMX?editors=1000
I want to hide the gear icon entirely from screen readers, as it doesn't add anything. But
aria-hidden="true"
andaria-label=""
don't work. The only thing that works is a non-empty, non-whitespace aria-label. But I don't want the icon to have any label; I just want it ignored, and for the label for the button to just be "Options"The text was updated successfully, but these errors were encountered: