mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 08:22:07 +02:00
Code Issues Projects Releases Wiki Activity

MDL-79059 mod_data: Fix presets accessibility issues

Browse Source 
* Add sr-only column headers for the select and actions columns.
* Define unique IDs for the preset name links using array indices.
* Label the radio buttons via aria-labelledby attribute pointing to
the ID of the preset's link.
This commit is contained in:
Jun Pataleta 2023-08-21 21:38:34 +08:00
parent 4adae8e489
commit bd76d860c0
No known key found for this signature in database
GPG Key ID: F83510526D99E2C7
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mod/data/classes/output/presets.php
View File

@ -86,7 +86,7 @@ class presets implements templatable, renderable {
*/
private function get_presets(renderer_base $output): array {
$presets = [];
foreach ($this->presets as $preset) {
foreach ($this->presets as $index => $preset) {
$presetname = $preset->name;
$userid = $preset instanceof preset ? $preset->get_userid() : $preset->userid;
if (!empty($userid)) {
@ -118,6 +118,7 @@ class presets implements templatable, renderable {
'description' => $preset->description,
'userid' => $userid,
'actions' => $actions,
'presetindex' => $index,
];
}

46
mod/data/templates/presets.mustache
View File

@ -35,7 +35,8 @@
"description": "Use this preset to collect images",
"userid": 0,
"url": "http://www.example.com",
"actions": []
"actions": [],
"presetindex": 0
},
{
"id": 2,
@ -45,7 +46,8 @@
"fullname": "Preset saved manually (admin)",
"userid": 2,
"url": "http://www.example.com",
"actions": []
"actions": [],
"presetindex": 1
}
]
}
@ -60,30 +62,34 @@
<table id="presets-list" class="generaltable fullwidth">
<thead>
<tr>
<th class="pl-4 border-top-0" scope="col" style="width: 3%"></th>
<th class="pl-4 border-top-0" scope="col" style="width: 3%">
<span class="sr-only">{{#str}}select{{/str}}</span>
</th>
<th class="pl-4 border-top-0" scope="col" style="width:30%">{{#str}} name {{/str}}</th>
<th class="pl-4 border-top-0" scope="col">{{#str}} description {{/str}}</th>
<th class="pl-4 border-top-0" scope="col" style="width: 3%"></th>
<th class="pl-4 border-top-0" scope="col" style="width: 3%">
<span class="sr-only">{{#str}}actions{{/str}}</span>
</th>
</tr>
</thead>
<tbody>
{{#presets}}
<tr>
<td class="p-4 border-right">
<input type="radio" name="fullname" value="{{userid}}/{{shortname}}" data-cmid="{{cmid}}" />
</td>
<td class="p-4">
<a href="{{{url}}}">{{fullname}}</a>
</td>
<td class="p-4">{{description}}</td>
<td class="p-4 preset_action_menu">
{{#actions}}
<div class="float-right">
{{>core/action_menu}}
</div>
{{/actions}}
</td>
</tr>
<tr>
<td class="p-4 border-right">
<input type="radio" name="fullname" value="{{userid}}/{{shortname}}" data-cmid="{{cmid}}" aria-labelledby="preset-name-{{presetindex}}" >
</td>
<td class="p-4">
<a id="preset-name-{{presetindex}}" href="{{{url}}}">{{fullname}}</a>
</td>
<td class="p-4">{{description}}</td>
<td class="p-4 preset_action_menu">
{{#actions}}
<div class="float-right">
{{>core/action_menu}}
</div>
{{/actions}}
</td>
</tr>
{{/presets}}
</tbody>
</table>