Merge pull request jupyter#92 from Quansight-Labs/master

Gitpod updates + new Playwright test

.github/workflows/docker.yml

@@ -0,0 +1,56 @@
+name: Build Gitpod Docker image
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Build Gitpod Docker image
+    runs-on: ubuntu-latest
+    environment: a11y-dev
+    if: "github.repository_owner == 'jupyter' && !contains(github.event.head_commit.message, '[ci skip]') && !contains(github.event.head_commit.message, '[skip ci]') && !contains(github.event.head_commit.message, '[skip github]')"
+    steps:
+      - name: Clone repository ⚡
+        uses: actions/checkout@v3
+
+      - name: Lint Docker 🔍
+        uses: brpaz/hadolint-action@v1.2.1
+        with:
+          dockerfile: ./testing/tools/Dockerfile
+
+      - name: Get refs
+        shell: bash
+        run: |
+          export raw_branch=${GITHUB_REF#refs/heads/}
+          echo "::set-output name=branch::${raw_branch//\//-}"
+          echo "::set-output name=date::$(date +'%Y%m%d')"
+          echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"
+        id: getrefs
+
+      - name: Set up Docker Buildx 🐳
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Docker Hub 🔑
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push 🛠️
+        id: docker_build
+        uses: docker/build-push-action@v3
+        with:
+          context: "."
+          file: "./testing/tools/Dockerfile"
+          push: ${{ github.event_name != 'pull_request' }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          tags: |
+            quansight/jupyter-a11y:${{ steps.getrefs.outputs.date }}-${{ steps.getrefs.outputs.branch}}-${{ steps.getrefs.outputs.sha8 }}
+            quansight/jupyter-a11y:latest
+
+      - name: Image digest 📖
+        # Return details of the image build: sha and shell
+        run: echo ${{ steps.docker_build.outputs.digest }}

.gitpod.yml

@@ -1,13 +1,49 @@
-image:
-  file: testing/tools/gitpod/Dockerfile
-ports:
-- port: 9323
-- port: 8888
+image: quansight/jupyter-a11y:latest
+
 tasks:
   - name: Install JupyterLab Node.js testing dependencies
-    before: |
-      cd testing/jupyterlab
     init: |
+      cd testing/jupyterlab
+      echo " 📦 Installing node dependencies "
       yarn install
-    command: |
       npx playwright install
+      echo "🚀 Dependencies installed "
+      cd /workspace/accessibility/
+
+# --------------------------------------------------------
+# exposing ports
+ports:
+  - port: 9323
+  - port: 8888
+
+# some useful extensions to have
+vscode:
+  extensions:
+    - eamodio.gitlens
+    - ms-python.python
+    - yzhang.markdown-all-in-one
+    - bungcip.better-toml
+
+# --------------------------------------------------------
+# using prebuilds for the container
+# With this configuration the prebuild will happen on push to master
+github:
+  prebuilds:
+    # enable for main/default branch
+    master: true
+    # enable for other branches (defaults to false)
+    branches: false
+    # enable for pull requests coming from this repo (defaults to true)
+    # need to change
+    pullRequests: false
+    # enable for pull requests coming from forks (defaults to false)
+    pullRequestsFromForks: false
+    # add a check to pull requests (defaults to true)
+    addCheck: true
+    # add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
+    # need to change
+    addComment: false
+    # add a "Review in Gitpod" button to the pull request's description (defaults to false)
+    addBadge: true
+    # add a label once the prebuild is ready to pull requests (defaults to false)
+    addLabel: false

.hadolint.yml

@@ -0,0 +1,7 @@
+---
+ignored:
+  - DL3006
+  - DL3008
+  - SC2016
+  - DL3004
+  - DL3007

docs/resources/statement.md

@@ -0,0 +1,133 @@
+# `jupyter` accessibility statements
+
+
+## `jupyter` audits
+
+This section includes audits from different stakeholders on `jupyter` products.
+
+* [JupyterLab v2.2.6 WCAG 2.1](https://github.com/jupyterlab/jupyterlab/issues/9399)
+* [Jupyter Notebook WCAG 2.0](https://github.com/jupyter/accessibility/issues/7)
+
+## Accessibility Statement for JupyterLab
+
+Edited from the [W3C accessibility statement generator](https://www.w3.org/WAI/planning/statements/generator/#create)
+
+This is an accessibility statement from Jupyter accessibility contributors.
+
+### The current state of JupyterLab
+
+Jupyter accessibility statements are living documents. This statement was created on 16 May 2022 using the [W3C Accessibility Statement Generator Tool](https://www.w3.org/WAI/planning/statements/) with additions and edits from the Jupyter accessibility contributors community.
+
+This statement was last updated 16 June 2022.
+
+#### Conformance status
+
+The [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag) defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. JupyterLab is non conformant with WCAG 2.1 level AA. Non conformant means that the content does not meet the accessibility standard.
+
+![Picture accessibility compliance levels as mountains. The first peak to reach is AA. This includes both A and AA criteria. Behind it, in the mist, there is a larger peak, AAA. That one is not always completely reachable--Marie Guillaumet, Access42](https://stephaniewalter.design/wp-content/uploads/2022/05/stephaniewalter-sommets-de-l-accessibilite.jpg)
+
+*By [Stéphanie Walter](https://stephaniewalter.design) ([Source](https://stephaniewalter.design/blog/5-illustrations-to-understand-and-promote-accessibility/))*
+
+JupyterLab's accessibility does not exist in isolation. JupyterLab inherits much from the many projects it is built upon and its accessibility conformance may impact projects built off of JupyterLab or its components. The accessibility of this ecosystem is interlinked, so conformance may need to be resolved at different levels in order to impact JupyterLab positively.
+
+#### Compatibility with browsers and assistive technology
+
+JupyterLab is designed to be compatible with the following
+
+Operating systems:
+
+* Windows 
+* macOS
+* Linux
+* iOS
+* Android
+
+Browsers (mobile and desktop):
+
+ * Firefox
+ * Chrome
+ * Safari
+ * Chromium browsers
+
+JupyterLab is not compatible with:
+
+Operating systems:
+
+Browsers (mobile and desktop):
+
+* Internet Explorer
+* Edge
+
+Assistive technology:
+
+* JAWS
+* NVDA
+* VoiceOver
+* Narrator
+* Orca screen readers
+* voice control technology
+
+#### Technical specifications
+
+Accessibility of JupyterLab relies on the following technologies to work with the particular combination of web browser and any assistive technologies or plugins installed on your computer:
+
+* HTML
+* WAI-ARIA
+* CSS
+* JavaScript
+
+These technologies are relied upon for conformance with the accessibility standards used.
+
+#### Limitations and alternatives
+
+Despite our best efforts to ensure accessibility of JupyterLab, there may be some limitations. Below is a description of known limitations, and potential solutions. Please contact us if you observe an issue not listed below.
+
+**Known limitations for JupyterLab:**
+
+1. **Documents**: Documents written by the community may not include accessible content because we do not and cannot review every document that can be opened and edited in JupyterLab. To support accessible documents, we are drafting guidelines for accessible document content with an emphasis on Jupyter notebooks. Please report the issue to the author and [open an issue on jupyter/accessibility](https://github.com/jupyter/accessibility/issues/new) describing the problem and the behavior you expect so we may integrate it into our content guidelines.
+
+2. **JupyterLab extensions**: JupyterLab extensions written by the community may not be accessible because JupyterLab extensions can be written by anyone in the community and have no standard review process. We do not and can not review every JupyterLab extension. To support accessible extensions, we encourage extension authors to use existing, accessible JupyterLab components for their extensions. We also provide periodic opportunities for community education on accessibility. Please report the issue to the author and let them know the [jupyter/accessibility](https://github.com/jupyter/accessibility/) community may be able to provide guidance.
+
+#### Assessment approach
+
+Jupyter accessibility contributors assessed the accessibility of JupyterLab by the following approaches:
+
+* Self-evaluation
+* Regular automated testing to monitor for regressions (can be found at [jupyter/accessibility](https://github.com/jupyter/accessibility)
+* User feedback
+
+#### Evaluation report
+
+An evaluation for JupyterLab is available at: [jupyterlab/jupyterlab/issues/9399](https://github.com/jupyterlab/jupyterlab/issues/9399).
+
+User reports on JupyterLab's accessibility are available at:[the jupyterlab/jupyterlab label `tag:accessibility`](https://github.com/jupyterlab/jupyterlab/labels/tag%3AAccessibility).
+
+### What the community is doing
+
+#### Measures to support accessibility
+
+Jupyter accessibility contributors take the following measures to ensure accessibility of JupyterLab:
+
+* Include accessibility as part of our mission statement.
+* Provide continual accessibility training for our community.
+* Assign clear accessibility goals and responsibilities.
+* Employ formal accessibility quality assurance methods.
+* Document changes, approaches, and improvements to the above methods and to JupyterLab itself.
+
+For more information on current efforts to improve JupyterLab's accessibility, visit the [JupyterLab accessibility grant roadmap](https://jupyter-a11y.netlify.app/roadmap/intro.html).
+
+### Feedback and Formal complaints
+
+We welcome your feedback and formal complaints on the accessibility status of JupyterLab. Please let us know if you encounter accessibility barriers on JupyterLab:
+
+* [Write an issue on jupyter/accessibility](https://github.com/jupyter/accessibility/issues/new)
+* [Write an issue on jupyterlab/jupyterlab](https://github.com/jupyterlab/jupyterlab/issues/new) and request it be labeled [tag:accessibility](https://github.com/jupyterlab/jupyterlab/labels/tag%3AAccessibility)
+* If you are interested in being part of any potential research or organized feedback initiatives, please [send an email with the subject line `Jupyter Accessibility Feedback` here](ipresedo@quansight.com). Gauging community interest in user research participation helps us gain the support to make it happen.
+
+At the time of writing, there is no non-public way to contact us for JupyterLab accessibility issues.
+
+Please note that JupyterLab is an open-source project and that Jupyter accessibility contributors are a group defined on a voluntary basis. Like many other open-source projects, we cannot guarantee how long it may take to respond to and resolve an issue, though we do make an effort to do it as quickly as is possible with our resources.
+
+## Accessibility Statement for Jupyter Notebook
+
+Pending

testing/jupyterlab/README.md

@@ -55,7 +55,7 @@ by modifying the [`playwright.config.ts`](testing/jupyterlab/playwright.config.t
     ```
 
 Your console should output a local URL that you can open in your browser to see
-the test results: typically http://127.0.0.1:9323
+the test results: typically <http://127.0.0.1:9323>
 
 ### :cloud: Running in Gitpod
 

testing/jupyterlab/tests/tab-loop-no-trap.test.ts

@@ -0,0 +1,55 @@
+/**
+ * This test checks whether a user, starting from the top and only pressing the
+ * tab key, can tab through the entire app and return to where they started.
+ *
+ * This means that a first-level tab-through of the app encounters no keyboard
+ * traps.
+ */
+
+import { expect } from "@playwright/test";
+import { test } from "@jupyterlab/galata";
+
+test.describe("when pressing tab key repeatedly", () => {
+  test("should cycle through elements back to the start", async ({ page }) => {
+    await page.keyboard.press("Tab");
+    // The first element we tab to will be used as reference point of
+    // comparison.
+    const firstElementTabbedTo = await page.evaluateHandle(
+      "document.activeElement"
+    );
+    let encounteredFirstElementAgain = false;
+    let encounteredOtherElement = false;
+    // i < 100 is arbitrary; however, this test should certainly fail if the
+    // user has to tab more 100 times to return to the top.
+    for (let i = 0; i < 100; i++) {
+      await page.keyboard.press("Tab");
+      const sameActiveElement = (el) => el === document.activeElement;
+      // Is the element that we are currently tabbed on the same as the first
+      // element that we tabbed to earlier?
+      const currentIsFirst = await page.evaluate(
+        sameActiveElement,
+        firstElementTabbedTo
+      );
+      if (currentIsFirst) {
+        encounteredFirstElementAgain = true;
+      } else {
+        // If we do not check whether the user encounters another element while
+        // tabbing, then the test would pass even if the first element they
+        // tabbed to was a tab trap.
+        encounteredOtherElement = true;
+      }
+      if (encounteredFirstElementAgain) {
+        firstElementTabbedTo.dispose();
+        break;
+      }
+    }
+    expect(
+      encounteredFirstElementAgain,
+      "should have cycled back to first element"
+    ).toBe(true);
+    expect(
+      encounteredOtherElement,
+      "should have tabbed through at least one other element"
+    ).toBe(true);
+  });
+});