Commit 3f4619b6 authored by Naoki Fukino's avatar Naoki Fukino Committed by Commit Bot

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: default avatarNoel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798608}
parent 1de1e555
...@@ -3718,7 +3718,9 @@ files-toast { ...@@ -3718,7 +3718,9 @@ files-toast {
.file-type-filter-button { .file-type-filter-button {
align-items: center; 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; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
color: var(--google-grey-700); color: var(--google-grey-700);
...@@ -3728,15 +3730,46 @@ files-toast { ...@@ -3728,15 +3730,46 @@ files-toast {
height: 32px; height: 32px;
margin-inline-end: 3px; margin-inline-end: 3px;
margin-inline-start: 3px; margin-inline-start: 3px;
outline: none;
padding: 0 10px; padding: 0 10px;
} }
.file-type-filter-button.active { .file-type-filter-button.active {
background-color: var(--google-blue-50); background-color: rgba(var(--google-blue-600-rgb), 6%);
border: 1px solid transparent; border: 1px solid transparent;
color: var(--google-blue-600); 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 * Preventing FOUC
*/ */
......
...@@ -62,7 +62,8 @@ class FileTypeFiltersController { ...@@ -62,7 +62,8 @@ class FileTypeFiltersController {
* @private * @private
*/ */
createFilterButton_(label) { 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.textContent = label;
button.onclick = this.onFilterButtonClicked_.bind(this); button.onclick = this.onFilterButtonClicked_.bind(this);
return button; return button;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment