| commit | 3f5f19cd8c12aed58953b1dee86df858858d7000 | [log] [tgz] |
|---|---|---|
| author | Jeff Fisher <[email protected]> | Wed Aug 28 19:10:02 2019 |
| committer | Commit Bot <[email protected]> | Wed Aug 28 19:10:02 2019 |
| tree | c524ad0717807ae997676fb514d8c4eac1747c3c | |
| parent | 7d290dbd416fca3379aab9b17a97f42fc20de546 [diff] [blame] |
DevTools: add keyboard interactions to linkified nodes - Replace usage of 'title' in the DOMLinkifier and AuditsReportRenderer with 'tooltip'. This was a bug introduced during the initial DOMLinkifier refactor, see: https://crrev.com/a74a3fc0 - Refactor to pass the options into the Elements.DOMLinkifier.linkifyNodeReference instead of just the tooltip text, making it easier to extend and following the options config pattern. - DOM linkified nodes by default can take keyboard focus by giving them a tab index and link activation on 'Enter' key. - The nodes are also given the role of link for screen reader identification. - API consumers can-opt out of keyboard focus by providing the option {preventKeyboardFocus: true}; this is useful if link navigation is handled by a context menu. - Audits report nodes opt-in to keyboard focus. - Performance event log nodes opt-in to keyboard focus. - The following views are set to opt-out of keyboard focus to match their existing behavior as a migration strategy; these views can opt-in gradually: - AccessibilityNodeView - StylesSidebarPane This meets the following WCAG success criteria 1.3.1 Info and Relationships https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships 2.1.1 Keyboard https://www.w3.org/WAI/WCAG21/quickref/#keyboard 4.1.2 Name, Role, Value https://www.w3.org/WAI/WCAG21/quickref/#name-role-value Screenshot (Audits tooltip): https://i.imgur.com/zgQUHC3.png Screenshot (Audits Light Theme): https://i.imgur.com/2eB7pJ4.png Screenshot (Audits Dark Theme): https://i.imgur.com/VfEFbAF.png Screenshot (Performance Event Log): https://i.imgur.com/f9YcbC5.png of the accessibility audit details to view a linkified node. Test: Create an empty .html file, host it and run an accessibility audit, expand any Bug: 963183 Change-Id: Ibc3acd4eccf03f408087248b1389d0dd807d9443 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1750153 Reviewed-by: Pavel Feldman <[email protected]> Commit-Queue: Jeff Fisher <[email protected]> Cr-Original-Commit-Position: refs/heads/master@{#691276} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: c4f6092e42657a3b4544d70223b507fd39a4fd31
diff --git a/front_end/accessibility/AccessibilityNodeView.js b/front_end/accessibility/AccessibilityNodeView.js index a8991b0..28996aa 100644 --- a/front_end/accessibility/AccessibilityNodeView.js +++ b/front_end/accessibility/AccessibilityNodeView.js
@@ -508,7 +508,8 @@ valueElement = createElement('span'); element.appendChild(valueElement); this._deferredNode.resolvePromise().then(node => { - Common.Linkifier.linkify(node).then(linkfied => valueElement.appendChild(linkfied)); + Common.Linkifier.linkify(node, {preventKeyboardFocus: true}) + .then(linkfied => valueElement.appendChild(linkfied)); }); } else if (this._idref) { element.classList.add('invalid');
