From d8b934bd43f9246d3fe789264a45d56556a039fa Mon Sep 17 00:00:00 2001 From: Manish Kumar Gupta Date: Wed, 28 Aug 2024 21:26:15 -0700 Subject: [PATCH] Accessibility: Add keyboard handling for XArray HTML view 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); }