Apply aria-hidden to the font icon for the calendar button in the Date Picker Dialog Example

[OwenEdwards]

Apply aria-hidden to the font icon for the calendar button in the Date Picker Dialog Example, to avoid the possibility that it gets announced by screen readers

[mcking65]

There's an aria-label on the button so screen readers will not read any descendant content. If they do, there is a browser bug in the implementation of the accname spec.

It is advisable to avoid using aria-hidden except for in the rare circumstances where it is absolutely necessary.

[OwenEdwards]

@mcking65

There's an aria-label on the button so screen readers will not read any descendant content. If they do, there is a browser bug in the implementation of the accname spec.

That will work for the naming of the button when tabbing through the page, but will it hide the font icon from being read with the Virtual Cursor?

I see adding aria-hidden to a span with a font icon as very similar to including it on an <svg> element in this same situation, or including alt="" on an icon in an <img> element inside a button. Wouldn't this code be flagged as an a11y violation for not having an alt on the <img>?:

<button type="button"
  class="icon"
  aria-label="Choose Date">
  <img src="fa-calendar-alt.png">
</button>

[OwenEdwards]

@mcking65 you wrote:

It is advisable to avoid using aria-hidden except for in the rare circumstances where it is absolutely necessary.

Please clarify what you consider "absolutely necessary" - I have seen situations where font icon content is "read" by screen readers, and that seems like a situation where aria-hidden should be used, as an equivalent to alt="" on an img element. How is that not "absolutely necessary"?

[JAWS-test]

@OwenEdwards

If an icon would be part of the label according to Accname, but should not be, then it must be marked with aria-hidden=true (e.g. a link that contains text and icon and has no aria-label). But if according to Accname the content of the element does not contribute to the label anyway (because e.g. aria-label is present), then it does not matter if graphics are included (then also an img-graphic does not need an empty alt attribute).

[mcking65]

@OwenEdwards

I'm closing this because I believe we have concluded that aria-hidden is not necessary. If you disagree, please raise an issue where we can discuss the rationale for change.

Since the time when you submitted this PR, we restructured the repository. So, if we are going to make a change, it would need to be done with a new PR.