[BreakpointsView] Turn breakpoints into an a11y tree.

This adds tree, treeitem, and group accessible roles for the relevant
parts of the breakpoints view. It also hides some non-relevant HTML
elements from the a11y tools, and uses a proper separator element
(<hr> instead of <div>).

Bug: chromium:137416, chromium:1346231
Change-Id: I8aaacdd08309339ef0245f426a0bf145d5b9165c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3948896
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>

front_end/panels/sources/components/BreakpointsView.ts

diff --git a/front_end/panels/sources/components/BreakpointsView.ts b/front_end/panels/sources/components/BreakpointsView.ts
index bafc346..16dbb89 100644
--- a/front_end/panels/sources/components/BreakpointsView.ts
+++ b/front_end/panels/sources/components/BreakpointsView.ts
@@ -220,7 +220,7 @@
     // clang-format off
     const renderedGroups = this.#breakpointGroups.map(
         group => LitHtml.html`
-          <div class='divider'></div>
+          <hr />
           ${this.#renderBreakpointGroup(group)}
         `);
     const out = LitHtml.html`
@@ -238,7 +238,7 @@
         </label>
       </div>
       ` : LitHtml.nothing}
-    ${renderedGroups}`;
+    <div role=tree>${renderedGroups}</div>`;
     // clang-format on
     LitHtml.render(out, this.#shadow, {host: this});
   }
@@ -333,9 +333,15 @@
     };
     // clang-format off
     return LitHtml.html`
-      <details class=${LitHtml.Directives.classMap(classMap)} data-group='true' ?open=${group.expanded} @toggle=${toggleHandler}>
+      <details class=${LitHtml.Directives.classMap(classMap)}
+               data-group=true
+               role=group
+               aria-label='${group.name}'
+               aria-description='${group.url}'
+               ?open=${group.expanded}
+               @toggle=${toggleHandler}>
         <summary @contextmenu=${contextmenuHandler} >
-          <span class='group-header'>${this.#renderFileIcon()}<span class='group-header-title' title='${group.url}'>${group.name}</span></span>
+          <span class='group-header' aria-hidden=true>${this.#renderFileIcon()}<span class='group-header-title' title='${group.url}'>${group.name}</span></span>
           <span class='group-hover-actions'>
             ${this.#renderRemoveBreakpointButton(group.breakpointItems, i18nString(UIStrings.removeAllBreakpointsInFile))}
             ${this.#renderBreakpointCounter(group)}
@@ -418,7 +424,11 @@
 
     // clang-format off
     return LitHtml.html`
-    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : -1} @contextmenu=${contextmenuHandler}>
+    <div class=${LitHtml.Directives.classMap(classMap)}
+         aria-label=${breakpointItemDescription}
+         role=treeitem
+         tabIndex=${breakpointItem.isHit ? 0 : -1}
+         @contextmenu=${contextmenuHandler}>
       <label class='checkbox-label'>
         <span class='type-indicator'></span>
         <input type='checkbox' aria-label=${breakpointItem.location} ?indeterminate=${breakpointItem.status === BreakpointStatus.INDETERMINATE} ?checked=${breakpointItem.status === BreakpointStatus.ENABLED} @change=${(e: Event): void => this.#onCheckboxToggled(e, breakpointItem)}>

front_end/panels/sources/components/breakpointsView.css

diff --git a/front_end/panels/sources/components/breakpointsView.css b/front_end/panels/sources/components/breakpointsView.css
index cc93e8a..ba3170a 100644
--- a/front_end/panels/sources/components/breakpointsView.css
+++ b/front_end/panels/sources/components/breakpointsView.css
@@ -10,10 +10,11 @@
   flex-direction: column;
 }
 
-.divider {
-  height: 1px;
-  width: inherit;
+hr {
+  border: none;
   background-color: var(--color-details-hairline);
+  height: 0.5pt;
+  width: inherit;
 }
 
 .code-snippet {