[selectionbar] Add cancel selection button focus ring

Adds a blue focus ring around the cancel selection button only when it's
being focused from keyboard interaction.

Sets width of the cancel selection button to match the width of buttons
on the action bar.

Bug: 1068079, 1065837
Change-Id: I2adad00e74dbf1a8515b4dabbdcc704c51aa8e0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2139054Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756971}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -1045,13 +1045,19 @@ body.check-select #files-selected-label {
 
 /* TODO(adanilo) document the calc() reason. */
 body.files-ng #cancel-selection-button {
+  border: 1px solid transparent;
   margin-inline-start: calc(10px + 1px);
+  width: 36px;
 }
 
-#cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
+body:not(.files-ng) #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
   background-color: rgba(153, 153, 153, 20%);
 }
 
+html.focus-outline-visible body.files-ng #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
+  border: 1px solid var(--google-blue-600);
+}
+
 body:not(.files-ng) #cancel-selection-button > span {
   display: inline-block;
   font-weight: 500;