Skip to content

Commit

Permalink
fixes checkbox issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongund
jongund committed Jul 11, 2023
1 parent da7a5e4 commit 38323e3
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 27 deletions.
6 changes: 3 additions & 3 deletions content/patterns/listbox/examples/css/listbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,15 @@
outline: 2px solid currentcolor;
}

.move-right-btn span.icon::after {
.move-right-btn span.checkmark::after {
content: " →";
}

.move-left-btn span.icon::before {
.move-left-btn span.checkmark::before {
content: "← ";
}

[role="option"][aria-selected="true"] span.icon::before {
[role="option"][aria-selected="true"] span.checkmark::before {
position: absolute;
left: 0.5em;
content: "✓";
Expand Down
48 changes: 24 additions & 24 deletions content/patterns/listbox/examples/listbox-rearrangeable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,35 +63,35 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
role="listbox"
aria-labelledby="ss_imp_l">
<li id="ss_opt1" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of public K-12 schools
</li>
<li id="ss_opt2" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of child-friendly parks</li>
<li id="ss_opt3" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of grocery shopping</li>
<li id="ss_opt4" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of fast food</li>
<li id="ss_opt5" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of fine dining</li>
<li id="ss_opt6" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Neighborhood walkability</li>
<li id="ss_opt7" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Availability of public transit</li>
<li id="ss_opt8" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Proximity of hospital and medical services</li>
<li id="ss_opt9" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Level of traffic noise</li>
<li id="ss_opt10" role="option">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Access to major highways</li>
</ul>
<div role="toolbar" aria-label="Actions" class="toolbar">
Expand All @@ -116,7 +116,7 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
tabindex="-1"
aria-keyshortcuts="Alt+ArrowRight Delete"
aria-disabled="true">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Not Important
</button>
</div>
Expand All @@ -133,7 +133,7 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
class="move-left-btn"
aria-keyshortcuts="Alt+ArrowLeft Enter"
aria-disabled="true">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Important
</button>
</div>
Expand All @@ -159,43 +159,43 @@ <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
aria-labelledby="ms_av_l"
aria-multiselectable="true">
<li id="ms_opt1" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Leather seats
</li>
<li id="ms_opt2" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Front seat warmers
</li>
<li id="ms_opt3" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Rear bucket seats
</li>
<li id="ms_opt4" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Rear seat warmers
</li>
<li id="ms_opt5" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Front sun roof
</li>
<li id="ms_opt6" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Rear sun roof
</li>
<li id="ms_opt7" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Cloaking capability
</li>
<li id="ms_opt8" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Food synthesizer
</li>
<li id="ms_opt9" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Advanced waste recycling system
</li>
<li id="ms_opt10" role="option" aria-selected="false">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Turbo vertical take-off capability
</li>
</ul>
Expand All @@ -204,7 +204,7 @@ <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
class="move-right-btn"
aria-keyshortcuts="Alt+ArrowRight Enter"
aria-disabled="true">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Add
</button>
</div>
Expand All @@ -222,7 +222,7 @@ <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
class="move-left-btn"
aria-keyshortcuts="Alt+ArrowLeft Delete"
aria-disabled="true">
<span class="icon" aria-hidden="true"></span>
<span class="checkmark" aria-hidden="true"></span>
Remove
</button>
</div>
Expand Down

0 comments on commit 38323e3

Please sign in to comment.