HAM/Berufsschule_HAM
1
0
Fork 1
mirror of https://github.com/LD-Reborn/Berufsschule_HAM.git synced 2025-12-20 06:51:55 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Improved screenreader based navigation for groups view

Browse Source
This commit is contained in:
LD-Reborn
2025-11-23 22:15:36 +01:00
parent 48f0eb0e7e
commit 2b62e930e1
2 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Resources/Views.Home.Groups.de.resx
View File

@@ -127,4 +127,10 @@
<data name="Error updating group" xml:space="preserve"> <data name="Error updating group" xml:space="preserve">
<value>Fehler beim Anpassen der Gruppe</value> <value>Fehler beim Anpassen der Gruppe</value>
</data> </data>
<data name="Yes" xml:space="preserve">
<value>Ja</value>
</data>
<data name="No" xml:space="preserve">
<value>Nein</value>
</data>
</root> </root>

46
src/Views/Home/Groups.cshtml
View File

@@ -38,13 +38,13 @@
foreach (GroupsTableViewModel groupTableViewModel in Model.GroupsTableViewModels) foreach (GroupsTableViewModel groupTableViewModel in Model.GroupsTableViewModels)
{ {
<tr> <tr>
<td class="text-center">@groupTableViewModel.Group</td> <td class="text-center" tabindex="0">@groupTableViewModel.Group</td>
<td class="text-center @(groupTableViewModel.CanInventorize ? "text-success" : "text-danger")">@(groupTableViewModel.CanInventorize ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanInventorize ? "text-success" : "text-danger")"><span class="visually-hidden">@T["inventorize"]</span>@(groupTableViewModel.CanInventorize ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageUsers ? "text-success" : "text-danger")">@(groupTableViewModel.CanManageUsers ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanManageUsers ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage users"]</span>@(groupTableViewModel.CanManageUsers ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageLocations ? "text-success" : "text-danger")">@(groupTableViewModel.CanManageLocations ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanManageLocations ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage locations"]</span>@(groupTableViewModel.CanManageLocations ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageAssets ? "text-success" : "text-danger")">@(groupTableViewModel.CanManageAssets ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanManageAssets ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage assets"]</span>@(groupTableViewModel.CanManageAssets ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageGroups ? "text-success" : "text-danger")">@(groupTableViewModel.CanManageGroups ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanManageGroups ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage groups"]</span>@(groupTableViewModel.CanManageGroups ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageSettings ? "text-success" : "text-danger")">@(groupTableViewModel.CanManageSettings ? "✓" : "✗")</td> <td class="text-center @(groupTableViewModel.CanManageSettings ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage settings"]</span>@(groupTableViewModel.CanManageSettings ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center"> <td class="text-center">
<div class="d-flex gap-2 justify-content-center"> <div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-warning btn-update" <button class="btn btn-sm btn-warning btn-update"
@@ -223,6 +223,9 @@
<script> <script>
const contentYes = `<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">@T["Yes"].Value</span>`;
const contentNo = `<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">@T["No"].Value</span>`;
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const createForm = document.getElementById('createGroupForm'); const createForm = document.getElementById('createGroupForm');
@@ -264,16 +267,15 @@
// Add the new group to the table // Add the new group to the table
const tableBody = document.querySelector('tbody'); const tableBody = document.querySelector('tbody');
const newRow = document.createElement('tr'); const newRow = document.createElement('tr');
newRow.innerHTML = ` newRow.innerHTML = `
<td style="text-align: center">${jsonData.DisplayName}</td> <td class="text-center" tabindex="0">${jsonData.DisplayName}</td>
<td class="text-center ${jsonData.Permissions.includes("CanInventorize") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanInventorize") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanInventorize") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["inventorize"]</span>${jsonData.Permissions.includes("CanInventorize") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageUsers") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanManageUsers") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanManageUsers") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage users"]</span>${jsonData.Permissions.includes("CanManageUsers") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageLocations") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanManageLocations") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanManageLocations") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage locations"]</span>${jsonData.Permissions.includes("CanManageLocations") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageAssets") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanManageAssets") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanManageAssets") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage assets"]</span>${jsonData.Permissions.includes("CanManageAssets") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageGroups") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanManageGroups") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanManageGroups") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage groups"]</span>${jsonData.Permissions.includes("CanManageGroups") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageSettings") ? "text-success" : "text-danger"}">${jsonData.Permissions.includes("CanManageSettings") ? "✓" : "✗"}</td> <td class="text-center ${jsonData.Permissions.includes("CanManageSettings") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage settings"]</span>${jsonData.Permissions.includes("CanManageSettings") ? contentYes : contentNo}</td>
<td style="text-align: center"> <td class="text-center">
<div class="d-flex gap-2 justify-content-center"> <div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-warning btn-update" <button class="btn btn-sm btn-warning btn-update"
data-group-id="${jsonData.Cn}" data-group-id="${jsonData.Cn}"
@@ -462,12 +464,12 @@ document.addEventListener('DOMContentLoaded', () => {
.find(r => r.querySelector(`[data-group-id="${jsonData.Cn}"]`)); .find(r => r.querySelector(`[data-group-id="${jsonData.Cn}"]`));
if (row) { if (row) {
row.children[0].textContent = jsonData.Description.DisplayName || ''; row.children[0].textContent = jsonData.Description.DisplayName || '';
row.children[1].textContent = jsonData.Description.Permissions.includes("CanInventorize") ? "✓" : "✗" || ''; row.children[1].innerHTML = `<span class="visually-hidden">@T["inventorize"]</span>` + (jsonData.Description.Permissions.includes("CanInventorize") ? contentYes : contentNo || '');
row.children[2].textContent = jsonData.Description.Permissions.includes("CanManageUsers") ? "✓" : "✗" || ''; row.children[2].innerHTML = `<span class="visually-hidden">@T["manage users"]</span>` + (jsonData.Description.Permissions.includes("CanManageUsers") ? contentYes : contentNo || '');
row.children[3].textContent = jsonData.Description.Permissions.includes("CanManageLocations") ? "✓" : "✗" || ''; row.children[3].innerHTML = `<span class="visually-hidden">@T["manage locations"]</span>` + (jsonData.Description.Permissions.includes("CanManageLocations") ? contentYes : contentNo || '');
row.children[4].textContent = jsonData.Description.Permissions.includes("CanManageAssets") ? "✓" : "✗" || ''; row.children[4].innerHTML = `<span class="visually-hidden">@T["manage assets"]</span>` + (jsonData.Description.Permissions.includes("CanManageAssets") ? contentYes : contentNo || '');
row.children[5].textContent = jsonData.Description.Permissions.includes("CanManageGroups") ? "✓" : "✗" || ''; row.children[5].innerHTML = `<span class="visually-hidden">@T["manage groups"]</span>` + (jsonData.Description.Permissions.includes("CanManageGroups") ? contentYes : contentNo || '');
row.children[6].textContent = jsonData.Description.Permissions.includes("CanManageSettings") ? "✓" : "✗" || ''; row.children[6].innerHTML = `<span class="visually-hidden">@T["manage settings"]</span>` + (jsonData.Description.Permissions.includes("CanManageSettings") ? contentYes : contentNo || '');
if (jsonData.Description.Permissions.includes("CanInventorize")) { if (jsonData.Description.Permissions.includes("CanInventorize")) {
row.children[1].className = "text-center text-success"; row.children[1].className = "text-center text-success";
} else { } else {