Skip to content

Commit 2a72329

Browse files
fhelferthibsy
fhelfer
authored and
thibsy
committed
[FIX] #47063 UI: show Field\Rating options to assistive technologies. (ILIAS-eLearning#11018)
* Fixes https://mantis.ilias.de/view.php?id=47063 * Remove `aria-label` on the label element and show its content to assistive technologies only.
1 parent ce50c0b commit 2a72329

File tree

2 files changed

+14
-14
lines changed

2 files changed

+14
-14
lines changed

‎components/ILIAS/UI/src/templates/default/Input/tpl.rating.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414

1515
<!-- BEGIN scaleoption -->
1616
<input aria-describedby="{DESCRIPTION_ID}" type="radio" id="{OPT_ID}" name="{NAME}" value="{OPT_VALUE}" class="il-input-rating-scaleoption" {DISABLED}{SELECTED}/>
17-
<label class="glyphicon-star il-input-rating-star" for="{OPT_ID}" aria-label="{ARIALABEL}"></label>
17+
<label class="glyphicon-star il-input-rating-star" for="{OPT_ID}"><span class="sr-only">{ARIALABEL}</span></label>
1818
<!-- END scaleoption -->
1919
</div>
2020

2121
<!-- BEGIN scaleoption_neutral -->
2222
<div class="il-input-rating__none">
23-
<label for="{NEUTRAL_ID}" aria-label="{NEUTRAL_LABEL}">{NEUTRAL_LABEL}</label>
23+
<label for="{NEUTRAL_ID}">{NEUTRAL_LABEL}</label>
2424
<input aria-describedby="{NEUTRAL_DESCRIPTION_ID}" type="radio" id="{NEUTRAL_ID}" name="{NEUTRAL_NAME}" value="0" {DISABLED}{NEUTRAL_SELECTED}/>
2525
</div>
2626
<!-- END scaleoption_neutral -->

‎components/ILIAS/UI/tests/Component/Input/Field/RatingInputTest.php‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -70,22 +70,22 @@ public function testRatingRenderBasic(): void
7070
<div class="il-input-rating__stars" role="radiogroup">
7171
<div class="il-input-rating__options">
7272
<input aria-describedby="id_1_desc" type="radio" id="id_1-5" name="name_0" value="5" class="il-input-rating-scaleoption" />
73-
<label class="glyphicon-star il-input-rating-star" for="id_1-5" aria-label="5stars"></label>
73+
<label class="glyphicon-star il-input-rating-star" for="id_1-5"><span class="sr-only">5stars</span></label>
7474
7575
<input aria-describedby="id_1_desc" type="radio" id="id_1-4" name="name_0" value="4" class="il-input-rating-scaleoption" />
76-
<label class="glyphicon-star il-input-rating-star" for="id_1-4" aria-label="4stars"></label>
76+
<label class="glyphicon-star il-input-rating-star" for="id_1-4"><span class="sr-only">4stars</span></label>
7777
7878
<input aria-describedby="id_1_desc" type="radio" id="id_1-3" name="name_0" value="3" class="il-input-rating-scaleoption" />
79-
<label class="glyphicon-star il-input-rating-star" for="id_1-3" aria-label="3stars"></label>
79+
<label class="glyphicon-star il-input-rating-star" for="id_1-3"><span class="sr-only">3stars</span></label>
8080
8181
<input aria-describedby="id_1_desc" type="radio" id="id_1-2" name="name_0" value="2" class="il-input-rating-scaleoption" />
82-
<label class="glyphicon-star il-input-rating-star" for="id_1-2" aria-label="2stars"></label>
82+
<label class="glyphicon-star il-input-rating-star" for="id_1-2"><span class="sr-only">2stars</span></label>
8383
8484
<input aria-describedby="id_1_desc" type="radio" id="id_1-1" name="name_0" value="1" class="il-input-rating-scaleoption" />
85-
<label class="glyphicon-star il-input-rating-star" for="id_1-1" aria-label="1stars"></label>
85+
<label class="glyphicon-star il-input-rating-star" for="id_1-1"><span class="sr-only">1stars</span></label>
8686
</div>
8787
<div class="il-input-rating__none">
88-
<label for="id_1-0" aria-label="reset_stars">reset_stars</label>
88+
<label for="id_1-0">reset_stars</label>
8989
<input aria-describedby="id_1_desc" type="radio" id="id_1-0" name="name_0" value="0" checked="checked"/>
9090
</div>
9191
</div>
@@ -122,23 +122,23 @@ public function testRatingRenderFull(): void
122122
</div>
123123
124124
<input aria-describedby="id_1_desc" type="radio" id="id_1-5" name="name_0" value="5" class="il-input-rating-scaleoption" disabled="disabled"/>
125-
<label class="glyphicon-star il-input-rating-star" for="id_1-5" aria-label="5stars"></label>
125+
<label class="glyphicon-star il-input-rating-star" for="id_1-5"><span class="sr-only">5stars</span></label>
126126
127127
<input aria-describedby="id_1_desc" type="radio" id="id_1-4" name="name_0" value="4" class="il-input-rating-scaleoption" disabled="disabled" checked="checked"/>
128-
<label class="glyphicon-star il-input-rating-star" for="id_1-4" aria-label="4stars"></label>
128+
<label class="glyphicon-star il-input-rating-star" for="id_1-4"><span class="sr-only">4stars</span></label>
129129
130130
<input aria-describedby="id_1_desc" type="radio" id="id_1-3" name="name_0" value="3" class="il-input-rating-scaleoption" disabled="disabled"/>
131-
<label class="glyphicon-star il-input-rating-star" for="id_1-3" aria-label="3stars"></label>
131+
<label class="glyphicon-star il-input-rating-star" for="id_1-3"><span class="sr-only">3stars</span></label>
132132
133133
<input aria-describedby="id_1_desc" type="radio" id="id_1-2" name="name_0" value="2" class="il-input-rating-scaleoption" disabled="disabled"/>
134-
<label class="glyphicon-star il-input-rating-star" for="id_1-2" aria-label="2stars"></label>
134+
<label class="glyphicon-star il-input-rating-star" for="id_1-2"><span class="sr-only">2stars</span></label>
135135
136136
<input aria-describedby="id_1_desc" type="radio" id="id_1-1" name="name_0" value="1" class="il-input-rating-scaleoption" disabled="disabled"/>
137-
<label class="glyphicon-star il-input-rating-star" for="id_1-1" aria-label="1stars"></label>
137+
<label class="glyphicon-star il-input-rating-star" for="id_1-1"><span class="sr-only">1stars</span></label>
138138
</div>
139139
140140
<div class="il-input-rating__none">
141-
<label for="id_1-0" aria-label="reset_stars">reset_stars</label>
141+
<label for="id_1-0">reset_stars</label>
142142
<input aria-describedby="id_1_desc" type="radio" id="id_1-0" name="name_0" value="0" />
143143
</div>
144144

0 commit comments

Comments
 (0)