external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2026-03-02 15:34:48 +01:00
Code Issues Releases Wiki Activity

Accessibility: improve table semantics and ARIA usage

Browse Source
This commit is contained in:
timveld 2026-02-01 08:47:15 +01:00
parent 3b53bf5ae4
commit 852b23cbed
9 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
management/templates/aliases.html
View File

@ -77,10 +77,10 @@
<table id="alias_table" class="table" style="width: auto">
<thead>
<tr>
<th></th>
<th>Alias<br></th>
<th>Forwards To</th>
<th>Permitted Senders</th>
<th scope="col" aria-label="Actions"></th>
<th scope="col"> Alias<br></th>
<th scope="col"> Forwards To</th>
<th scope="col"> Permitted Senders</th>
</tr>
</thead>
<tbody>
@ -122,7 +122,9 @@
<h4 style="margin-bottom: 0">Verbs</h4>
<table class="table" style="margin-top: .5em">
<thead><th>Verb</th> <th>Action</th><th></th></thead>
<thead><tr>
<th scope="col"> Verb</th> <th scope="col"> Action</th><th scope="col"> </th>
</tr></thead>
<tr><td>GET</td><td><i>(none)</i></td> <td>Returns a list of existing mail aliases. Adding <code>?format=json</code> to the URL will give JSON-encoded results.</td></tr>
<tr><td>POST</td><td>/add</td> <td>Adds a new mail alias. Required POST-body parameters are <code>address</code> and <code>forwards_to</code>.</td></tr>
<tr><td>POST</td><td>/remove</td> <td>Removes a mail alias. Required POST-body parameter is <code>address</code>.</td></tr>
@ -153,7 +155,7 @@ function show_aliases() {
function(r) {
$('#alias_table tbody').html("");
for (var i = 0; i < r.length; i++) {
var hdr = $("<tr><th colspan='4' style='background-color: #EEE'></th></tr>");
var hdr = $("<tr><th role='heading' aria-level='4' colspan='4' style='background-color: #EEE'></th></tr>");
hdr.find('th').text(r[i].domain);
$('#alias_table tbody').append(hdr);

22
management/templates/custom-dns.html
View File

@ -64,12 +64,12 @@
<a href="#" onclick="window.miab_custom_dns_data_sort_order='created'; show_current_custom_dns_update_after_sort(); return false;">created</a>
</div>
<table id="custom-dns-current" class="table" style="width: auto; display: none; margin-top: 0;">
<thead>
<th>Domain Name</th>
<th>Record Type</th>
<th>Value</th>
<th></th>
</thead>
<thead><tr>
<th scope="col"> Domain Name</th>
<th scope="col"> Record Type</th>
<th scope="col"> Value</th>
<th scope="col" aria-label="Actions"></th>
</tr></thead>
<tbody>
<tr><td colspan="4">Loading...</td></tr>
</tbody>
@ -119,7 +119,9 @@
<h4>Verbs</h4>
<table class="table">
<thead><th>Verb</th> <th>Usage</th></thead>
<thead><tr
<th scope="col"> Verb</th> <th scope="col"> Usage</th>
</tr></thead>
<tr><td>GET</td> <td>Returns matching custom DNS records as a JSON array of objects. Each object has the keys <code>qname</code>, <code>rtype</code>, and <code>value</code>. The optional <code>qname</code> and <code>rtype</code> parameters in the request URL filter the records returned in the response. The request body (<code>-d "..."</code>) must be omitted.</td></tr>
<tr><td>PUT</td> <td>Sets a custom DNS record replacing any existing records with the same <code>qname</code> and <code>rtype</code>. Use PUT (instead of POST) when you only have one value for a <code>qname</code> and <code>rtype</code>, such as typical <code>A</code> records (without round-robin).</td></tr>
<tr><td>POST</td> <td>Adds a new custom DNS record. Use POST when you have multiple <code>TXT</code> records or round-robin <code>A</code> records. (PUT would delete previously added records.)</td></tr>
@ -129,7 +131,9 @@
<h4>Parameters</h4>
<table class="table">
<thead><th>Parameter</th> <th>Value</th></thead>
<thead><tr>
<th scope="col"> Parameter</th> <th scope="col"> Value</th>
</tr></thead>
<tr><td>email</td> <td>The email address of any administrative user here.</td></tr>
<tr><td>password</td> <td>That user&rsquo;s password.</td></tr>
<tr><td>qname</td> <td>The fully qualified domain name for the record you are trying to set. It must be one of the domain names or a subdomain of one of the domain names hosted on this box. (Add mail users or aliases to add new domains.)</td></tr>
@ -214,7 +218,7 @@ function show_current_custom_dns_update_after_sort() {
var last_zone = null;
for (var i = 0; i < data.length; i++) {
if (sort_key == "qname" && data[i].zone != last_zone) {
var r = $("<tr><th colspan=4 style='background-color: #EEE'></th></tr>");
var r = $("<tr><th role='heading' aria-level='4' colspan=4 style='background-color: #EEE'></th></tr>");
r.find("th").text(data[i].zone);
tbody.append(r);
last_zone = data[i].zone;

6
management/templates/external-dns.html
View File

@ -59,9 +59,9 @@
<table id="external_dns_settings" class="table">
<thead>
<tr>
<th>QName</th>
<th>Type</th>
<th>Value</th>
<th scope="col">QName</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>

22
management/templates/mail-guide.html
View File

@ -24,16 +24,16 @@
<table class="table">
<thead>
<tr><th>Option</th> <th>Value</th></tr>
<tr><th scope="col">Option</th> <th scope="col">Value</th></tr>
</thead>
<tr><th>Protocol/Method</th> <td>IMAP</td></tr>
<tr><th>Mail server</th> <td>{{hostname}}</td>
<tr><th>IMAP Port</th> <td>993</td></tr>
<tr><th>IMAP Security</th> <td>SSL or TLS</td></tr>
<tr><th>SMTP Port</th> <td>465</td></tr>
<tr><th>SMTP Security</td> <td>SSL or TLS</td></tr>
<tr><th>Username:</th> <td>Your whole email address.</td></tr>
<tr><th>Password:</th> <td>Your mail password.</td></tr>
<tr><th scope="row">Protocol/Method</th> <td>IMAP</td></tr>
<tr><th scope="row">Mail server</th> <td>{{hostname}}</td>
<tr><th scope="row">IMAP Port</th> <td>993</td></tr>
<tr><th scope="row">IMAP Security</th> <td>SSL or TLS</td></tr>
<tr><th scope="row">SMTP Port</th> <td>465</td></tr>
<tr><th scope="row">SMTP Security</td> <td>SSL or TLS</td></tr>
<tr><th scope="row">Username:</th> <td>Your whole email address.</td></tr>
<tr><th scope="row">Password:</th> <td>Your mail password.</td></tr>
</table>
<p>In addition to setting up your email, you&rsquo;ll also need to set up <a href="#sync_guide">contacts and calendar synchronization</a> separately.</p>
@ -45,8 +45,8 @@
<p>On iOS devices, devices on this <a href="https://github.com/Z-Hub/Z-Push/wiki/Compatibility">compatibility list</a>, or using Outlook 2007 or later on Windows 7 and later, you may set up your mail as an Exchange or ActiveSync server. However, we&rsquo;ve found this to be more buggy than using IMAP as described above. If you encounter any problems, please use the manual settings above.</p>
<table class="table">
<tr><th>Server</th> <td>{{hostname}}</td></tr>
<tr><th>Options</th> <td>Secure Connection</td></tr>
<tr><th scope="row">Server</th> <td>{{hostname}}</td></tr>
<tr><th scope="row">Options</th> <td>Secure Connection</td></tr>
</table>
<p>Your device should also provide a contacts list and calendar that syncs to this box when you use this method.</p>

8
management/templates/ssl.html
View File

@ -28,9 +28,9 @@
<table id="ssl_domains" class="table" style="margin-bottom: 2em; width: auto; display: none">
<thead>
<tr>
<th>Domain</th>
<th>Certificate Status</th>
<th>Actions</th>
<th scope="col">Domain</th>
<th scope="col">Certificate Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@ -101,7 +101,7 @@ function show_tls(keep_provisioning_shown) {
$('#ssldomain').html('<option value="">(select)</option>');
$('#ssl_domains').show();
for (var i = 0; i < domains.length; i++) {
var row = $("<tr><th class='domain'><a href=''></a></th><td class='status'></td> <td class='actions'><a href='#' onclick='return ssl_install(this);' class='btn btn-xs'>Install Certificate</a></td></tr>");
var row = $("<tr><th scope='row' class='domain'><a href=''></a></th><td class='status'></td> <td class='actions'><a href='#' onclick='return ssl_install(this);' class='btn btn-xs'>Install Certificate</a></td></tr>");
tb.append(row);
row.attr('data-domain', domains[i].domain);
row.find('.domain a').text(domains[i].domain);

8
management/templates/sync-guide.html
View File

@ -12,9 +12,9 @@
<p>You can edit your contacts and calendar from your web browser.</p>
<table class="table">
<thead><tr><th>For...</th> <th>Visit this URL</th></tr></thead>
<tr><th>Contacts</td> <td><a href="https://{{hostname}}/cloud/contacts">https://{{hostname}}/cloud/contacts</a></td></tr>
<tr><th>Calendar</td> <td><a href="https://{{hostname}}/cloud/calendar">https://{{hostname}}/cloud/calendar</a></td></tr>
<thead><tr><th scope="col">For...</th> <th scope="col">Visit this URL</th></tr></thead>
<tr><td>Contacts</td> <td><a href="https://{{hostname}}/cloud/contacts">https://{{hostname}}/cloud/contacts</a></td></tr>
<tr><td>Calendar</td> <td><a href="https://{{hostname}}/cloud/calendar">https://{{hostname}}/cloud/calendar</a></td></tr>
</table>
<p>Log in settings are the same as with <a href="#mail-guide">mail</a>: your
@ -29,7 +29,7 @@
<p>Otherwise, the app below can synchronize your contacts and calendar to your Android phone.</p>
<table class="table">
<thead><tr><th>Google Play</th> <th>F-Droid</th></tr></thead>
<thead><tr><th scope="col">Google Play</th> <th scope="col">F-Droid</th></tr></thead>
<tr><td><a href="https://play.google.com/store/apps/details?id=at.bitfire.davdroid">DAVx⁵</a> (paid)</td> <td><a href="https://f-droid.org/packages/at.bitfire.davdroid/">DAVx⁵</a> (free)</td></tr>
</table>

8
management/templates/system-backup.html
View File

@ -171,10 +171,10 @@
<table id="backup-status" class="table" style="width: auto">
<thead>
<th colspan="2">When</th>
<th>Type</th>
<th>Size</th>
<th>Deleted in...</th>
<th scope="col" colspan="2">When</th>
<th scope="col">Type</th>
<th scope="col">Size</th>
<th scope="col">Deleted in...</th>
</thead>
<tbody>
</tbody>

14
management/templates/users.html
View File

@ -46,11 +46,11 @@
<table id="user_table" class="table" style="width: auto">
<thead>
<tr>
<th width="35%">Email Address</th>
<th class="row-center">Size</th>
<th class="row-center">Used</th>
<th class="row-center">Quota</th>
<th>Actions</th>
<th scope="col" width="35%">Email Address</th>
<th scope="col" class="row-center">Size</th>
<th scope="col" class="row-center">Used</th>
<th scope="col" class="row-center">Quota</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@ -115,7 +115,7 @@
<h4 style="margin-bottom: 0">Verbs</h4>
<table class="table" style="margin-top: .5em">
<thead><th>Verb</th> <th>Action</th><th></th></thead>
<thead><th scope="col"> Verb</th> <th scope="col"> Action</th><th scope="col"> </th></thead>
<tr><td>GET</td><td><i>(none)</i></td> <td>Returns a list of existing mail users. Adding <code>?format=json</code> to the URL will give JSON-encoded results.</td></tr>
<tr>
<td>POST</td>
@ -171,7 +171,7 @@ function show_users() {
function(r) {
$('#user_table tbody').html("");
for (var i = 0; i < r.length; i++) {
var hdr = $("<tr><th colspan='6' style='background-color: #EEE'></th></tr>");
var hdr = $("<tr><th role='heading' aria-level='4' colspan='6' style='background-color: #EEE'></th></tr>");
hdr.find('th').text(r[i].domain);
$('#user_table tbody').append(hdr);

8
management/templates/web.html
View File

@ -23,9 +23,9 @@
<table id="web_domains_existing" class="table" style="margin-bottom: 1em; width: auto;">
<thead>
<tr>
<th>Site</th>
<th>Directory for Files</th>
<th/>
<th scope="col">Site</th>
<th scope="col">Directory for Files</th>
<th scope="col" aria-label="Actions"/>
</tr>
</thead>
<tbody>
@ -48,7 +48,7 @@ function show_web() {
tb.text('');
for (var i = 0; i < domains.length; i++) {
if (!domains[i].static_enabled) continue;
var row = $("<tr><th class='domain'><a href=''></a></th><td class='directory'><tt/></td> <td class='change-root hidden'><button class='btn btn-default btn-xs' onclick='show_change_web_root(this)'>Change</button></td></tr>");
var row = $("<tr><th scope='colgroup' class='domain'><a href=''></a></th><td class='directory'><tt/></td> <td class='change-root hidden'><button class='btn btn-default btn-xs' onclick='show_change_web_root(this)'>Change</button></td></tr>");
tb.append(row);
row.attr('data-domain', domains[i].domain);
row.attr('data-custom-web-root', domains[i].custom_root);