Improved page accessibility
This commit is contained in:
parent
c886a7b32c
commit
d8dcbc6d6b
public
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user