Read later: Add keyboard navigation and enable selecting items with Enter/Space.

Allow tab/shift+tab to navigate through all elements in the UI. Let up/down arrows move focus between read later list items. Let right/left arrows cycle focus between a list item and its buttons. This behavior comes from discussion during a11y office hours.

Still TODO: add dark mode support for buttons and hover/focus states (crbug/1147457).

Bug: 1140166
Change-Id: I3a119e8d940a4307e746c10f3ded7541963f46f7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2527345
Commit-Queue: Caroline Rising <corising@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825964}

chrome/browser/resources/read_later/BUILD.gn

@@ -96,8 +96,10 @@ js_library("app") {
   deps = [
     ":read_later_api_proxy",
     ":read_later_item",
+    "//third_party/polymer/v3_0/components-chromium/iron-selector:iron-selector",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 
@@ -113,6 +115,7 @@ js_library("read_later_item") {
     ":read_later_api_proxy",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 

chrome/browser/resources/read_later/app.html

@@ -32,6 +32,14 @@
     overflow-y: auto;
   }
 
+  .mwb-list-item:focus-within {
+    background-color: var(--mwb-list-item-hover-background-color);
+  }
+
+  .mwb-list-item:active {
+    background-color: var(--mwb-list-item-selected-background-color);
+  }
+
   .sub-heading {
     align-items: center;
     border-bottom: 1px solid #dbdbdb;
@@ -52,14 +60,17 @@
   </cr-icon-button>
 </div>
 <div id="read-later-list">
-  <div class="sub-heading">$i18n{unreadHeader}</div>
-  <template id="ureadItemsList" is="dom-repeat" items="[[unreadItems_]]">
-    <read-later-item data-url$="[[item.url]]" class="mwb-list-item"
-        data="[[item]]"></read-later-item>
-  </template>
-  <div class="sub-heading">$i18n{readHeader}</div>
-  <template id="readItemsList" is="dom-repeat" items="[[readItems_]]">
-    <read-later-item data-url$="[[item.url]]" class="mwb-list-item"
-        data="[[item]]"></read-later-item>
-  </template>
+  <iron-selector id="selector" on-keydown="onItemKeyDown_"
+      attr-for-selected="data-url" selectable="read-later-item">
+    <div class="sub-heading">$i18n{unreadHeader}</div>
+    <template id="ureadItemsList" is="dom-repeat" items="[[unreadItems_]]">
+      <read-later-item data-url$="[[item.url.url]]" on-focus="onItemFocus_"
+          class="mwb-list-item" data="[[item]]" tabindex="0"></read-later-item>
+    </template>
+    <div class="sub-heading">$i18n{readHeader}</div>
+    <template id="readItemsList" is="dom-repeat" items="[[readItems_]]">
+      <read-later-item data-url$="[[item.url.url]]" on-focus="onItemFocus_"
+          class="mwb-list-item" data="[[item]]" tabindex="0"></read-later-item>
+    </template>
+  </iron-selector>
 </div>

chrome/browser/resources/read_later/app.js

@@ -6,12 +6,17 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/mwb_shared_style.js';
 import 'chrome://resources/cr_elements/mwb_shared_vars.js';
+import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 
+import {assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ReadLaterApiProxy, ReadLaterApiProxyImpl} from './read_later_api_proxy.js';
 import {ReadLaterItemElement} from './read_later_item.js';
 
+/** @type {!Set<string>} */
+const navigationKeys = new Set(['ArrowDown', 'ArrowUp']);
+
 export class ReadLaterAppElement extends PolymerElement {
   static get is() {
     return 'read-later-app';
@@ -76,6 +81,41 @@ export class ReadLaterAppElement extends PolymerElement {
     });
   }
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onItemKeyDown_(e) {
+    if (e.shiftKey || !navigationKeys.has(e.key)) {
+      return;
+    }
+    const selector = /** @type {!IronSelectorElement} */ (this.$.selector);
+    switch (e.key) {
+      case 'ArrowDown':
+        selector.selectNext();
+        /** @type {!ReadLaterItemElement} */ (selector.selectedItem).focus();
+        break;
+      case 'ArrowUp':
+        selector.selectPrevious();
+        /** @type {!ReadLaterItemElement} */ (selector.selectedItem).focus();
+        break;
+      default:
+        assertNotReached();
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onItemFocus_(e) {
+    this.$.selector.selected =
+        /** @type {!ReadLaterItemElement} */ (e.currentTarget).dataset.url;
+  }
+
   /**
    * @param {!Event} e
    * @private

chrome/browser/resources/read_later/read_later_item.html

 <style>
+  /* TODO(corising): Add dark mode support for buttons and hover/focus states
+   * (crbug/1147457).*/
+  :host(:focus) {
+    outline: none;
+  }
+
   .button-container {
     display: flex;
     margin-inline-start: calc(var(--mwb-icon-size) / 2);
@@ -6,7 +12,8 @@
     width: 0;
   }
 
-  :host(:hover) .button-container {
+  :host(:hover) .button-container,
+  :host(:focus-within) .button-container {
     overflow: visible;
     width: auto;
   }
@@ -44,7 +51,8 @@
     --cr-icon-button-margin-end: 0;
   }
 
-  :host(:hover) cr-icon-button {
+  :host(:hover) cr-icon-button,
+  :host(:focus-within) cr-icon-button {
     --cr-icon-button-fill-color: var(--google-grey-refresh-700);
   }
 
@@ -52,6 +60,10 @@
     background-color: rgba(var(--google-grey-900-rgb), .1);
   }
 
+  cr-icon-button:focus {
+    box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), 0.4);
+  }
+
   #deleteButton {
     margin-inline-start: calc(var(--cr-icon-button-size) / 2);
   }

chrome/browser/resources/read_later/read_later_item.js

@@ -9,10 +9,14 @@ import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './icons.js';
 
+import {assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ReadLaterApiProxy, ReadLaterApiProxyImpl} from './read_later_api_proxy.js';
 
+/** @type {!Set<string>} */
+const navigationKeys = new Set([' ', 'Enter', 'ArrowRight', 'ArrowLeft']);
+
 export class ReadLaterItemElement extends PolymerElement {
   static get is() {
     return 'read-later-item';
@@ -39,6 +43,7 @@ export class ReadLaterItemElement extends PolymerElement {
   ready() {
     super.ready();
     this.addEventListener('click', this.onClick_);
+    this.addEventListener('keydown', this.onKeyDown_.bind(this));
   }
 
   /** @private */
@@ -46,6 +51,45 @@ export class ReadLaterItemElement extends PolymerElement {
     this.apiProxy_.openSavedEntry(this.data.url);
   }
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onKeyDown_(e) {
+    if (e.shiftKey || !navigationKeys.has(e.key)) {
+      return;
+    }
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        this.onClick_();
+        break;
+      case 'ArrowRight':
+        if (!this.shadowRoot.activeElement) {
+          this.shadowRoot.getElementById('updateStatusButton').focus();
+        } else if (this.shadowRoot.activeElement.nextElementSibling) {
+          this.shadowRoot.activeElement.nextElementSibling.focus();
+        } else {
+          this.focus();
+        }
+        break;
+      case 'ArrowLeft':
+        if (!this.shadowRoot.activeElement) {
+          this.shadowRoot.getElementById('deleteButton').focus();
+        } else if (this.shadowRoot.activeElement.previousElementSibling) {
+          this.shadowRoot.activeElement.previousElementSibling.focus();
+        } else {
+          this.focus();
+        }
+        break;
+      default:
+        assertNotReached();
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   /**
    * @param {!Event} e
    * @private

chrome/test/data/webui/read_later/BUILD.gn

@@ -22,6 +22,7 @@ js_library("read_later_app_test") {
     ":test_read_later_api_proxy",
     "..:chai_assert",
     "//chrome/browser/resources/read_later:app",
+    "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }

chrome/test/data/webui/read_later/read_later_app_test.js

@@ -4,6 +4,7 @@
 
 import {ReadLaterAppElement} from 'chrome://read-later/app.js';
 import {ReadLaterApiProxy, ReadLaterApiProxyImpl} from 'chrome://read-later/read_later_api_proxy.js';
+import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 import {flushTasks} from '../test_util.m.js';
@@ -23,7 +24,7 @@ suite('ReadLaterAppTest', () => {
   function assertEntryURLs(items, urls) {
     assertEquals(urls.length, items.length);
     items.forEach((item, index) => {
-      assertEquals(urls[index], item.data.url);
+      assertEquals(urls[index], item.dataset.url);
     });
   }
 
@@ -43,7 +44,7 @@ suite('ReadLaterAppTest', () => {
       unreadEntries: [
         {
           title: 'Google',
-          url: 'https://www.google.com',
+          url: {url: 'https://www.google.com'},
           displayUrl: 'google.com',
           updateTime: 0,
           read: false,
@@ -51,7 +52,7 @@ suite('ReadLaterAppTest', () => {
         },
         {
           title: 'Apple',
-          url: 'https://www.apple.com',
+          url: {url: 'https://www.apple.com'},
           displayUrl: 'apple.com',
           updateTime: 0,
           read: false,
@@ -61,7 +62,7 @@ suite('ReadLaterAppTest', () => {
       readEntries: [
         {
           title: 'Bing',
-          url: 'https://www.bing.com',
+          url: {url: 'https://www.bing.com'},
           displayUrl: 'bing.com',
           updateTime: 0,
           read: true,
@@ -69,7 +70,7 @@ suite('ReadLaterAppTest', () => {
         },
         {
           title: 'Yahoo',
-          url: 'https://www.yahoo.com',
+          url: {url: 'https://www.yahoo.com'},
           displayUrl: 'yahoo.com',
           updateTime: 0,
           read: true,
@@ -105,7 +106,7 @@ suite('ReadLaterAppTest', () => {
     const expectedUrl = 'https://www.apple.com';
     clickItem(expectedUrl);
     const url = await testProxy.whenCalled('openSavedEntry');
-    assertEquals(url, expectedUrl);
+    assertEquals(url.url, expectedUrl);
   });
 
   test('Click on item mark as read button triggers actions', async () => {
@@ -117,7 +118,7 @@ suite('ReadLaterAppTest', () => {
         readLaterItem.shadowRoot.querySelector('#updateStatusButton');
     readLaterItemUpdateStatusButton.click();
     const [url, read] = await testProxy.whenCalled('updateReadStatus');
-    assertEquals(expectedUrl, url);
+    assertEquals(expectedUrl, url.url);
     assertTrue(read);
   });
 
@@ -130,7 +131,7 @@ suite('ReadLaterAppTest', () => {
         readLaterItem.shadowRoot.querySelector('#updateStatusButton');
     readLaterItemUpdateStatusButton.click();
     const [url, read] = await testProxy.whenCalled('updateReadStatus');
-    assertEquals(expectedUrl, url);
+    assertEquals(expectedUrl, url.url);
     assertFalse(read);
   });
 
@@ -143,7 +144,7 @@ suite('ReadLaterAppTest', () => {
         readLaterItem.shadowRoot.querySelector('#deleteButton');
     readLaterItemDeleteButton.click();
     const url = await testProxy.whenCalled('removeEntry');
-    assertEquals(expectedUrl, url);
+    assertEquals(expectedUrl, url.url);
   });
 
   test('Click on menu button triggers actions', async () => {
@@ -152,4 +153,83 @@ suite('ReadLaterAppTest', () => {
     readLaterCloseButton.click();
     await testProxy.whenCalled('closeUI');
   });
+
+  test('Enter key triggers action and passes correct url', async () => {
+    const expectedUrl = 'https://www.apple.com';
+    const readLaterItem = /** @type {!Element} */
+        (readLaterApp.shadowRoot.querySelector(`[data-url="${expectedUrl}"]`));
+
+    keyDownOn(readLaterItem, 0, [], 'Enter');
+    const url = await testProxy.whenCalled('openSavedEntry');
+    assertEquals(url.url, expectedUrl);
+  });
+
+  test('Space key triggers action and passes correct url', async () => {
+    const expectedUrl = 'https://www.apple.com';
+    const readLaterItem = /** @type {!Element} */
+        (readLaterApp.shadowRoot.querySelector(`[data-url="${expectedUrl}"]`));
+
+    keyDownOn(readLaterItem, 0, [], ' ');
+    const url = await testProxy.whenCalled('openSavedEntry');
+    assertEquals(url.url, expectedUrl);
+  });
+
+  test('Keyboard navigation abides by item list range boundaries', async () => {
+    const urls = [
+      'https://www.google.com', 'https://www.apple.com', 'https://www.bing.com',
+      'https://www.yahoo.com'
+    ];
+    const selector = readLaterApp.shadowRoot.querySelector('iron-selector');
+
+    // Select first item.
+    selector.selected =
+        readLaterApp.shadowRoot.querySelector('read-later-item').dataset.url;
+
+    keyDownOn(selector, 0, [], 'ArrowUp');
+    assertEquals(urls[3], selector.selected);
+
+    keyDownOn(selector, 0, [], 'ArrowDown');
+    assertEquals(urls[0], selector.selected);
+
+    keyDownOn(selector, 0, [], 'ArrowDown');
+    assertEquals(urls[1], selector.selected);
+
+    keyDownOn(selector, 0, [], 'ArrowUp');
+    assertEquals(urls[0], selector.selected);
+  });
+
+  test(
+      'Keyboard navigation left/right cycles through list item elements',
+      async () => {
+        const firstItem =
+            readLaterApp.shadowRoot.querySelector('read-later-item');
+        // Focus first item.
+        firstItem.focus();
+
+        keyDownOn(firstItem, 0, [], 'ArrowRight');
+        assertEquals(
+            firstItem.shadowRoot.getElementById('updateStatusButton'),
+            firstItem.shadowRoot.activeElement);
+
+        keyDownOn(firstItem, 0, [], 'ArrowRight');
+        assertEquals(
+            firstItem.shadowRoot.getElementById('deleteButton'),
+            firstItem.shadowRoot.activeElement);
+
+        keyDownOn(firstItem, 0, [], 'ArrowRight');
+        assertEquals(firstItem, readLaterApp.shadowRoot.activeElement);
+
+        keyDownOn(firstItem, 0, [], 'ArrowLeft');
+        assertEquals(
+            firstItem.shadowRoot.getElementById('deleteButton'),
+            firstItem.shadowRoot.activeElement);
+
+        keyDownOn(firstItem, 0, [], 'ArrowLeft');
+        assertEquals(
+            firstItem.shadowRoot.getElementById('updateStatusButton'),
+            firstItem.shadowRoot.activeElement);
+
+        keyDownOn(firstItem, 0, [], 'ArrowLeft');
+        assertEquals(firstItem, readLaterApp.shadowRoot.activeElement);
+      });
 });