Skip to content

Commit 182a2ae

Browse files
committed
chore: standardize api
1 parent 9c04db8 commit 182a2ae

9 files changed

Lines changed: 46 additions & 45 deletions

File tree

packages/dockview-core/src/dockview/components/panel/content.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class ContentContainer
5151
super();
5252
this._element = document.createElement('div');
5353
this._element.className = 'dv-content-container';
54+
this.element.role = 'tabpanel';
5455
this._element.tabIndex = -1;
5556

5657
this.addDisposables(this._onDidFocus, this._onDidBlur);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
2424

2525
this.action = document.createElement('button');
2626
this.action.type = 'button';
27+
2728
this.action.className = 'dv-default-tab-action';
2829
// originally hide this, so only when it is focused is it read out.
2930
// so the SR when focused on the tab, doesn't read "<Tab Content> Close Button"
@@ -49,7 +50,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
4950
init(params: GroupPanelPartInitParameters): void {
5051
this._title = params.title;
5152
this.action.ariaLabel = `Close "${this._title}" tab`;
52-
53+
5354
this.addDisposables(
5455
params.api.onDidTitleChange((event) => {
5556
this._title = event.title;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class Tab extends CompositeDisposable {
5252

5353
private readonly _onPointDown = new Emitter<MouseEvent>();
5454
readonly onPointerDown: Event<MouseEvent> = this._onPointDown.event;
55-
55+
5656
private readonly _onKeyDown = new Emitter<KeyboardEvent>();
5757
readonly onKeyDown: Event<KeyboardEvent> = this._onKeyDown.event;
5858

@@ -76,13 +76,17 @@ export class Tab extends CompositeDisposable {
7676
super();
7777

7878
this._element = document.createElement('div');
79-
this._element.id = this.panel.tabComponentElId;
8079
this._element.className = 'dv-tab';
8180
this._element.role = 'tab';
8281
this._element.tabIndex = -1;
8382
this._element.draggable = true;
8483
this._element.ariaSelected = 'false';
85-
this._element.setAttribute('aria-controls', this.panel.componentElId);
84+
85+
Object.entries(this.panel.tabComponentAttributes).forEach(
86+
([key, value]) => {
87+
this._element.setAttribute(key, value);
88+
}
89+
);
8690

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

packages/dockview-core/src/dockview/components/titlebar/tabs.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ export class Tabs extends CompositeDisposable {
9999
this._tabsList = document.createElement('div');
100100
this._tabsList.className = 'dv-tabs-container dv-horizontal';
101101
this._tabsList.ariaOrientation = 'horizontal';
102+
this.element.role = 'tablist';
103+
this.element.ariaLabel =
104+
'Use the Left Arrow to select the previous tab, Right Arrow for the next tab, Home for the first tab, and End for the last tab. Press Enter to select the focused tab.';
102105

103106
this.showTabsOverflowControl = options.showTabsOverflowControl;
104107

@@ -110,10 +113,6 @@ export class Tabs extends CompositeDisposable {
110113
this.addDisposables(scrollbar);
111114
}
112115

113-
this.element.role = 'tablist';
114-
this.element.ariaLabel =
115-
'Use the Left Arrow to select the previous tab, Right Arrow for the next tab, Home for the first tab, and End for the last tab. Press Enter to select the focused tab.';
116-
117116
this.addDisposables(
118117
this._onOverflowTabsChange,
119118
this._observerDisposable,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2524,6 +2524,12 @@ export class DockviewComponent
25242524
tabComponent
25252525
);
25262526

2527+
Object.entries(options.componentAttributes ?? {}).forEach(
2528+
([key, value]) => {
2529+
view.content.element.setAttribute(key, value);
2530+
}
2531+
);
2532+
25272533
const panel = new DockviewPanel(
25282534
options.id,
25292535
contentComponent,
@@ -2538,6 +2544,8 @@ export class DockviewComponent
25382544
minimumHeight: options.minimumHeight,
25392545
maximumWidth: options.maximumWidth,
25402546
maximumHeight: options.maximumHeight,
2547+
componentAttributes: options.componentAttributes,
2548+
tabComponentAttributes: options.tabComponentAttributes,
25412549
}
25422550
);
25432551

packages/dockview-core/src/dockview/dockviewPanel.ts

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export interface IDockviewPanel extends IDisposable, IPanel {
1919
readonly api: DockviewPanelApi;
2020
readonly title: string | undefined;
2121
readonly params: Parameters | undefined;
22-
readonly componentElId: string;
23-
readonly tabComponentElId: string;
22+
readonly componentAttributes: Record<string, string>;
23+
readonly tabComponentAttributes: Record<string, string>;
2424
readonly minimumWidth?: number;
2525
readonly minimumHeight?: number;
2626
readonly maximumWidth?: number;
@@ -41,18 +41,9 @@ export class DockviewPanel
4141
implements IDockviewPanel
4242
{
4343
readonly api: DockviewPanelApiImpl;
44-
/**
45-
* The unique DOM id for the rendered panel element
46-
*
47-
* Used for accessibility attributes
48-
*/
49-
readonly componentElId: string;
50-
/**
51-
* The unique DOM id for the rendered tab element
52-
*
53-
* Used for accessibility attributes
54-
*/
55-
readonly tabComponentElId: string;
44+
45+
readonly componentAttributes: Record<string, string>;
46+
readonly tabComponentAttributes: Record<string, string>;
5647

5748
private _group: DockviewGroupPanel;
5849
private _params?: Parameters;
@@ -104,7 +95,10 @@ export class DockviewPanel
10495
private readonly containerApi: DockviewApi,
10596
group: DockviewGroupPanel,
10697
readonly view: IDockviewPanelModel,
107-
options: { renderer?: DockviewPanelRenderer } & Partial<Contraints>
98+
options: { renderer?: DockviewPanelRenderer } & Partial<Contraints> & {
99+
componentAttributes?: Record<string, string>;
100+
tabComponentAttributes?: Record<string, string>;
101+
}
108102
) {
109103
super();
110104
this._renderer = options.renderer;
@@ -114,10 +108,8 @@ export class DockviewPanel
114108
this._maximumWidth = options.maximumWidth;
115109
this._maximumHeight = options.maximumHeight;
116110

117-
const randomId = Math.random().toString(36).slice(2);
118-
119-
this.tabComponentElId = `tab-${id}-${randomId}`;
120-
this.componentElId = `tab-panel-${id}-${randomId}`;
111+
this.componentAttributes = options.componentAttributes ?? {};
112+
this.tabComponentAttributes = options.tabComponentAttributes ?? {};
121113

122114
this.api = new DockviewPanelApiImpl(
123115
this,

packages/dockview-core/src/dockview/options.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,8 @@ export type AddPanelOptions<P extends object = Parameters> = {
260260
inactive?: boolean;
261261
initialWidth?: number;
262262
initialHeight?: number;
263+
componentAttributes?: Record<string, string>;
264+
tabComponentAttributes?: Record<string, string>;
263265
} & Partial<AddPanelOptionsUnion> &
264266
Partial<Contraints>;
265267

packages/dockview-core/src/overlay/overlayRenderContainer.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
7373
if (!this.map[panel.api.id]) {
7474
const element = createFocusableElement();
7575
element.className = 'dv-render-overlay';
76-
element.role = 'tabpanel';
7776
element.tabIndex = 0;
78-
element.setAttribute('aria-labelledby', panel.tabComponentElId);
7977

8078
this.map[panel.api.id] = {
8179
panel,

packages/dockview-core/src/splitview/splitview.ts

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export class Splitview {
102102
private readonly sashContainer: HTMLElement;
103103
private readonly viewItems: ViewItem[] = [];
104104
private readonly sashes: ISashItem[] = [];
105-
private _orientation: Orientation;
105+
private _orientation = Orientation.VERTICAL;
106106
private _size = 0;
107107
private _orthogonalSize = 0;
108108
private _contentSize = 0;
@@ -159,11 +159,15 @@ export class Splitview {
159159
this.size = this.orthogonalSize;
160160
this.orthogonalSize = tmp;
161161

162-
removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
163-
this.element.classList.add(
164-
this.orientation == Orientation.HORIZONTAL
165-
? 'dv-horizontal'
166-
: 'dv-vertical'
162+
toggleClass(
163+
this.element,
164+
'dv-horizontal',
165+
this._orientation == Orientation.HORIZONTAL
166+
);
167+
toggleClass(
168+
this.element,
169+
'dv-vertical',
170+
this._orientation == Orientation.VERTICAL
167171
);
168172
this.element.ariaOrientation =
169173
this.orientation == Orientation.HORIZONTAL
@@ -231,8 +235,8 @@ export class Splitview {
231235
private readonly container: HTMLElement,
232236
options: SplitViewOptions
233237
) {
234-
this._orientation = options.orientation ?? Orientation.VERTICAL;
235238
this.element = this.createContainer();
239+
this.orientation = options.orientation ?? Orientation.VERTICAL;
236240

237241
this.margin = options.margin ?? 0;
238242

@@ -1147,15 +1151,7 @@ export class Splitview {
11471151

11481152
private createContainer(): HTMLElement {
11491153
const element = document.createElement('div');
1150-
const orientationClassname =
1151-
this._orientation === Orientation.HORIZONTAL
1152-
? 'dv-horizontal'
1153-
: 'dv-vertical';
1154-
element.className = `dv-split-view-container ${orientationClassname}`;
1155-
element.ariaOrientation =
1156-
this._orientation == Orientation.HORIZONTAL
1157-
? 'horizontal'
1158-
: 'vertical';
1154+
element.className = `dv-split-view-container`;
11591155
return element;
11601156
}
11611157

0 commit comments

Comments
 (0)