Fix labelledby to support multiple elements on page (#407)

* Fix labelledby to support multiple elements on page

* Lint

* Update API

Author: fcollonval

packages/widgets/src/accordionpanel.ts

@@ -372,6 +372,10 @@ export namespace AccordionPanel {
    * The default implementation of `IRenderer`.
    */
   export class Renderer extends SplitPanel.Renderer implements IRenderer {
+    constructor() {
+      super();
+      this._uuid = ++Renderer._nInstance;
+    }
     /**
      * A selector which matches any title node in the accordion.
      */
@@ -430,12 +434,14 @@ export namespace AccordionPanel {
     createTitleKey(data: Title<Widget>): string {
       let key = this._titleKeys.get(data);
       if (key === undefined) {
-        key = `title-key-${this._titleID++}`;
+        key = `title-key-${this._uuid}-${this._titleID++}`;
         this._titleKeys.set(data, key);
       }
       return key;
     }
 
+    private static _nInstance = 0;
+    private readonly _uuid: number;
     private _titleID = 0;
     private _titleKeys = new WeakMap<Title<Widget>, string>();
   }

packages/widgets/src/tabbar.ts

@@ -1519,6 +1519,9 @@ export namespace TabBar {
    * Subclasses are free to reimplement rendering methods as needed.
    */
   export class Renderer implements IRenderer<any> {
+    constructor() {
+      this._uuid = ++Renderer._nInstance;
+    }
     /**
      * A selector which matches the close icon node in a tab.
      */
@@ -1607,7 +1610,7 @@ export namespace TabBar {
     createTabKey(data: IRenderData<any>): string {
       let key = this._tabKeys.get(data.title);
       if (key === undefined) {
-        key = `tab-key-${this._tabID++}`;
+        key = `tab-key-${this._uuid}-${this._tabID++}`;
         this._tabKeys.set(data.title, key);
       }
       return key;
@@ -1680,6 +1683,8 @@ export namespace TabBar {
       return extra ? `${name} ${extra}` : name;
     }
 
+    private static _nInstance = 0;
+    private readonly _uuid: number;
     private _tabID = 0;
     private _tabKeys = new WeakMap<Title<any>, string>();
   }

review/api/widgets.api.md

@@ -73,6 +73,7 @@ export namespace AccordionPanel {
     export type IRenderer = AccordionLayout.IRenderer;
     export type Orientation = SplitLayout.Orientation;
     export class Renderer extends SplitPanel.Renderer implements IRenderer {
+        constructor();
         createCollapseIcon(data: Title<Widget>): HTMLElement;
         createSectionTitle(data: Title<Widget>): HTMLElement;
         createTitleKey(data: Title<Widget>): string;
@@ -1133,6 +1134,7 @@ export namespace TabBar {
     */
     | 'select-previous-tab';
     export class Renderer implements IRenderer<any> {
+        constructor();
         readonly closeIconSelector = ".lm-TabBar-tabCloseIcon";
         createIconClass(data: IRenderData<any>): string;
         createTabARIA(data: IRenderData<any>): ElementARIAAttrs;