From 67ef8cd8982a0c25b793c8a7ed03eaea9f08d76a Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Tue, 9 Jul 2019 10:52:23 -0700
Subject: [PATCH] =?UTF-8?q?Make=20the=20=E2=80=9C+=20More=E2=80=9D=20actio?=
 =?UTF-8?q?n=20for=20showing=20more=20filters/checkboxes=20keyboard=20acce?=
 =?UTF-8?q?ssible=20(#311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Convert '+ More' action to an accessible button tag

* Unset opinionated browser-level button styles

* 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
---
 .../src/MultiCheckboxFacet.js                     |  6 ++++--
 .../__snapshots__/MultiCheckboxFacet.test.js.snap | 12 ++++++++----
 .../components/_multi-checkbox-facet.scss         | 15 +++++++++++++++
 3 files changed, 27 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>
 `;
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..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
@@ -44,6 +44,21 @@
   @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;
+
+    &:hover,
+    &:focus {
+      background-color: $facetSelectBackground;
+      outline: $sizeXS solid $facetSelectBackground;
+    }
   }
 }