Improved page accessibility

This commit is contained in:
Erik Thuning 2025-03-04 11:12:22 +01:00
parent c886a7b32c
commit d8dcbc6d6b
2 changed files with 35 additions and 13 deletions

@ -11,14 +11,15 @@
<body>
<header>
<h1>Your VPN Clients</h1>
<user id="banner-userid"></user>
<user id="banner-userid" aria-label="logged in as"></user>
</header>
<topbox>
<details class="instructions" open>
<summary>Instructions</summary>
<ol>
<li>
<a href="https://serviceportalen.su.se/sv-se/article/1319269" target="_blank">
<a href="https://serviceportalen.su.se/sv-se/article/1319269"
target="_blank">
Install WireGuard (opens in a new tab) on the client device.
</a>
</li>
@ -48,11 +49,11 @@
<placeholder>Your clients will be displayed here.</placeholder>
</configs>
<template id="display-config">
<config>
<config aria-label="client" role="landmark">
<a class="conffile" href="" download=""></a>
<date></date>
<name></name>
<description></description>
<date aria-label="creation date"></date>
<name role="heading" aria-label="client name"></name>
<description aria-label="client description"></description>
<data></data>
<qrcode></qrcode>
<footer>
@ -70,11 +71,19 @@
<template id="create-form">
<form>
<h3>Create new client</h3>
<input type="text" name="name" placeholder="Name" required/>
<textarea name="description" placeholder="Description"></textarea>
<label for="create-name">Name</label>
<input type="text"
id="create-name"
name="name"
placeholder="My laptop"
required/>
<label for="create-description">Description</label>
<textarea id="create-description"
name="description"
placeholder="The grey one"></textarea>
<footer>
<right>
<button class="save">Create</button>
<button class="save" type="submit">Create</button>
</right>
<left>
<button class="cancel">Cancel</button>
@ -85,12 +94,17 @@
<template id="update-form">
<form>
<h3>Edit a client</h3>
<input type="text" name="name" placeholder="Name"/>
<textarea name="description" placeholder="Description"></textarea>
<label for="edit-name">Name</label>
<input type="text"
id="edit-name"
name="name"
placeholder="My laptop"/>
<label for="edit-description">Description</label>
<textarea id="edit-description" name="description"></textarea>
<footer>
<right>
<button class="save">Save</button>
<button class="delete">Delete</button>
<button class="save" type="submit">Save</button>
<button class="delete" type="button">Delete</button>
</right>
<left>
<button class="cancel">Cancel</button>

@ -184,6 +184,14 @@ form {
flex-direction: column;
}
h3 {
margin-bottom: 0.2rem;
}
h3, label {
margin-top: 0.4rem;
}
input, textarea {
border: 2px solid #DADADA;
}