Accessibility: Add keyboard handling for XArray HTML view

cypress/e2e/explorer/url_state.cy.js

@@ -88,7 +88,9 @@ describe("URL state is loaded to Explorer", () => {
     cy.get("[title='Show oldest results first']").should("have.class", "is-checked");
   });
 
-  it("can specify a custom searchid", () => {
+  // There is a problem with /mosaic/<searchid>/info path, likely caused by update
+  // of titiler. https://github.com/microsoft/PlanetaryComputerDataCatalog/issues/476
+  it.skip("can specify a custom searchid", () => {
     cy.intercept("/api/stac/v1/collections/sentinel-2-l2a").as("getS2");
     cy.intercept("/api/data/v1/mosaic/info?collection=sentinel-2-l2a").as(
       "getS2mosaic"

scripts/cibuild

@@ -12,12 +12,12 @@ if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
     if [[ "${1:-}" == "--help" ]]; then
         usage
     else
-        docker-compose \
+        docker compose \
             -f docker-compose.yml \
             run --rm --no-deps app \
             npm run build
 
-        docker-compose \
+        docker compose \
             -f docker-compose.yml \
             run --rm --no-deps app \
             cp staticwebapp.config.json build/

scripts/clean

@@ -12,6 +12,6 @@ if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
     if [[ "${1:-}" == "--help" ]]; then
         usage
     else
-        docker-compose run --rm --entrypoint ./scripts/clean etl
+        docker compose run --rm --entrypoint ./scripts/clean etl
     fi
 fi

scripts/format

@@ -10,8 +10,8 @@ Run formatters on python and JS files
 
 function run() {
 
-    docker-compose run --rm --no-deps api black --check .
-    docker-compose run --rm --no-deps app npm run format-fix
+    docker compose run --rm --no-deps api black --check .
+    docker compose run --rm --no-deps app npm run format-fix
 }
 
 if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then

scripts/mockstac

@@ -12,6 +12,6 @@ if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
     if [[ "${1:-}" == "--help" ]]; then
         usage
     else
-        docker-compose up mockstac && docker-compose rm -fs
+        docker compose up mockstac && docker-compose rm -fs
     fi
 fi

scripts/server

@@ -13,8 +13,8 @@ if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
     if [[ "${1:-}" == "--help" ]]; then
         usage
     elif [[ "${1:-}" == "--api" ]]; then
-        docker-compose up app api
+        docker compose up app api
     else
-        docker-compose up app
+        docker compose up app
     fi
 fi

scripts/test

@@ -12,15 +12,15 @@ if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
     if [[ "${1:-}" == "--help" ]]; then
         usage
     else
-        docker-compose \
+        docker compose \
             run --rm --no-deps app \
             npm run lint
 
-        docker-compose \
+        docker compose \
             run --rm --no-deps app \
             npm run format
 
-        docker-compose \
+        docker compose \
             run --rm --no-deps \
             -e CI="${CI}" \
             app \

scripts/update

@@ -14,16 +14,16 @@ Options:
 function run() {
 
     # Install JS dependencies on host
-    docker-compose \
+    docker compose \
         -f docker-compose.yml \
         run --rm --no-deps app \
         npm install
 
     # Ensure container images are current
-    docker-compose build
+    docker compose build
 
     # Run etl to build documentation and external notebook/md files
-    docker-compose run --rm --no-deps etl "${params[@]}"
+    docker compose run --rm --no-deps etl "${params[@]}"
 }
 
 params=()

src/utils/index.ts

@@ -151,6 +151,41 @@ export const a11yPostProcessDom = (dom: Document) => {
     el.setAttribute("tabindex", "0");
   });
 
+  // Begin: Keyboard navigation for xarray
+  // The html display of xarray objects is not keyboard accessible. This
+  // style does few things. It makes the input hidden checkbox elements
+  // used to create the expand-collapse mecchanism render in DOM and focusable
+  var style = `
+  .xr-section-item input:focus +label {
+    border: 2px solid var(--xr-font-color0);
+  }
+
+  .xr-section-item input {
+    opacity: 0;
+  }
+  `;
+  // Add the style to the DOM
+  var styleElement = document.createElement("style");
+  styleElement.textContent = style;
+  dom
+    .querySelector(".xr-wrap")
+    ?.insertBefore(styleElement, dom.querySelector(".xr-header"));
+
+  // Add role=checkbox to the xr-section-summary labels
+  dom.querySelectorAll("label.xr-section-summary").forEach(el => {
+    el.setAttribute("role", "checkbox");
+  });
+  // Make the opaque checkbox focusable by changing the display style
+  dom.querySelectorAll(".xr-section-item input").forEach(el => {
+    (el as HTMLElement).style.display = "inline-block";
+  });
+  // The xr-sections grid layout will now have 8 columns (2 for hidden checkboxes)
+  dom.querySelectorAll(".xr-sections").forEach(el => {
+    (el as HTMLElement).style.gridTemplateColumns =
+      "150px auto auto 1fr 0 20px 0 20px";
+  });
+  // End: Keyboard navigation for xarray
+
   // <p> tags with role="heading" need an aria-level attribute
   dom
     .querySelectorAll("p[role=heading]")