From 1fce27abb7960caa5c29122dacf8425b82c38902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
+
<button @click="onButtonClick(event)">Click</button>
@@ -13,7 +13,7 @@
On the other hand, a fancy css based button using a div has no keyboard or screen reader support.
-
+
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
@@ -24,7 +24,7 @@
controls should be preferred.
-
+
<div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0">Click</div>
@@ -32,7 +32,7 @@
Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element.
-
+
<label for="myinput">Username:</label>
<input id="myinput" type="text" name="username" />
diff --git a/doc/accessibility/SemanticHTMLDoc.vue b/doc/accessibility/SemanticHTMLDoc.vue
index 5072bb749..d58ea3e6f 100644
--- a/doc/accessibility/SemanticHTMLDoc.vue
+++ b/doc/accessibility/SemanticHTMLDoc.vue
@@ -6,7 +6,7 @@
-
+
<div class="header">
<div class="header-text">Header</div>
</div>
@@ -29,7 +29,7 @@
Same layout can be achieved using the semantic elements with screen reader support built-in.
-
+
<header>
<h1>Header</h1>
</header>
diff --git a/doc/accessibility/WAIAriaDoc.vue b/doc/accessibility/WAIAriaDoc.vue
index 0957e828f..df8facc00 100644
--- a/doc/accessibility/WAIAriaDoc.vue
+++ b/doc/accessibility/WAIAriaDoc.vue
@@ -13,7 +13,7 @@
Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.
-
+
<input type="checkbox" value="Prime" name="ui" checked>
@@ -24,7 +24,7 @@
read by a reader.
-
+
<div class="fancy-checkbox">
<i class="checked-icon" v-if="checked"></i>
</div>
@@ -34,7 +34,7 @@
One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with for.
-
+
<span id="chk-label">Remember Me</span>
<div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
@click="toggle" @keydown="onKeyDown(event)">
@@ -50,7 +50,7 @@
that hides the elements from the user but not from the screen reader.
-
+
<label for="chkbox">Remember Me</label>
<div class="fancy-checkbox" @click="toggle">
<input class="p-sr-only" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index bee2c3402..51db35b32 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/doc/theming/CSSModulesDoc.vue
@@ -9,7 +9,7 @@
-
+