Aria label being forced always

[zonakusu]

Hi everyone :)

I have a small issue regarding accessibility using ion-button and ion-icon. While using this in combination my screen reader always reads both, even if I'm using aria-hidden on an element.

For me, the most semantic would be to see the ion-button to be the element which is read by the screen reader, while the ion-icon is ignored.

Problem though, is that the aria-label is being forced, regardless if I set ariaLabel to false, null or empty, or when using aria-hidden. Cause for this behaviour if the following block of code.

Of course I love the default aria-label in terms of accessibility, however I would like to control it just a little bit better :)

I would like to create a PR enabling to either not set a default aria-label or disabling aria-label by setting the aria-hidden. My suggestion would be using [ariaLabel]="null" since it would not introduce a new binding.

What do you guys think? Agree with my thoughts? Please spare no comments :)

[peterpeterparker]

I have provided a PR #869

[peterpeterparker]

PR has been merged, I think this issue can now be closed. No label will be generated automatically if aria-hidden will be used, as for example:

<ion-icon name="cellular" aria-hidden="true"></ion-icon>

[chriszuercher]

I tried setting aria-hidden="true" on all ion-icon but the SVG label is still generated and shown using version 5.5.1. Also adding an aria-label to the icons is not working. Is there something else to do? The behaviour changed between 5.5 and 5.1.0 (in 5.1 there was no text generated). But I need one icon of 5.5 so downgrad is not really an option.

We are using ion-icons in an asp.net core application with the following script include:

<script type="module" src="~/lib/ionicons/ionicons/ionicons.esm.js"></script>
 <script nomodule src="~/lib/ionicons/ionicons/ionicons.min.js"></script>

The icons are added like this (this is the one missing in 5.1):
<ion-icon name="id-card-outline" class="icon contact float-left mr-4 md hydrated" aria-hidden="true"></ion-icon>

[peterpeterparker]

What do you mean with "the SVG label" ?

Your example is correct, with aria-hidden set to true no aria-label is automatically generated.

From the index.html example of the project:

<ion-icon name="cellular"></ion-icon>

output -> <ion-icon name="cellular" role="img" class="ios hydrated" aria-label="cellular"></ion-icon>

<ion-icon name="cellular" aria-label="Mobile data"></ion-icon>

output -> <ion-icon name="cellular" aria-label="Mobile data" role="img" class="ios hydrated"></ion-icon>

<ion-icon name="cellular" aria-hidden="true"></ion-icon>

output -> <ion-icon name="cellular" aria-hidden="true" role="img" class="ios hydrated"></ion-icon>

all good to me.

[MicheleLucini-infobit]

aria-hidden="true" will prevent the aria-label of the <ion-icon /> to appear but the svg shadowroot in the tag <ion-icon /> still has the tag title that appear on hover

[MicheleLucini-infobit]

[MicheleLucini-infobit]

Current workaround 😖

ion-icon {
  pointer-events: none;
}

[peterpeterparker]

MDN Web Docs

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.

As for example

<p aria-hidden="true" title="hello">
  Some things are better left unsaid.
</p>

will display "hello" on hover too.

[MicheleLucini-infobit]

Maybe i'm in the wrong thread,
I don't want the <title>Ellipsis Vertical</title> to show on hover, how can i prevent that?

[MicheleLucini-infobit]

I'm using ionicon 5.5.1 and my react code is the following <ion-icon name={icon} class={'${btnIcon} mg-r-${iconTextMargin}'} aria-hidden="true" title="" />

[peterpeterparker]

@MicheleLucini-infobit so yes, I think too that your issue has not to do with OP's issue aka wrong thread. This one seems more related -> #949.

Then you workaround is alright. Another one would be to download / adding the icon to your project and removing the title from the svg.

Might be worth to submit a dedicated PR or issue.