From ccd11ec207ca55dab7e83bd58fb5bc6e1e87fddd Mon Sep 17 00:00:00 2001 From: Songtao Xia Date: Tue, 12 May 2020 14:50:39 -0700 Subject: [PATCH] Add css rules for navigation buttons when focused in screencast. Accessibility issue: when using keyboard to navigate to navigation buttons (back, forward, and reload) in screencast, they are not focused. We noticed that when the focus is supposed to be on the said buttons, the button has focus but there is no visual indication. We add a css rule so that the focus is shown the same way as being hovered over. Image before: (from navigation url, use shift+tab, to reload or back buttons. Button does not show focus.) https://imgur.com/BXjJHmp Images after: (same as above, but the button has an outline color indicating focus) https://imgur.com/dixx9Vp Change-Id: Iac23a5a05065207f706c03f2c19ebd182e296085 CrBug: https://bugs.chromium.org/p/chromium/issues/detail?id=1081486 Change-Id: I4f77a42e09aaa65386fa5d49542e8725428d263c Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2197241 Reviewed-by: Shane Clifford Reviewed-by: Brandon Goddard Commit-Queue: Songtao Xia --- front_end/screencast/screencastView.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css index e07bac1239..7b3fa663bb 100644 --- a/front_end/screencast/screencastView.css +++ b/front_end/screencast/screencastView.css @@ -58,8 +58,9 @@ width: 23px; } -.screencast-navigation button:hover { - border-color: #ccc; +.screencast-navigation button:hover, +.screencast-navigation button:focus { + border-color: var(--accent-color-hover); } .screencast-navigation button:active {