Update CheckboxLabel to set aria-label on the input element

For a11y, we need to set aria-label on input elements. When
re-enabling a the web test, it complained about missing aria-labels in
the DOM breakpoints sidebar pane. This CL updates CheckboxLabel to
observe aria-label attribute changes and set them on the inner input
element.

See https://crrev.com/c/6591321 for the re-enabled web test update.

Bug: 325443331
Change-Id: I5e141b1f08aed9480aed870fe4d63301d8fba53c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6595128
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>

Author: ktran

front_end/ui/legacy/UIUtils.ts

@@ -1305,7 +1305,7 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title'];
+  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label'];
 
   readonly #shadowRoot!: DocumentFragment;
   #checkboxElement!: HTMLInputElement;
@@ -1362,9 +1362,19 @@ export class CheckboxLabel extends HTMLElement {
     } else if (name === 'title') {
       this.#checkboxElement.title = newValue ?? '';
       this.#textElement.title = newValue ?? '';
+    } else if (name === 'aria-label') {
+      this.#checkboxElement.ariaLabel = newValue;
     }
   }
 
+  override get ariaLabel(): string|null {
+    return this.#checkboxElement.ariaLabel;
+  }
+
+  override set ariaLabel(ariaLabel: string) {
+    this.setAttribute('aria-label', ariaLabel);
+  }
+
   get checked(): boolean {
     return this.#checkboxElement.checked;
   }