From d33e4ad9407591cc7287973b0f8da47cae396004 Mon Sep 17 00:00:00 2001 From: Manish Kumar Gupta Date: Thu, 29 Aug 2024 12:18:12 -0700 Subject: [PATCH] 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 | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css index dbe61e311c1..d4f5c104850 100644 --- a/xarray/static/css/style.css +++ b/xarray/static/css/style.css @@ -65,7 +65,7 @@ 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 { @@ -73,7 +73,8 @@ body.vscode-dark { } .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); }