🚀 Feature: Wert-Wechsel des "role" Attributes im <kol-icon> <i> Element

[ghost]

Goals

1. Wechsel von role="img" zu role="presentation" beim Element in allen Fällen oder mindestens im Zusammenhang mit anderen fokussierbaren Elementen ( in , etc.)

Non-Goals

No response

Background

Siehe Mattermost Unterhaltung

Bezüglich dieses Problems kam es mindestens schon in zwei Projekten zu Bemängelung durch BITV.
Falls Zugriffsrechte fehlen hier eine Kopie.

Ich erwecke hier gerade nochmal diese Unterhaltung von den Toten, da ich gerade vor einen sehr ähnlichen Problem stehe. BITIV ist scharf auf einen alt text für die kol-icons IN kol-buttons.

Allerdings Frage ich mich ja ob diese Anforderungen a) Sinn macht und b) Wenn ja, wie man dieser den tatsächlich nachkommen soll?

Ich kopiere mal meine Recherche/Gedanken, die ich auch an unsere Projekt-Afo geschrieben habe. Ich hoffe das ich da letztendlich auch mal ein ein Statement von BITV bekommen.

Wie man sieht werden die KoliBri-Icons, welchen laut BITIV ein alt-text beigefügt werden soll, in einen i-Element mit den attribute aria-hidden="true" dargestellt.

Da dem i-Element aber die role="img" zugeteilt wird benötigt es allerdings dennoch, wie ein normales img-Element. einen alt text. Da das Element aufgrund von aria-hidden aber Screenreader nicht vorgelesen wird erübrigt sich eigentlich die Notwendigkeit eines alt texts.

Zumindest laut diesem Artikel hier ist es aber dennoch empfehlenswert ein leeres alt-attribute hinzuzufügen. Allerdings handelt es sich nicht um ein ein img-Element sondern um ein i-Element mit role="img". Also kommt das alt attribute nicht in Frage.

Und laut diesem Artikel zumindest sollte solch ein dekoratives Bild, welches ohne die Seiten-Funktionalität zu beeinträchtigen entfernt werde könnte, anstatt der role="img" die role="presentation" oder role="none" erhalten.

Proposal

Umsetzung wäre sehr simpel. Denke hier gibt es nicht viel zu sagen.

[deleonio]

Das KolIcon sollte i.d.R. ein beschreibendes Label besitzen, sodass es, wie beim Image, immer ein Alt-Text hat. Daher ist das Property _label auch ein Pflicht-Property.

Wichtig zu wissen ist, dass KolIcon sehr häufig in anderen KoliBri-Komponenten als Begleit-Icons wiederverwendet werden, wo aber die Komponente z.B. KolButton schon ein klares Label besitzt. Hier sind die KolIcons i.d.R. nur Schmuck-Icons und erfordern kein eigenes Label. Somit setzen wir hier aria-hidden="true". Ob die Rolle dann img oder presentation oder none ist, sollte ggf. egal sein. Oder?

[ghost]

Persönlich sehe ich auch keinen Grund hier weiter etwas anzupassen, da aria-hidden="true" das innere KolIcon eigentlich verschleiern sollte.

Natürlich sollte ein Element mit role="img" theoretisch immer einen alt-text besitzen. Das wäre in dem Fall hier tatsächlich aber eher unsinnig. Mit der role="presentation" fällt dieser Bedingung jedoch, ohne großen Aufwand, weg.

Es ist eine Kleinigkeit, eine Grauzone, welche aber mehrere Stunden Analyse und Diskussion im Projekt ZASTER gekostet hat.
Ich würde das gerne anderen Projekten ersparen.

[ghost]

Ich bin heute zufällig auf die wunderbare, aber nicht so klar dokumentiere, Möglichkeit gestoßen _icons ein KoliBriCustomIcon übergeben zu können, welchen man ein label und ein sogar style übergeben kann.

Dies wahr immens hilfreich als es darum ging Warndreick-Icon in Links im Seitenmenü und den Tab-Einträgen für BITV schmackhaft zu machen.

Dann habe ich mich wieder an die Problematik hier erinnert. Es erscheint mir jetzt tatsächlich sehr sinnig dem icon, wenn es kein label besitzt und somit mittels aria-hidden="true" die Rolle eines dekorativen Elements annimmt die dafür gedacht role="presentation" zu verpassen. Denn vergleichsweise ist die role="img" sehr Wichtig bei der Nutzung eines KoliBriCustomIcon mit Label, da dieses relevant für Screenreader ist und auch nicht mehr aria-hidden ist.

[deleonio]

Hi @CaJaeItz,

ich erstelle ein Ticket im Backlog, die folgendes umsetzt:

aria-hidden	aria-label	role
true	string	presentation
false	undefined	img

Passt das so?

[deleonio]

Its merged.