mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-02 18:11:04 +08:00
Brian Cui
715c8c459f
This CL makes several improvements to the Infobar component. Most notably, action(s) can now be taken directly from the Infobar itself. Clients of the Infobar component can pass any number of action buttons during construction depending on the context. Infobar has three uses presently in DevTools; two of those use cases are actionable and have been upgraded with this new experience: - "Pretty print this minified file?" now has a "Pretty-print" button where users can directly pretty-print the file. - "This script is blackboxed in the debugger" now has an "Unblackbox" button, plus a "Configure" button that opens Blackboxing settings. The layout has been updated to reflow responsively for narrow window widths and high zoom. Accessibility considerations include: - Keyboard navigation: Infobar itself can now gain focus and be dismissed by pressing the Esc key. Pressing the Enter key will open the Learn More section. - Screen reader support: Infobar contents are read aloud in a natural and predictable fashion. The ARIA "alert" role is used on the Infobar text content. - High contrast support: Infobar text and buttons are visible in high contrast view. Note, the icons are not high-contrast compliant; HC icon updates throughout DevTools is a future task. Demo: https://i.imgur.com/kNjI4pA.gif Bug: 1056348 Change-Id: Id2e695af367fb8f5a1c489fa8d3d94c8974458fb Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1981175 Commit-Queue: Brian Cui <brcui@microsoft.com> Reviewed-by: Fabio Rocha <fabio.rocha@microsoft.com>
