chore: standardize api

Author: mathuo

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

@@ -24,6 +24,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
 
         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"
@@ -49,7 +50,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
     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;

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

@@ -52,7 +52,7 @@ export class Tab extends CompositeDisposable {
 
     private readonly _onPointDown = new Emitter<MouseEvent>();
     readonly onPointerDown: Event<MouseEvent> = this._onPointDown.event;
-    
+
     private readonly _onKeyDown = new Emitter<KeyboardEvent>();
     readonly onKeyDown: Event<KeyboardEvent> = this._onKeyDown.event;
 
@@ -76,13 +76,17 @@ export class Tab extends CompositeDisposable {
         super();
 
         this._element = document.createElement('div');
-        this._element.id = this.panel.tabComponentElId;
         this._element.className = 'dv-tab';
         this._element.role = 'tab';
         this._element.tabIndex = -1;
         this._element.draggable = true;
         this._element.ariaSelected = 'false';
-        this._element.setAttribute('aria-controls', this.panel.componentElId);
+
+        Object.entries(this.panel.tabComponentAttributes).forEach(
+            ([key, value]) => {
+                this._element.setAttribute(key, value);
+            }
+        );
 
         toggleClass(this.element, 'dv-inactive-tab', true);
 

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

@@ -2524,6 +2524,12 @@ export class DockviewComponent
             tabComponent
         );
 
+        Object.entries(options.componentAttributes ?? {}).forEach(
+            ([key, value]) => {
+                view.content.element.setAttribute(key, value);
+            }
+        );
+
         const panel = new DockviewPanel(
             options.id,
             contentComponent,
@@ -2538,6 +2544,8 @@ export class DockviewComponent
                 minimumHeight: options.minimumHeight,
                 maximumWidth: options.maximumWidth,
                 maximumHeight: options.maximumHeight,
+                componentAttributes: options.componentAttributes,
+                tabComponentAttributes: options.tabComponentAttributes,
             }
         );
 

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

@@ -19,8 +19,8 @@ export interface IDockviewPanel extends IDisposable, IPanel {
     readonly api: DockviewPanelApi;
     readonly title: string | undefined;
     readonly params: Parameters | undefined;
-    readonly componentElId: string;
-    readonly tabComponentElId: string;
+    readonly componentAttributes: Record<string, string>;
+    readonly tabComponentAttributes: Record<string, string>;
     readonly minimumWidth?: number;
     readonly minimumHeight?: number;
     readonly maximumWidth?: number;
@@ -41,18 +41,9 @@ export class DockviewPanel
     implements IDockviewPanel
 {
     readonly api: DockviewPanelApiImpl;
-    /**
-     * The unique DOM id for the rendered panel element
-     *
-     * Used for accessibility attributes
-     */
-    readonly componentElId: string;
-    /**
-     * The unique DOM id for the rendered tab element
-     *
-     * Used for accessibility attributes
-     */
-    readonly tabComponentElId: string;
+
+    readonly componentAttributes: Record<string, string>;
+    readonly tabComponentAttributes: Record<string, string>;
 
     private _group: DockviewGroupPanel;
     private _params?: Parameters;
@@ -104,7 +95,10 @@ export class DockviewPanel
         private readonly containerApi: DockviewApi,
         group: DockviewGroupPanel,
         readonly view: IDockviewPanelModel,
-        options: { renderer?: DockviewPanelRenderer } & Partial<Contraints>
+        options: { renderer?: DockviewPanelRenderer } & Partial<Contraints> & {
+                componentAttributes?: Record<string, string>;
+                tabComponentAttributes?: Record<string, string>;
+            }
     ) {
         super();
         this._renderer = options.renderer;
@@ -114,10 +108,8 @@ export class DockviewPanel
         this._maximumWidth = options.maximumWidth;
         this._maximumHeight = options.maximumHeight;
 
-        const randomId = Math.random().toString(36).slice(2);
-
-        this.tabComponentElId = `tab-${id}-${randomId}`;
-        this.componentElId = `tab-panel-${id}-${randomId}`;
+        this.componentAttributes = options.componentAttributes ?? {};
+        this.tabComponentAttributes = options.tabComponentAttributes ?? {};
 
         this.api = new DockviewPanelApiImpl(
             this,

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

@@ -260,6 +260,8 @@ export type AddPanelOptions<P extends object = Parameters> = {
     inactive?: boolean;
     initialWidth?: number;
     initialHeight?: number;
+    componentAttributes?: Record<string, string>;
+    tabComponentAttributes?: Record<string, string>;
 } & Partial<AddPanelOptionsUnion> &
     Partial<Contraints>;
 

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

@@ -23,6 +23,7 @@ function createFocusableElement(): HTMLDivElement {
     return element;
 }
 
+
 export class OverlayRenderContainer extends CompositeDisposable {
     private readonly map: Record<
         string,
@@ -75,7 +76,6 @@ export class OverlayRenderContainer extends CompositeDisposable {
             element.className = 'dv-render-overlay';
             element.role = 'tabpanel';
             element.tabIndex = 0;
-            element.setAttribute('aria-labelledby', panel.tabComponentElId);
 
             this.map[panel.api.id] = {
                 panel,

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

@@ -159,11 +159,15 @@ export class Splitview {
         this.size = this.orthogonalSize;
         this.orthogonalSize = tmp;
 
-        removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
-        this.element.classList.add(
-            this.orientation == Orientation.HORIZONTAL
-                ? 'dv-horizontal'
-                : 'dv-vertical'
+        toggleClass(
+            this.element,
+            'dv-horizontal',
+            this._orientation == Orientation.HORIZONTAL
+        );
+        toggleClass(
+            this.element,
+            'dv-vertical',
+            this._orientation == Orientation.VERTICAL
         );
         this.element.ariaOrientation =
             this.orientation == Orientation.HORIZONTAL
@@ -231,8 +235,8 @@ export class Splitview {
         private readonly container: HTMLElement,
         options: SplitViewOptions
     ) {
-        this._orientation = options.orientation ?? Orientation.VERTICAL;
         this.element = this.createContainer();
+        this.orientation = options.orientation ?? Orientation.VERTICAL;
 
         this.margin = options.margin ?? 0;
 
@@ -1147,15 +1151,7 @@ export class Splitview {
 
     private createContainer(): HTMLElement {
         const element = document.createElement('div');
-        const orientationClassname =
-            this._orientation === Orientation.HORIZONTAL
-                ? 'dv-horizontal'
-                : 'dv-vertical';
-        element.className = `dv-split-view-container ${orientationClassname}`;
-        element.ariaOrientation =
-            this._orientation == Orientation.HORIZONTAL
-                ? 'horizontal'
-                : 'vertical';
+        element.className = `dv-split-view-container`;
         return element;
     }