studio: some non descriptive icon titles are shown when hovering toolbar options

[donroyco]

Affected part of DeckDeckGo

• Studio

Reproduction

Steps to reproduce:

1. Go to editor.
2. Add one element (so you have Deck > Slide > Element).
3. Hover over toolbar options

Expected Behavior

To not see the titles or see a descriptive title.

Actual Behavior

A lot of icons have this.

Environment

<title> attribute would only be useful when they're descriptive. It might be good to minify all icon SVGs as well.

• Browser(s): Chrome, latest version
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[peterpeterparker]

Definitely. Moreover all icons are labeled in the root assets.json file. We "just" have to use these...

[peterpeterparker]

Thank you Roy!

[peterpeterparker]

@donroyco these kind of buttons are declared as following with an aria-label

<ion-tab-button aria-label="Toggle element type">
        <ion-icon src="/assets/icons/ionicons/color-wand.svg"></ion-icon>
        <ion-label>Transform</ion-label>
</ion-tab-button>

what would be your suggestion for a proper accessibility? should a title identical to the aria-label be added to the icon? Means for the element twice the information or "just" the title or else?

actually kind of a general question for all the buttons with icons of the application

[donroyco]

I think the buttons are correctly labeled, but the title inside the actual SVGs get triggered by hovering over them.

[peterpeterparker]

add a titleon the icon, if the button is already labelled, won't have a a11yn "bad" side effect right? like for screen reader?

if no, let's do that then

[donroyco]

Well, the main purpose of an aria-label on ion-tab-button is to give an understanding of what the button does (for screen readers). If you have that, plus you give the icon inside it a title, it will only make it less obvious what is going on. Because it could be trying to read both after each other.

Maybe this is then a good solution, also based on this article by Sara Soueidan (loosely based on Technique 3).

<ion-tab-button role aria-label="Transform element">
        <ion-icon src="/assets/icons/ionicons/color-wand.svg" aria-hidden="true"></ion-icon>
        <ion-label aria-hidden="true">Transform</ion-label>
</ion-tab-button>

[peterpeterparker]

not directly related but I should have solved the a11y of the toolbar and breadcrumbd in #832

next one the "select elements with tab" will probably be all the popover options, still todo

[peterpeterparker]

so good news, I've created a PR following your last suggestion with aria-hidden #833

bad news, ionicons can't handle currently such settings, see old issue ionic-team/ionicons#710

I should try to find more info about this

[peterpeterparker]

I have provided a PR to the Ionicons to support aria-hidden: ionic-team/ionicons#869