Accessibility: Add keyboard handling for XArray HTML view (#9412)

The default html view generated via XArray uses hidden checkboxes to achieve collapse expand behaviour.
This PR -
Makes the hidden checkboxes visible with 0 opacity , to make them accessible via keyboard
Make style changes to associated labels for focus, to highlight where the keyboard focus is
Change the grid layout to account for the invisible checkboxes

xarray/static/css/style.css

@@ -65,15 +65,16 @@ body.vscode-dark {
 .xr-sections {
   padding-left: 0 !important;
   display: grid;
-  grid-template-columns: 150px auto auto 1fr 20px 20px;
+  grid-template-columns: 150px auto auto 1fr 0 20px 0 20px;
 }
 
 .xr-section-item {
   display: contents;
 }
 
 .xr-section-item input {
-  display: none;
+  display: inline-block;
+  opacity: 0;
 }
 
 .xr-section-item input + label {
@@ -85,6 +86,10 @@ body.vscode-dark {
   color: var(--xr-font-color2);
 }
 
+.xr-section-item input:focus + label {
+  border: 2px solid var(--xr-font-color0);
+}
+
 .xr-section-item input:enabled + label:hover {
   color: var(--xr-font-color0);
 }