RPP: add aria-label to <button> in DevTools button

This helps screen-readers whereas an aria-label on the devtools-button
element is not always read out (see attached bug for guidance from
a11y).

Bug: 447625868
Change-Id: Idae3f5a886dc88dd10207997000e62f11216db0e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7002767
Commit-Queue: Jack Franklin <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: jackfranklin

front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -235,7 +235,7 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
-              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
+              .accessibleLabel=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}

front_end/ui/components/buttons/Button.test.ts

@@ -210,6 +210,13 @@ describe('Button', () => {
     assert.isAbove(buttonHeight, 0);
   });
 
+  it('sets the accessible label on the internal button', async () => {
+    const button = renderButton({variant: Buttons.Button.Variant.PRIMARY, iconName, accessibleLabel: 'test-label'}, '');
+    const innerButton = button.shadowRoot?.querySelector('button');
+    assert.isOk(innerButton);
+    assert.strictEqual(innerButton.getAttribute('aria-label'), 'test-label');
+  });
+
   describe('in forms', () => {
     function renderForm(data: Buttons.Button.ButtonData = {
       variant: Buttons.Button.Variant.PRIMARY,

front_end/ui/components/buttons/Button.ts

@@ -63,6 +63,10 @@ interface ButtonState {
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
+  /**
+   * Sets aria-label on the internal <button> element.
+   */
+  accessibleLabel?: string;
 }
 
 interface CommonButtonData {
@@ -84,6 +88,10 @@ interface CommonButtonData {
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
+  /**
+   * Sets aria-label on the internal <button> element.
+   */
+  accessibleLabel?: string;
 }
 
 export type ButtonData = CommonButtonData&(|{
@@ -143,6 +151,9 @@ export class Button extends HTMLElement {
     if ('size' in data && data.size) {
       this.#props.size = data.size;
     }
+    if (data.accessibleLabel) {
+      this.#props.accessibleLabel = data.accessibleLabel;
+    }
 
     this.#props.active = Boolean(data.active);
     this.#props.spinner = Boolean('spinner' in data ? data.spinner : false);
@@ -187,6 +198,11 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
+  set accessibleLabel(label: string) {
+    this.#props.accessibleLabel = label;
+    this.#render();
+  }
+
   set reducedFocusRing(reducedFocusRing: boolean) {
     this.#props.reducedFocusRing = reducedFocusRing;
     this.#render();
@@ -357,6 +373,7 @@ export class Button extends HTMLElement {
                 .disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}
+                aria-label=${ifDefined(this.#props.accessibleLabel)}
                 jslog=${ifDefined(jslog)}>
           ${hasIcon ? html`
             <devtools-icon name=${ifDefined(this.#props.toggled ? this.#props.toggledIconName : this.#props.iconName)}>