Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: dockview accessibility #701

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: dockview accessibility #701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
692588c
♿️ access: add accesibility attributes to elements
iammola Aug 28, 2024
23a7bbe
✅ test: add tests
iammola Aug 28, 2024
3c4e7e8
🔀 merge: update from `upstream/master`
iammola Sep 2, 2024
0761df4
Merge branch 'mathuo:master' into tab-accessibility
iammola Oct 1, 2024
e380f13
🔀 merge: update from upstream/master
iammola Oct 29, 2024
658e56d
Merge branch 'mathuo:master' into tab-accessibility
iammola Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ describe('groupPanelApi', () => {
const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -81,6 +82,7 @@ describe('groupPanelApi', () => {
const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down
13 changes: 13 additions & 0 deletions packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ describe('tabsContainer', () => {
const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -69,6 +70,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -135,6 +137,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -198,6 +201,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -261,6 +265,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -329,6 +334,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -393,6 +399,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid',
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
});

Expand Down Expand Up @@ -457,6 +464,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
doSetGroupActive: jest.fn(),
Expand Down Expand Up @@ -513,6 +521,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
doSetGroupActive: jest.fn(),
Expand Down Expand Up @@ -564,6 +573,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
getGroupPanel: jest.fn(),
Expand Down Expand Up @@ -620,6 +630,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
getGroupPanel: jest.fn(),
Expand Down Expand Up @@ -687,6 +698,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
getGroupPanel: jest.fn(),
Expand Down Expand Up @@ -754,6 +766,7 @@ describe('tabsContainer', () => {
options: {},
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
getGroupPanel: jest.fn(),
Expand Down
87 changes: 87 additions & 0 deletions packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6179,4 +6179,91 @@ describe('dockviewComponent', () => {
expect(dockview.gap).toBe(15);
});
});

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();
});
});
11 changes: 11 additions & 0 deletions packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,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 '';
Expand All @@ -203,6 +205,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: {},
Expand Down Expand Up @@ -280,6 +284,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>({})
Expand Down Expand Up @@ -665,6 +670,7 @@ describe('dockviewGroupPanelModel', () => {
getPanel: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
});

const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
Expand Down Expand Up @@ -727,6 +733,7 @@ describe('dockviewGroupPanelModel', () => {
getPanel: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
});

const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
Expand Down Expand Up @@ -819,6 +826,7 @@ describe('dockviewGroupPanelModel', () => {
doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
overlayRenderContainer: new OverlayRenderContainer(
document.createElement('div'),
fromPartial<DockviewComponent>({})
Expand Down Expand Up @@ -891,6 +899,7 @@ describe('dockviewGroupPanelModel', () => {
doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
overlayRenderContainer: new OverlayRenderContainer(
document.createElement('div'),
fromPartial<DockviewComponent>({})
Expand Down Expand Up @@ -964,6 +973,7 @@ describe('dockviewGroupPanelModel', () => {
doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
overlayRenderContainer: new OverlayRenderContainer(
document.createElement('div'),
fromPartial<DockviewComponent>({})
Expand Down Expand Up @@ -1044,6 +1054,7 @@ describe('dockviewGroupPanelModel', () => {
return {
id: 'testgroupid',
model: groupView,
dispose: jest.fn()
};
});

Expand Down
1 change: 1 addition & 0 deletions packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ describe('gridviewPanel', () => {
return {
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
onDidActivePanelChange: jest.fn(),
options: {},
} as any;
});
Expand Down
9 changes: 9 additions & 0 deletions packages/dockview-core/src/dockview/components/tab/tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,16 @@ export class Tab extends CompositeDisposable {
super();

this._element = document.createElement('div');
this._element.id = this.panel.tabComponentElId;
this._element.className = 'dv-tab';
this._element.tabIndex = 0;
this._element.draggable = true;

this._element.role = 'tab';
this._element.tabIndex = -1;
this._element.ariaSelected = 'false';
this._element.setAttribute('aria-controls', this.panel.componentElId);

toggleClass(this.element, 'dv-inactive-tab', true);

const dragHandler = new TabDragHandler(
Expand Down Expand Up @@ -139,6 +145,9 @@ export class Tab extends CompositeDisposable {
}

public setActive(isActive: boolean): void {
this.element.tabIndex = isActive ? 0 : -1;
this.element.ariaSelected = isActive.toString();

toggleClass(this.element, 'dv-active-tab', isActive);
toggleClass(this.element, 'dv-inactive-tab', !isActive);
}
Expand Down
43 changes: 43 additions & 0 deletions packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ export class TabsContainer

this.tabContainer = document.createElement('div');
this.tabContainer.className = 'dv-tabs-container';
this.tabContainer.role = 'tablist';

this.voidContainer = new VoidContainer(this.accessor, this.group);

Expand Down Expand Up @@ -223,6 +224,13 @@ export class TabsContainer
);
}
}),
this.accessor.onDidActivePanelChange((e) => {
if (e?.api.group === this.group) {
this.selectedIndex = this.indexOf(e.id);
} else {
this.selectedIndex = -1;
}
}),
this._onWillShowOverlay,
this._onDrop,
this._onTabDragStart,
Expand Down Expand Up @@ -288,6 +296,40 @@ export class TabsContainer
if (isLeftClick) {
this.accessor.doSetGroupActive(this.group);
}
}),
addDisposableListener(this.tabContainer, 'keydown', (event) => {
if (event.defaultPrevented) {
return;
}

let tab: IValueDisposable<Tab> | undefined = undefined;

switch (event.key) {
case 'ArrowLeft': {
if (this.selectedIndex > 0) {
tab = this.tabs[this.selectedIndex - 1];
}
break;
}
case 'ArrowRight': {
if (this.selectedIndex + 1 < this.size) {
tab = this.tabs[this.selectedIndex + 1];
}
break;
}
case 'Home':
tab = this.tabs[0];
break;
case 'End':
tab = this.tabs[this.size - 1];
break;
}

if (tab == null) {
return;
}

this.group.model.openPanel(tab.value.panel);
})
);
}
Expand Down Expand Up @@ -336,6 +378,7 @@ export class TabsContainer
this.tabs.forEach((tab) => {
const isActivePanel = panel.id === tab.value.panel.id;
tab.value.setActive(isActivePanel);
tab.value.panel.runEvents();
});
}

Expand Down
Loading