Make file-type filter buttons accessible by keyboard.

This allows users to:
  - focus file-type filter buttons by TAB key.
  - toggle state of focused buttons by ENTER or SPACE keys.

To do this, we use <button> element instead of default <div> and style
them per the design, with html{.pointer-active,.focus-outline-visible}
style to control <button> state activations and keyboard focus rings.

And since <button> has in-built ARIA support, that comes for free too.

Bug: 1114721
Test: Manual test with flag #files-filters-in-recents.
Change-Id: Ib709f79d24ab8c3a41aabdae2be4cb237c1fad5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2358947
Commit-Queue: Naoki Fukino <fukino@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798608}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -3718,7 +3718,9 @@ files-toast {
 
 .file-type-filter-button {
   align-items: center;
-  border: 1px solid rgba(0, 0, 0, 15%);
+  /* don't use browser's default <button> background-color. */
+  background-color: unset;
+  border: 1px solid rgba(0, 0, 0, 10%);
   border-radius: 20px;
   box-sizing: border-box;
   color: var(--google-grey-700);
@@ -3728,15 +3730,46 @@ files-toast {
   height: 32px;
   margin-inline-end: 3px;
   margin-inline-start: 3px;
+  outline: none;
   padding: 0 10px;
 }
 
 .file-type-filter-button.active {
-  background-color: var(--google-blue-50);
+  background-color: rgba(var(--google-blue-600-rgb), 6%);
   border: 1px solid transparent;
   color: var(--google-blue-600);
 }
 
+.file-type-filter-button:not(:active):hover {
+  background-color: rgba(0, 0, 0, 4%);
+}
+
+.file-type-filter-button.active:not(:active):hover {
+  background-color: rgba(var(--google-blue-600-rgb), 10%);
+}
+
+html.pointer-active .file-type-filter-button:not(:active):hover {
+  background-color: unset;
+  cursor: default;
+}
+
+html.pointer-active .file-type-filter-button.active:not(:active):hover {
+  background-color: rgba(var(--google-blue-600-rgb), 6%);
+  cursor: default;
+}
+
+html.focus-outline-visible .file-type-filter-button:focus {
+  border: 1px solid var(--google-blue-600);
+}
+
+.file-type-filter-button:active {
+  background-color: rgba(0, 0, 0, 12%);
+}
+
+.file-type-filter-button.active:active {
+  background-color: rgba(var(--google-blue-600-rgb), 16%);
+}
+
 /*
  * Preventing FOUC
  */

ui/file_manager/file_manager/foreground/js/file_type_filters_controller.js

@@ -62,7 +62,8 @@ class FileTypeFiltersController {
    * @private
    */
   createFilterButton_(label) {
-    const button = util.createChild(this.container_, 'file-type-filter-button');
+    const button =
+        util.createChild(this.container_, 'file-type-filter-button', 'button');
     button.textContent = label;
     button.onclick = this.onFilterButtonClicked_.bind(this);
     return button;