Resolving some accessibility issues (#6719)

* Uses different ID for the running-session widgets, the one in main view and the one in panel

* Append kernel logo image only if necessary

* Add title to the button which close sidebar

* Add landmarks roles

* Fix UI-test

* lint

packages/application/src/panelhandler.ts

@@ -90,6 +90,8 @@ export class SidePanelHandler extends PanelHandler {
       this.hide();
     };
     closeButton.className = 'jp-Button jp-SidePanel-collapse';
+    closeButton.title = 'Collapse side panel';
+
     const icon = new Widget({ node: closeButton });
     this._panel.addWidget(icon);
     this._panel.addWidget(this._widgetPanel);

packages/application/src/shell.ts

@@ -45,8 +45,11 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
     const menuWrapper = (this._menuWrapper = new Panel());
 
     this._topHandler.panel.id = 'top-panel';
+    this._topHandler.panel.node.setAttribute('role', 'banner');
     this._menuHandler.panel.id = 'menu-panel';
+    this._menuHandler.panel.node.setAttribute('role', 'navigation');
     this._main.id = 'main-panel';
+    this._main.node.setAttribute('role', 'main');
 
     this._spacer = new Widget();
     this._spacer.id = 'spacer-widget';
@@ -63,7 +66,9 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
     const rightHandler = this._rightHandler;
 
     leftHandler.panel.id = 'jp-left-stack';
+    leftHandler.panel.node.setAttribute('role', 'complementary');
     rightHandler.panel.id = 'jp-right-stack';
+    rightHandler.panel.node.setAttribute('role', 'complementary');
 
     // Hide the side panels by default.
     leftHandler.hide();

packages/notebook-extension/src/index.ts

@@ -141,26 +141,31 @@ const kernelLogo: JupyterFrontEndPlugin<void> = {
 
     const node = document.createElement('div');
     const img = document.createElement('img');
-    node.appendChild(img);
 
     const onChange = async () => {
       const current = shell.currentWidget;
       if (!(current instanceof NotebookPanel)) {
         return;
       }
 
+      if (!node.hasChildNodes()) {
+        node.appendChild(img);
+      }
+
       await current.sessionContext.ready;
       current.sessionContext.kernelChanged.disconnect(onChange);
       current.sessionContext.kernelChanged.connect(onChange);
 
       const name = current.sessionContext.session?.kernel?.name ?? '';
       const spec = serviceManager.kernelspecs?.specs?.kernelspecs[name];
       if (!spec) {
+        node.childNodes[0].remove();
         return;
       }
 
       const kernelIconUrl = spec.resources['logo-64x64'];
       if (!kernelIconUrl) {
+        node.childNodes[0].remove();
         return;
       }
 

packages/tree-extension/src/index.ts

@@ -185,7 +185,7 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
 
     if (manager) {
       const running = new RunningSessions(manager, translator);
-      running.id = 'jp-running-sessions';
+      running.id = 'jp-running-sessions-tree';
       running.title.label = trans.__('Running');
       running.title.icon = runningIcon;
       nbTreeWidget.addWidget(running);

ui-tests/test/tree.spec.ts

@@ -40,7 +40,9 @@ test('should update url when navigating in filebrowser', async ({
 test('Should activate file browser tab', async ({ page, tmpPath }) => {
   await page.goto(`tree/${tmpPath}`);
   await page.click('text="Running"');
-  await expect(page.locator('#main-panel #jp-running-sessions')).toBeVisible();
+  await expect(
+    page.locator('#main-panel #jp-running-sessions-tree')
+  ).toBeVisible();
 
   await page.menu.clickMenuItem('View>File Browser');
   await expect(page.locator('#main-panel #filebrowser')).toBeVisible();