Make the “+ More” action for showing more filters/checkboxes keyboard…

… accessible (#311)

* 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

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>
   );

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>
 `;

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;
+    }
   }
 }