From 5d67e4c11fcc5c283161b061d8627b6d9f3a5120 Mon Sep 17 00:00:00 2001 From: Manish Kumar Gupta Date: Tue, 27 Aug 2024 12:14:05 -0700 Subject: [PATCH 1/2] Accessibility: Add keyboard handling for XArray HTML view (#474) * Add keyboard handling for XArray view * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Update docker-compose to "docker compose" * Prettify * Update index.ts * Prettify :-( * Disable broken test --- cypress/e2e/explorer/url_state.cy.js | 4 +++- scripts/cibuild | 4 ++-- scripts/clean | 2 +- scripts/format | 4 ++-- scripts/mockstac | 2 +- scripts/server | 4 ++-- scripts/test | 6 ++--- scripts/update | 6 ++--- src/utils/index.ts | 35 ++++++++++++++++++++++++++++ 9 files changed, 52 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/explorer/url_state.cy.js b/cypress/e2e/explorer/url_state.cy.js index 02d84deb..c0f2c559 100644 --- a/cypress/e2e/explorer/url_state.cy.js +++ b/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//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" diff --git a/scripts/cibuild b/scripts/cibuild index f768a38f..9da7260c 100755 --- a/scripts/cibuild +++ b/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/ diff --git a/scripts/clean b/scripts/clean index 4c7928ea..1938164b 100755 --- a/scripts/clean +++ b/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 diff --git a/scripts/format b/scripts/format index 32c2b75a..57e23ae0 100755 --- a/scripts/format +++ b/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 diff --git a/scripts/mockstac b/scripts/mockstac index c9017ca8..3cc9bcae 100755 --- a/scripts/mockstac +++ b/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 diff --git a/scripts/server b/scripts/server index e7889dc8..00d02ccc 100755 --- a/scripts/server +++ b/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 diff --git a/scripts/test b/scripts/test index 620c2409..a2c7e422 100755 --- a/scripts/test +++ b/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 \ diff --git a/scripts/update b/scripts/update index 27a59c27..490d1d07 100755 --- a/scripts/update +++ b/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=() diff --git a/src/utils/index.ts b/src/utils/index.ts index 7e53fe50..00da547c 100644 --- a/src/utils/index.ts +++ b/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 + //

tags with role="heading" need an aria-level attribute dom .querySelectorAll("p[role=heading]") From d9baa79bf30ec0dc14c4f1a7f59a1655b826f78f Mon Sep 17 00:00:00 2001 From: Manish Kumar Gupta Date: Wed, 28 Aug 2024 13:21:55 -0700 Subject: [PATCH 2/2] 2024.2.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bd5da98d..01a0096d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pc-datacatalog", - "version": "2024.2.2", + "version": "2024.2.3", "private": true, "proxy": "http://api:7071/", "dependencies": {