Accessibility stuff

This commit is contained in:
Hubert Van De Walle 2020-08-22 04:20:14 +02:00
parent 2ac02688ab
commit c800d22ccf
4 changed files with 14 additions and 8 deletions

View File

@ -20,7 +20,7 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
unsafe {
@Language("html")
val html = """
<div class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
<div aria-label="demo" class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
<div class="flex justify-between mb-4">
<h1 class="text-2xl underline">Notes</h1>
<span>
@ -29,7 +29,7 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
</span>
</div>
<form class="md:space-x-2" id="search">
<input name="search" disabled="" value="tag:&quot;demo&quot;">
<input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
<span id="buttons"><button disabled="">search</button><a href="#">clear</a></span>
</form>
<div class="overflow-x-auto">

View File

@ -38,7 +38,7 @@ class SettingView(staticFileResolver: StaticFileResolver) : View(staticFileResol
}
section(classes = "m-4 p-4 bg-gray-800 rounded") {
h2(classes = "mb-4 text-red-600 text-lg font-semibold") {
h2(classes = "mb-4 text-red-400 text-lg font-semibold") {
+"Delete my account"
}
@ -66,8 +66,13 @@ class SettingView(staticFileResolver: StaticFileResolver) : View(staticFileResol
error = validationErrors.find { it.dataPath == ".password" }?.message
)
checkBoxInput(name = "checked") {
id = "checked"
attributes["required"] = ""
+" Do you want to proceed ?"
label {
attributes["for"] = "checked"
+" Do you want to proceed ?"
}
}
button(
type = submit,

View File

@ -22,6 +22,7 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") {
id = "search"
input(name = "search") {
attributes["value"] = query
attributes["aria-label"] = "search"
}
span {
id = "buttons"

View File

@ -1,5 +1,5 @@
.btn {
@apply font-semibold py-2 px-4 rounded;
@apply font-bold py-2 px-4 rounded;
&:focus {
@apply outline-none shadow-outline;
@ -7,7 +7,7 @@
}
.btn-teal {
@apply bg-teal-500 text-white;
@apply bg-teal-400 text-gray-800;
&:focus {
@apply bg-teal-600;
@ -19,7 +19,7 @@
}
.btn-green {
@apply bg-green-500 text-white;
@apply bg-green-400 text-gray-800;
&:focus {
@apply bg-green-600;
@ -31,7 +31,7 @@
}
.btn-red {
@apply bg-red-500 text-white;
@apply bg-red-400 text-gray-800;
&:focus {
@apply bg-red-600;