misc(treemap): set focus-visible styles for view mode buttons (#12495)

GoogleChrome · May 17, 2021 · 187809d · 187809d
1 parent 184c92c
commit 187809d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
@@ -640,17 +640,20 @@ function renderViewModeButtons(viewModes) {
     if (!viewMode.enabled) viewModeEl.classList.add('view-mode--disabled');
     viewModeEl.id = `view-mode--${viewMode.id}`;
 
-    const labelEl = TreemapUtil.createChildOf(viewModeEl, 'label');
-    TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__label').textContent = viewMode.label;
-    TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__sublabel lh-text-dim').textContent =
-      ` (${viewMode.subLabel})`;
-
-    const inputEl = TreemapUtil.createChildOf(labelEl, 'input', 'view-mode__button', {
+    const inputEl = TreemapUtil.createChildOf(viewModeEl, 'input', 'view-mode__button', {
+      id: `view-mode--${viewMode.id}__label`,
       type: 'radio',
       name: 'view-mode',
       disabled: viewMode.enabled ? undefined : '',
     });
 
+    const labelEl = TreemapUtil.createChildOf(viewModeEl, 'label', undefined, {
+      for: inputEl.id,
+    });
+    TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__label').textContent = viewMode.label;
+    TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__sublabel lh-text-dim').textContent =
+      ` (${viewMode.subLabel})`;
+
     inputEl.addEventListener('click', () => {
       treemapViewer.setViewMode(viewMode);
       treemapViewer.render();

diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
@@ -141,6 +141,9 @@ body {
   padding: 5px;
   font-size: 16px;
 }
+.view-mode input[type='radio']:focus-visible + label {
+  outline: -webkit-focus-ring-color auto 1px;
+}
 .view-mode--disabled {
   text-decoration: line-through;
 }