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?= Date: Wed, 29 Mar 2023 13:45:02 +0300 Subject: [PATCH] Codehighlight fixes --- doc/accessibility/FormControlsDoc.vue | 8 ++++---- doc/accessibility/SemanticHTMLDoc.vue | 4 ++-- doc/accessibility/WAIAriaDoc.vue | 8 ++++---- doc/theming/CSSModulesDoc.vue | 2 +- doc/theming/PrimeFlexDoc.vue | 2 +- doc/theming/ScopedCSSDoc.vue | 2 +- doc/theming/SwitchThemesDoc.vue | 2 +- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/doc/accessibility/FormControlsDoc.vue b/doc/accessibility/FormControlsDoc.vue index 3eab18dd4..1df73df11 100644 --- a/doc/accessibility/FormControlsDoc.vue +++ b/doc/accessibility/FormControlsDoc.vue @@ -5,7 +5,7 @@ space key as well to trigger.

-

+    

 <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 @@
         
     
     
-    
+