Fixed #5727 - Removed utility classes

This commit is contained in:
Cagatay Civici 2024-05-13 17:02:20 +03:00
parent caa55a3f9f
commit 45c4fe79bb
32 changed files with 93 additions and 175 deletions

View file

@ -46,14 +46,14 @@
<div class="doc-section-description mt-3">
<p>
However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
<i>p-sr-only</i>
<i>p-hidden-accessible</i>
that hides the elements from the user but not from the screen reader.
</p>
</div>
<pre v-code><code>
&lt;label for="chkbox"&gt;Remember Me&lt;/label&gt;
&lt;div class="fancy-checkbox" @click="toggle"&gt;
&lt;input class="p-sr-only" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
&lt;input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
@keydown="onKeyDown(event)"&gt;
&lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
&lt;/div&gt;