mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-11 01:42:34 +00:00
Fixed #5727 - Removed utility classes
This commit is contained in:
parent
caa55a3f9f
commit
45c4fe79bb
32 changed files with 93 additions and 175 deletions
|
@ -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>
|
||||
<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"
|
||||
<input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
|
||||
@keydown="onKeyDown(event)">
|
||||
<i class="checked-icon" v-if="checked"></i>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue