better form fieldset accessibility

lichess-org · Jun 28, 2024 · 1137219 · 1137219
1 parent 581565d
commit 1137219
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/modules/relay/src/main/ui/FormUi.scala b/modules/relay/src/main/ui/FormUi.scala
@@ -163,7 +163,7 @@ final class FormUi(helpers: Helpers, ui: RelayUi, tourUi: RelayTourUi):
             half = true
           )(form3.flatpickr(_, minDate = None))
         ),
-        form3.fieldset("Source")(cls := "box-pad")(
+        form3.fieldset("Source", toggle = true.some)(cls := "box-pad")(
           form3.group(
             form("syncSource"),
             "Where do the games come from?"
@@ -441,7 +441,7 @@ final class FormUi(helpers: Helpers, ui: RelayUi, tourUi: RelayTourUi):
           ),
         form3.fieldset(
           "Players & Teams",
-          toggle = (form("players").value.isDefined || form("teams").value.isDefined).some
+          toggle = List("players", "teams").exists(k => form(k).value.exists(_.nonEmpty)).some
         )(
           form3.split(
             form3.group(

diff --git a/modules/ui/src/main/helper/Form3.scala b/modules/ui/src/main/helper/Form3.scala
@@ -205,7 +205,7 @@ final class Form3(formHelper: FormHelper & I18nHelper, flairApi: FlairApi):
         "form-fieldset--toggle"     -> toggle.isDefined,
         "form-fieldset--toggle-off" -> toggle.has(false)
       )
-    )(st.legend(legend))
+    )(st.legend(toggle.map(_ => tabindex := 0))(legend))
 
   private val dataEnableTime = attr("data-enable-time")
   private val dataTime24h    = attr("data-time_24h")

diff --git a/ui/common/css/form/_form3.scss b/ui/common/css/form/_form3.scss
@@ -146,8 +146,10 @@ textarea.form-control {
   padding-top: 0;
   legend {
     border: $border;
+    background: none;
     &:hover {
       @extend %box-neat;
+      background: $c-bg-zebra;
     }
     &::after {
       content: '▼';

diff --git a/ui/site/src/boot.ts b/ui/site/src/boot.ts
@@ -115,8 +115,12 @@ export function boot() {
       el.setAttribute('content', el.getAttribute('content') + ',maximum-scale=1.0');
     }
 
-    $('.form-fieldset--toggle legend').on('click', function (this: HTMLElement) {
-      $(this).closest('.form-fieldset--toggle').toggleClass('form-fieldset--toggle-off');
+    $('.form-fieldset--toggle').each(function (this: HTMLFieldSetElement) {
+      const toggle = () => this.classList.toggle('form-fieldset--toggle-off');
+      $(this)
+        .find('legend')
+        .on('click', toggle)
+        .on('keypress', e => e.key == 'Enter' && toggle());
     });
 
     if (setBlind && !site.blindMode) setTimeout(() => $('#blind-mode button').trigger('click'), 1500);