From a20c9fffe13c0e23eaec43b4692b1f1db51689d9 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 2 Jul 2019 14:33:37 -0700
Subject: [PATCH 1/3] Convert '+ More' action to an accessible button tag

---
 .../react-search-ui-views/src/MultiCheckboxFacet.js  |  6 ++++--
 .../__snapshots__/MultiCheckboxFacet.test.js.snap    | 12 ++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-search-ui-views/src/MultiCheckboxFacet.js b/packages/react-search-ui-views/src/MultiCheckboxFacet.js
index df8ed699..7931b8e5 100644
--- a/packages/react-search-ui-views/src/MultiCheckboxFacet.js
+++ b/packages/react-search-ui-views/src/MultiCheckboxFacet.js
@@ -82,12 +82,14 @@ function MultiCheckboxFacet({
       </div>
 
       {showMore && (
-        <div
+        <button
+          type="button"
           className="sui-multi-checkbox-facet__view-more"
           onClick={onMoreClick}
+          aria-label="Show more options"
         >
           + More
-        </div>
+        </button>
       )}
     </div>
   );
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
index 3233595a..84700cce 100644
--- 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
@@ -67,12 +67,14 @@ exports[`renders 1`] = `
       </span>
     </label>
   </div>
-  <div
+  <button
+    aria-label="Show more options"
     className="sui-multi-checkbox-facet__view-more"
     onClick={[MockFunction]}
+    type="button"
   >
     + More
-  </div>
+  </button>
 </div>
 `;
 
@@ -143,11 +145,13 @@ exports[`renders range filters 1`] = `
       </span>
     </label>
   </div>
-  <div
+  <button
+    aria-label="Show more options"
     className="sui-multi-checkbox-facet__view-more"
     onClick={[MockFunction]}
+    type="button"
   >
     + More
-  </div>
+  </button>
 </div>
 `;

From 0dfc88bf24e531d6f619e9e6bc57a2019b59e426 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 2 Jul 2019 14:35:15 -0700
Subject: [PATCH 2/3] Unset opinionated browser-level button styles

---
 .../reference-ui/components/_multi-checkbox-facet.scss   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss b/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
index 66514989..e658d11d 100644
--- a/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
+++ b/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
@@ -44,6 +44,15 @@
   @include element("view-more") {
     cursor: pointer;
     color: $linkColor;
+
+    // Button reset
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    text-align: left;
+    border: unset;
+    padding: unset;
+    background: unset;
   }
 }
 

From 46c74724460aef6d634633e25ce5053ecbb50278 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 2 Jul 2019 14:36:34 -0700
Subject: [PATCH 3/3] Add custom hover/focus styling - which overrides the
 default Chrome/browser-level focus ring, while still providing some UI
 indication/affordance to keyboard users tabbing through page

---
 .../reference-ui/components/_multi-checkbox-facet.scss      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss b/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
index e658d11d..fe0e5544 100644
--- a/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
+++ b/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss
@@ -53,6 +53,12 @@
     border: unset;
     padding: unset;
     background: unset;
+
+    &:hover,
+    &:focus {
+      background-color: $facetSelectBackground;
+      outline: $sizeXS solid $facetSelectBackground;
+    }
   }
 }