feat: dockview accessibility

packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts

@@ -50,6 +50,7 @@ describe('groupPanelApi', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -83,6 +84,7 @@ describe('groupPanelApi', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts

@@ -17,6 +17,7 @@ describe('tabsContainer', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -71,6 +72,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -141,6 +143,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -205,6 +208,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -269,6 +273,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -338,6 +343,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -403,6 +409,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
             onDidOptionsChange: jest.fn(),
         });
@@ -468,6 +475,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             doSetGroupActive: jest.fn(),
@@ -525,6 +533,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             doSetGroupActive: jest.fn(),
@@ -577,6 +586,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -634,6 +644,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -702,6 +713,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -770,6 +782,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -6803,4 +6803,91 @@ describe('dockviewComponent', () => {
             dockview.layout(1000, 1000);
         });
     });
+
+    test('that arrow keys should activate appropriate tabs', () => {
+        dockview.layout(500, 1000);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+
+        dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'within' },
+        });
+
+        dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+
+        dockview.addPanel({
+            id: 'panel4',
+            component: 'default',
+            position: { referencePanel: 'panel3', direction: 'below' },
+        });
+
+        const panel1 = dockview.getGroupPanel('panel1')!;
+        const panel2 = dockview.getGroupPanel('panel2')!;
+        const panel3 = dockview.getGroupPanel('panel3')!;
+        const panel4 = dockview.getGroupPanel('panel4')!;
+
+        panel1.api.setActive();
+
+        expect(panel1.api.isActive).toBeTruthy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        const tabsContainer = (panel: IDockviewPanel) =>
+            panel.api.group.element.querySelector('.tabs-container')!;
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+
+        fireEvent(tabsContainer(panel1), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeTruthy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        fireEvent(tabsContainer(panel1), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeTruthy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        const event2 = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+
+        fireEvent(tabsContainer(panel1), event2);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeTruthy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        fireEvent(tabsContainer(panel1), event2);
+        expect(panel1.api.isActive).toBeTruthy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        panel4.api.setActive();
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+
+        fireEvent(tabsContainer(panel4), event2);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+
+        fireEvent(tabsContainer(panel4), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+    });
 });

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts

@@ -174,6 +174,8 @@ export class TestPanel implements IDockviewPanel {
     private _group: DockviewGroupPanel | undefined;
     private _params: IGroupPanelInitParameters | undefined;
     readonly view: IDockviewPanelModel;
+    readonly componentElId: string;
+    readonly tabComponentElId: string;
 
     get title() {
         return '';
@@ -189,6 +191,8 @@ export class TestPanel implements IDockviewPanel {
 
     constructor(public readonly id: string, public api: DockviewPanelApi) {
         this.view = new TestModel(id);
+        this.tabComponentElId = `tab-${id}`;
+        this.componentElId = `tab-panel-${id}`;
         this.init({
             title: `${id}`,
             params: {},
@@ -266,6 +270,7 @@ describe('dockviewGroupPanelModel', () => {
             removeGroup: removeGroupMock,
             onDidAddPanel: () => ({ dispose: jest.fn() }),
             onDidRemovePanel: () => ({ dispose: jest.fn() }),
+            onDidActivePanelChange: () => ({ dispose: jest.fn() }),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -653,6 +658,7 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             onDidOptionsChange: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
         });
 
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@@ -716,6 +722,7 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             onDidOptionsChange: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
         });
 
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@@ -808,6 +815,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -875,6 +883,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -949,6 +958,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -1030,6 +1040,7 @@ describe('dockviewGroupPanelModel', () => {
             return {
                 id: 'testgroupid',
                 model: groupView,
+                dispose: jest.fn()
             };
         });
 

packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts

@@ -7,6 +7,7 @@ describe('gridviewPanel', () => {
             return {
                 onDidAddPanel: jest.fn(),
                 onDidRemovePanel: jest.fn(),
+                onDidActivePanelChange: jest.fn(),
                 options: {},
                 onDidOptionsChange: jest.fn(),
             } as any;

packages/dockview-core/src/dockview/components/tab/defaultTab.ts

@@ -6,7 +6,7 @@ import { createCloseButton } from '../../../svg';
 export class DefaultTab extends CompositeDisposable implements ITabRenderer {
     private readonly _element: HTMLElement;
     private readonly _content: HTMLElement;
-    private readonly action: HTMLElement;
+    private readonly action: HTMLButtonElement;
     private _title: string | undefined;
 
     get element(): HTMLElement {
@@ -22,22 +22,38 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
         this._content = document.createElement('div');
         this._content.className = 'dv-default-tab-content';
 
-        this.action = document.createElement('div');
+        this.action = document.createElement('button');
+        this.action.type = 'button';
         this.action.className = 'dv-default-tab-action';
+        // originally hide this, so only when it is focused is it read out.
+        // so the SR when focused on the tab, doesn't read "<Tab Content> Close Button"
+        this.action.ariaHidden = 'true';
+
         this.action.appendChild(createCloseButton());
 
         this._element.appendChild(this._content);
         this._element.appendChild(this.action);
 
+        this.addDisposables(
+            addDisposableListener(this.action, 'focus', (event) => {
+                this.action.ariaHidden = 'false';
+            }),
+            addDisposableListener(this.action, 'blur', (event) => {
+                this.action.ariaHidden = 'true';
+            })
+        );
+
         this.render();
     }
 
     init(params: GroupPanelPartInitParameters): void {
         this._title = params.title;
-
+        this.action.ariaLabel = `Close "${this._title}" tab`;
+
         this.addDisposables(
             params.api.onDidTitleChange((event) => {
                 this._title = event.title;
+                this.action.ariaLabel = `Close "${event.title}" tab`;
                 this.render();
             }),
             addDisposableListener(this.action, 'pointerdown', (ev) => {
@@ -50,6 +66,18 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
 
                 ev.preventDefault();
                 params.api.close();
+            }),
+            addDisposableListener(this.action, 'keydown', (ev) => {
+                if (ev.defaultPrevented) {
+                    return;
+                }
+
+                switch (ev.key) {
+                    case 'Enter':
+                    case 'Space':
+                        params.api.close();
+                        break;
+                }
             })
         );