Updated accessibility for boolean selector

microsoft · Aug 20, 2024 · afa2328 · afa2328
1 parent ab82642
commit afa2328
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 37 deletions.
diff --git a/src/EventLogExpert/Shared/Components/BooleanSelect.razor b/src/EventLogExpert/Shared/Components/BooleanSelect.razor
@@ -2,9 +2,9 @@
 @inherits BaseComponent<bool>
 
 <div aria-label="@AriaLabel" class="toggle" role="radiogroup">
-    <input aria-label="@DisabledString" checked="@(!Value)" id="@Id false" name="@Id" @onchange="UpdateValue" type="radio" value="false" />
-    <label data-single-color="@IsSingleColor.ToString().ToLower()" for="@Id false" @onkeydown="ToggleValue" tabindex="0">@DisabledString</label>
+    <input checked="@(!Value)" id="@Id false" name="@Id" @onchange="UpdateValue" type="radio" value="false" />
+    <label data-single-color="@IsSingleColor.ToString().ToLower()" for="@Id false">@DisabledString</label>
 
-    <input aria-label="@EnabledString" checked="@(Value)" id="@Id true" name="@Id" @onchange="UpdateValue" type="radio" value="true" />
-    <label data-single-color="@IsSingleColor.ToString().ToLower()" for="@Id true" @onkeydown="ToggleValue" tabindex="0">@EnabledString</label>
+    <input checked="@(Value)" id="@Id true" name="@Id" @onchange="UpdateValue" type="radio" value="true" />
+    <label data-single-color="@IsSingleColor.ToString().ToLower()" for="@Id true">@EnabledString</label>
 </div>
diff --git a/src/EventLogExpert/Shared/Components/BooleanSelect.razor.cs b/src/EventLogExpert/Shared/Components/BooleanSelect.razor.cs
@@ -3,7 +3,6 @@
 
 using EventLogExpert.Shared.Base;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
 
 namespace EventLogExpert.Shared.Components;
 
@@ -19,18 +18,6 @@ public sealed partial class BooleanSelect : BaseComponent<bool>
 
     [Parameter] public bool IsSingleColor { get; set; }
 
-    private async Task ToggleValue(KeyboardEventArgs args)
-    {
-        switch (args)
-        {
-            case { Code: "Space" or "Enter" }:
-                Value = !Value;
-                await ValueChanged.InvokeAsync(Value);
-
-                break;
-        }
-    }
-
     private async Task UpdateValue(ChangeEventArgs args)
     {
         if (!bool.TryParse(args.Value?.ToString(), out bool value)) { return; }

diff --git a/src/EventLogExpert/Shared/Components/BooleanSelect.razor.css b/src/EventLogExpert/Shared/Components/BooleanSelect.razor.css
@@ -1,15 +1,15 @@
 .toggle {
     display: flex;
-    overflow: hidden;
     margin-left: 5px;
 }
 
 .toggle input {
     position: absolute !important;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    width: 1px;
-    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px !important;
+    width: 1px !important;
+    border: 0 !important;
+    padding: 0 !important;
     overflow: hidden;
 }
 
@@ -27,27 +27,19 @@
     min-width: 4rem;
 }
 
-.toggle label:hover { cursor: pointer; }
-
-.toggle input:checked + label:first-of-type {
-    background-color: var(--clr-red);
-    box-shadow: none;
-    color: var(--clr-black);
+.toggle label:first-of-type { border-radius: 4px 0 0 4px; }
 
-    &[data-single-color="true"] {
-        background-color: var(--clr-lightblue);
-        color: var(--clr-black);
-    }
-}
+.toggle label:last-of-type { border-radius: 0 4px 4px 0; }
 
-.toggle input:checked + label:last-of-type {
-    background-color: var(--clr-green);
+.toggle input:checked + label {
     box-shadow: none;
     color: var(--clr-black);
 
     &[data-single-color="true"] { background-color: var(--clr-lightblue); }
 }
 
-.toggle label:first-of-type { border-radius: 4px 0 0 4px; }
+.toggle input:checked + label:first-of-type { background-color: var(--clr-red); }
 
-.toggle label:last-of-type { border-radius: 0 4px 4px 0; }
+.toggle input:checked + label:last-of-type { background-color: var(--clr-green); }
+
+.toggle input:focus + label { border: 1px solid var(--clr-white); }