[a11y] More accessible MultiCheckboxFacets (#319)

* ✨ Update MultiCheckboxFacet to use more screen reader accessible markup * 🎨 Update styling to unset fieldset/legend styles * ✅ Update test snapshots
elastic · Jul 9, 2019 · 728f386 · 728f386
1 parent eccaff7
commit 728f386
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/react-search-ui-views/src/MultiCheckboxFacet.js b/packages/react-search-ui-views/src/MultiCheckboxFacet.js
@@ -19,13 +19,13 @@ function MultiCheckboxFacet({
   searchPlaceholder
 }) {
   return (
-    <div
+    <fieldset
       className={appendClassName(
         "sui-multi-checkbox-facet sui-facet",
         className
       )}
     >
-      <div className="sui-multi-checkbox-facet__label">{label}</div>
+      <legend className="sui-multi-checkbox-facet__label">{label}</legend>
 
       {showSearch && (
         <div className="sui-facet-search">
@@ -91,7 +91,7 @@ function MultiCheckboxFacet({
           + More
         </button>
       )}
-    </div>
+    </fieldset>
   );
 }
 

diff --git a/packages/react-search-ui-views/src/__tests__/__snapshots__/MultiCheckboxFacet.test.js.snap b/packages/react-search-ui-views/src/__tests__/__snapshots__/MultiCheckboxFacet.test.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders 1`] = `
-<div
+<fieldset
   className="sui-multi-checkbox-facet sui-facet"
 >
-  <div
+  <legend
     className="sui-multi-checkbox-facet__label"
   >
     A Facet
-  </div>
+  </legend>
   <div
     className="sui-multi-checkbox-facet__options-list"
   >
@@ -75,18 +75,18 @@ exports[`renders 1`] = `
   >
     + More
   </button>
-</div>
+</fieldset>
 `;
 
 exports[`renders range filters 1`] = `
-<div
+<fieldset
   className="sui-multi-checkbox-facet sui-facet"
 >
-  <div
+  <legend
     className="sui-multi-checkbox-facet__label"
   >
     A Facet
-  </div>
+  </legend>
   <div
     className="sui-multi-checkbox-facet__options-list"
   >
@@ -153,5 +153,5 @@ exports[`renders range filters 1`] = `
   >
     + More
   </button>
-</div>
+</fieldset>
 `;
diff --git a/...eact-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss b/...eact-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
@@ -4,12 +4,18 @@
   font-size: 13px;
   display: flex;
   flex-direction: column;
+  // fieldset reset
+  margin: 0;
+  padding: 0;
+  border: 0;
 
   @include element("label") {
     font-size: $sizeM;
     color: $facetLabel;
     text-transform: uppercase;
     letter-spacing: 1px;
+    // legend reset
+    padding: 0;
   }
 
   @include element("options-list") {