From 314e7be2b1f2dfd6373e9efd4d65671e3062b9c7 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 22 Jan 2021 14:39:16 +0100
Subject: [PATCH] A11Y: improves search-in-options filter accessibility
 (#11809)

---
 .../components/search-advanced-options.hbs    | 66 +++++++++++--------
 .../stylesheets/common/base/discourse.scss    | 21 ++++++
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs b/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
index 0920c12f77..03b0a9a4d8 100644
--- a/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
@@ -60,59 +60,69 @@
 
 <div class="container advanced-search-topics-posts-group">
   <div class="control-group pull-left">
-    <label class="control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</label>
     <div class="controls">
-      {{#if currentUser}}
-        <section class="field">
-          <label>
+      <fieldset class="grouped-control">
+        <legend class="grouped-control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</legend>
+
+        {{#if currentUser}}
+          <div class="grouped-control-field">
             {{input
+              id="matching-title-only"
               type="checkbox"
               class="in-title"
               checked=searchedTerms.special.in.title
               click=(action "onChangeSearchTermForSpecialInTitle" value="target.checked")
             }}
-            {{i18n "search.advanced.filters.title"}}
-          </label>
-          <label>
+            <label for="matching-title-only">
+              {{i18n "search.advanced.filters.title"}}
+            </label>
+          </div>
+
+          <div class="grouped-control-field">
             {{input
+              id="matching-liked"
               type="checkbox"
               class="in-likes"
               checked=searchedTerms.special.in.likes
               click=(action "onChangeSearchTermForSpecialInLikes" value="target.checked")
             }}
-            {{i18n "search.advanced.filters.likes"}}
-          </label>
-          <label>
+            <label for="matching-liked">{{i18n "search.advanced.filters.likes"}}</label>
+          </div>
+
+          <div class="grouped-control-field">
             {{input
+              id="matching-in-messages"
               type="checkbox"
               class="in-private"
               checked=searchedTerms.special.in.personal
               click=(action "onChangeSearchTermForSpecialInPersonal" value="target.checked")
             }}
-            {{i18n "search.advanced.filters.private"}}
-          </label>
-          <label>
+            <label for="matching-in-messages">{{i18n "search.advanced.filters.private"}}</label>
+          </div>
+
+          <div class="grouped-control-field">
             {{input
+              id="matching-seen"
               type="checkbox"
               class="in-seen"
               checked=searchedTerms.special.in.seen
               click=(action "onChangeSearchTermForSpecialInSeen" value="target.checked")
             }}
-            {{i18n "search.advanced.filters.seen"}}
-          </label>
-        </section>
-      {{/if}}
-      {{combo-box
-        id="in"
-        valueProperty="value"
-        content=inOptions
-        value=searchedTerms.in
-        onChange=(action "onChangeSearchTermForIn")
-        options=(hash
-          none="user.locale.any"
-          clearable=true
-        )
-      }}
+            <label for="matching-seen">{{i18n "search.advanced.filters.seen"}}</label>
+          </div>
+        {{/if}}
+        {{combo-box
+          id="in"
+          valueProperty="value"
+          content=inOptions
+          value=searchedTerms.in
+          onChange=(action "onChangeSearchTermForIn")
+          options=(hash
+            none="user.locale.any"
+            clearable=true
+          )
+        }}
+      </fieldset>
     </div>
   </div>
   <div class="control-group pull-left">
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 9bdd3be77a..ebaeaa087d 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -859,3 +859,24 @@ table {
   z-index: z("max");
   color: var(--secondary);
 }
+
+.controls {
+  .grouped-control {
+    display: flex;
+    flex-direction: column;
+
+    .grouped-control-label {
+      padding: 0.25em 0;
+    }
+
+    .grouped-control-field {
+      flex: 1 0 auto;
+      display: flex;
+      padding-bottom: 0.25em;
+
+      label {
+        margin: 0;
+      }
+    }
+  }
+}