Fix screen reader accessibility for occurrences buttons in css overview

Bug: 384276596
Change-Id: Ic04e6e5f69a321a7dee3e241595131a349c62321
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6096005
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Sylvester Elorm Coch <[email protected]>

Author: ElormCoch

front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -702,15 +702,16 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
 
     const total = values.reduce((prev, curr) => prev + curr[1].length, 0);
 
-    return UI.Fragment.Fragment.build`<ul>
+    return UI.Fragment.Fragment.build`<ul aria-label="${type}">
     ${values.map(([title, nodes]) => {
       const width = 100 * nodes.length / total;
       const itemLabel = i18nString(UIStrings.nOccurrences, {n: nodes.length});
 
       return UI.Fragment.Fragment.build`<li>
         <div class="title">${title}</div>
         <button data-type="${type}" data-path="${path}" data-${dataLabel}="${title}"
-        jslog="${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}">
+        jslog="${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}"
+        aria-label="${title}: ${itemLabel}">
           <div class="details">${itemLabel}</div>
           <div class="bar-container">
             <div class="bar" style="width: ${width}%;"></div>