j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-10 04:06:47 +00:00
Code Issues Projects Releases Wiki Activity

fix(templates): icon-only buttons, selects and delete pages have accessible names

Browse source 
An accessibility scan (axe-core, WCAG 2 A/AA) of every page found 87
elements without a name. Icon-only buttons and links (the navbar's
administration menu on every page, the add/create buttons, the flavor
delete and back buttons) get a title, which is also their tooltip; the
labels of the language, architecture, chipset and filter selects point
at them; the memory bar is named. The shared delete confirmation page
had an empty <title> and heading, as no view passes "title": it says
"Delete <object>". The power-off form's aria-label was misspelled.
This commit is contained in:
catborise 2026-10-19 16:07:11 +03:00
parent ea7030d2a1
commit 64057f8d05
21 changed files with 28 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
instances/templates/allinstances_index_grouped.html
View file

@ -42,7 +42,7 @@
<td class="d-none d-sm-table-cell text-right">{{ compute.ram_size|filesizeformat }}</td>
<td>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.ram_usage }}%"
<div class="progress-bar bg-success" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
</div>
</div>

2
instances/templates/create_flav_block.html
View file

@ -2,7 +2,7 @@
{% load django_bootstrap5 %}
{% load bootstrap_icons %}
{% if request.user.is_superuser %}
<button href="#addFlavor" type="button" class="btn btn-success btn-header float-end" data-bs-toggle="modal">
<button href="#addFlavor" type="button" class="btn btn-success btn-header float-end" title="{% trans "Add New Flavor" %}" data-bs-toggle="modal">
<span aria-hidden="true">{% bs_icon 'plus'%} </span>
</button>

2
instances/templates/create_inst_block.html
View file

@ -1,6 +1,6 @@
{% load i18n %}
{% load bootstrap_icons %}
<a href="#AddInstance" type="button" class="btn btn-success btn-header float-end" data-bs-toggle="modal">
<a href="#AddInstance" type="button" class="btn btn-success btn-header float-end" title="{% trans "New Instance" %}" data-bs-toggle="modal">
<span aria-hidden="true">{% bs_icon 'plus-circle-fill'%} </span>
</a>

4
instances/templates/create_instance_w1.html
View file

@ -47,7 +47,7 @@
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="select_architecture">
<form method="post" role="form" aria-label="Select instance architecture form">{% csrf_token %}
<div class="row">
<label class="col-sm-3 col-form-label">{% trans "Architecture" %}</label>
<label class="col-sm-3 col-form-label" for="select_archs">{% trans "Architecture" %}</label>
<div class="col-sm-6">
<select class="form-select" id="select_archs" name="archs" onchange="get_machine_types({{ compute_id }}, value);">
{% for hpv in hypervisors %}
@ -57,7 +57,7 @@
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label">{% trans "Chipset" %}</label>
<label class="col-sm-3 col-form-label" for="select_chipset">{% trans "Chipset" %}</label>
<div class="col-sm-6">
<select class="form-select" id="select_chipset" name="chipset">
<!-- fill with script -->

6
instances/templates/create_instance_w2.html
View file

@ -41,7 +41,7 @@
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance create method">
<li class="nav-item" role="presentation">
<button class="nav-link float-end" data-bs-toggle="tab" data-bs-target="#" type="button" role="tab" aria-controls="go_compute" onclick="goto_compute()">
<button class="nav-link float-end" data-bs-toggle="tab" data-bs-target="#" type="button" role="tab" aria-controls="go_compute" title="{% trans "Back" %}" onclick="goto_compute()">
<span>{% bs_icon 'arrow-left'%} </span>
</button>
</li>
@ -299,14 +299,14 @@
</div>
</div>
</div>
<a data-bs-toggle="modal" href="#addVMflavor{{ forloop.counter }}" class="btn btn-sm btn-secondary">
<a data-bs-toggle="modal" href="#addVMflavor{{ forloop.counter }}" class="btn btn-sm btn-secondary" title="{% trans "Create Virtual Machine" %}">
<span >{% bs_icon 'plus'%} </span>
</a>
</td>
<td style="width:5px;">
<form action="{% url 'instances:flavor_delete' flavor.id %}" method="post" role="form" aria-label="Delete flavor form">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" name="delete_flavor" onclick="return confirm('{% trans "Are you sure?" %}')">
<button type="submit" class="btn btn-sm btn-secondary" name="delete_flavor" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</form>

2
instances/templates/instances/power_tab.html
View file

@ -63,7 +63,7 @@
{% if instance.status == 1 or instance.status == 2 %}
<div class="tab-pane tab-pane-bordered active" id="poweroff" role="tabpanel" aria-labelledby="poweroff-tab">
<p>{% trans "This action sends an ACPI shutdown signal to the instance." %}</p>
<form action="{% url 'instances:poweroff' instance.id %}" method="post" role="form" aria-label0="Power off instance form">
<form action="{% url 'instances:poweroff' instance.id %}" method="post" role="form" aria-label="Power off instance form">
{% csrf_token %}
<input type="submit" name="poweroff" class="btn btn-lg btn-success float-end" value="{% trans "Power Off" %}">
<div class="clearfix"></div>