Added aria-live to the tab bar to improve screen reader accessibility.

packages/commands/src/index.ts

@@ -574,6 +574,24 @@ export class CommandRegistry {
     this._startTimer();
   }
 
+  /**
+   * Add a dialog to a command 
+   *
+   * @param id - The id of the command of interest.
+   *
+   * @param args - The arguments for the command.
+   *
+   * @returns A  private ICommand or undefined of the dialog string 
+   *   or `an empty sting` if the command does not have a dialog.
+   */
+  commandDialog(
+    id: string,
+    args: ReadonlyPartialJSONObject = JSONExt.emptyObject
+    ): string {
+      let cmd = this._commands.get(id);
+      return cmd?.commandDialog.call(undefined, args) ?? '';
+  }
+
   /**
    * Start or restart the pending timeout.
    */
@@ -904,6 +922,17 @@ export namespace CommandRegistry {
      * The default value is `() => true`.
      */
     isVisible?: CommandFunc<boolean>;
+
+    /**
+     * A function which sets the command dialog text.
+     *
+     * #### Notes
+     * This function sets a string which the screen reader will
+     * read aloud. This will be a description of the command executed.
+     *
+     * The default value is an empty string.
+     */
+    commandDialog? : string | CommandFunc<string>
   }
 
   /**
@@ -1311,6 +1340,7 @@ namespace Private {
     readonly isToggled: CommandFunc<boolean>;
     readonly isToggleable: boolean;
     readonly isVisible: CommandFunc<boolean>;
+    readonly commandDialog : CommandFunc<string>;
   }
 
   /**
@@ -1345,7 +1375,8 @@ namespace Private {
       isEnabled: options.isEnabled || trueFunc,
       isToggled: options.isToggled || falseFunc,
       isToggleable: options.isToggleable || !!options.isToggled,
-      isVisible: options.isVisible || trueFunc
+      isVisible: options.isVisible || trueFunc,
+      commandDialog: asFunc(options.commandDialog, emptyStringFunc)
     };
   }
 

packages/virtualdom/src/index.ts

@@ -692,6 +692,11 @@ export type ElementSpecialAttrs = {
    */
   readonly className?: string;
 
+  /**
+   * The dialog text for the command dialog.
+   */
+  readonly dialogText?: string;
+
   /**
    * The JS-safe name for the HTML `for` attribute.
    */
@@ -1058,6 +1063,7 @@ export namespace h {
   export const dfn: IFactory = h.bind(undefined, 'dfn');
   export const div: IFactory = h.bind(undefined, 'div');
   export const dl: IFactory = h.bind(undefined, 'dl');
+  export const dialog: IFactory = h.bind(undefined, 'dialog');
   export const dt: IFactory = h.bind(undefined, 'dt');
   export const em: IFactory = h.bind(undefined, 'em');
   export const embed: IFactory = h.bind(undefined, 'embed');
@@ -1490,6 +1496,7 @@ namespace Private {
     key: true,
     className: true,
     htmlFor: true,
+    dialogText: true,
     dataset: true,
     style: true
   };
@@ -1515,6 +1522,13 @@ namespace Private {
       element.setAttribute('class', attrs.className);
     }
 
+    // Set the aria live and ID for the command dialog
+    if (attrs.dialogText !== undefined) {
+      element.setAttribute('aria-live', 'assertive');
+      element.setAttribute('role', 'alert')
+      element.setAttribute("id", `${attrs.dialogText}`.trim())
+    }
+
     // Add the element `for` attribute.
     if (attrs.htmlFor !== undefined) {
       element.setAttribute('for', attrs.htmlFor);

packages/widgets/src/commandpalette.ts

@@ -596,6 +596,11 @@ export namespace CommandPalette {
      */
     readonly command: string;
 
+    /**
+     * The description of the command for the screen reader.
+     */
+    readonly commandDialog: string;
+
     /**
      * The arguments for the command.
      */
@@ -786,6 +791,7 @@ export namespace CommandPalette {
             role: 'menuitemcheckbox',
             'aria-checked': `${data.item.isToggled}`
           },
+          this.renderItemAlert(data),
           this.renderItemIcon(data),
           this.renderItemContent(data),
           this.renderItemShortcut(data)
@@ -797,6 +803,7 @@ export namespace CommandPalette {
           dataset,
           role: 'menuitem'
         },
+        this.renderItemAlert(data),
         this.renderItemIcon(data),
         this.renderItemContent(data),
         this.renderItemShortcut(data)
@@ -853,7 +860,7 @@ export namespace CommandPalette {
      */
     renderItemLabel(data: IItemRenderData): VirtualElement {
       let content = this.formatItemLabel(data);
-      return h.div({ className: 'lm-CommandPalette-itemLabel' }, content);
+      return h.div({ className: 'lm-CommandPalette-itemLabel', 'aria-live': "assertive", "aria-label": `${content}`, 'id': `${content}`.toLowerCase().replace(/ /g, '') }, content);
     }
 
     /**
@@ -868,6 +875,11 @@ export namespace CommandPalette {
       return h.div({ className: 'lm-CommandPalette-itemCaption' }, content);
     }
 
+    renderItemAlert(data: IItemRenderData): VirtualElement {
+      let content = this.formatAlertDialog(data);
+      return  h.dialog({ dialogText: ` ${content} `})
+    }
+
     /**
      * Render the shortcut for a command palette item.
      *
@@ -997,6 +1009,10 @@ export namespace CommandPalette {
     formatItemCaption(data: IItemRenderData): h.Child {
       return data.item.caption;
     }
+
+    formatAlertDialog(data: IItemRenderData): h.Child {
+      return data.item.commandDialog;
+    }
   }
 
   /**
@@ -1462,6 +1478,13 @@ namespace Private {
      */
     readonly rank: number;
 
+    /**
+     * The command dialog text for the command item.
+     */
+    get commandDialog(): string {
+      return this._commands.commandDialog(this.command, this.args);
+    }
+
     /**
      * The display label for the command item.
      */