mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Jeff Fisher
3f5f19cd8c
- 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 <pfeldman@chromium.org> Commit-Queue: Jeff Fisher <jeffish@microsoft.com> Cr-Original-Commit-Position: refs/heads/master@{#691276} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: c4f6092e42657a3b4544d70223b507fd39a4fd31
28 lines
485 B
CSS
28 lines
485 B
CSS
/*
|
|
* Copyright 2018 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
display: inline;
|
|
}
|
|
|
|
.node-link {
|
|
cursor: pointer;
|
|
display: inline;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.node-link[data-keyboard-focus="true"]:focus {
|
|
outline-width: unset;
|
|
}
|
|
|
|
.node-label-name {
|
|
color: rgb(136, 18, 128);
|
|
}
|
|
|
|
.node-label-class, .node-label-pseudo {
|
|
color: rgb(153, 69, 0);
|
|
}
|