Add aria labels for code completion summary toolbar

Bug: 433952045
Change-Id: Ia732f1dd22b57ab52761d4752aa35e698f98cb83
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6818157
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -68,14 +68,19 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
   // clang-format off
     const recitationNotice = input.citations && input.citations.length > 0 ?
         html`<div class="ai-code-completion-recitation-notice">${lockedString(UIStrings.generatedCodeMayBeSubjectToALicense)}
-                <span class="link" role="link" aria-details=${input.citationsTooltipId}>
+                <span class="link"
+                    role="link"
+                    aria-details=${input.citationsTooltipId}
+                    aria-describedby=${input.citationsTooltipId}
+                    tabIndex="0">
                   ${lockedString(UIStrings.viewSources)}&nbsp;${lockedString('(' + input.citations.length + ')')}</span>
                 <devtools-tooltip
                     id=${input.citationsTooltipId}
                     variant=${'rich'}
                     jslogContext=${input.panelName + '.ai-code-completion-citations'}
                 ><div class="citations-tooltip-container">
                     ${Directives.repeat(input.citations, citation => html`<x-link
+                        tabIndex="0"
                         href=${citation}
                         jslog=${VisualLogging.link(input.panelName + '.ai-code-completion-citations.citation-link').track({
                             click: true
@@ -97,12 +102,14 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                     }
                   })}></devtools-spinner>
                 <span
+                    tabIndex="0"
                     class="link"
                     role="link"
                     jslog=${VisualLogging.link('open-ai-settings').track({
                         click: true,
                     })}
                     aria-details=${input.disclaimerTooltipId}
+                    aria-describedby=${input.disclaimerTooltipId}
                     @click=${() => {
                         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
                     }}
@@ -122,14 +129,14 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                     <div class="tooltip-text">
                       ${input.noLogging ? lockedString(UIStrings.tooltipDisclaimerTextForAiCodeCompletionNoLogging) : lockedString(UIStrings.tooltipDisclaimerTextForAiCodeCompletion)}
                     </div>
-                    <div
+                    <span
                         class="link"
                         role="link"
                         jslog=${VisualLogging.link('open-ai-settings').track({
                             click: true,
                         })}
                         @click=${input.onManageInSettingsTooltipClick}
-                    >${lockedString(UIStrings.manageInSettings)}</div></div></devtools-tooltip>
+                    >${lockedString(UIStrings.manageInSettings)}</span></div></devtools-tooltip>
             </div>
             ${recitationNotice}
         </div>

front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -16,6 +16,12 @@
 
   span.link {
     color: var(--sys-color-on-surface-subtle);
+
+    &:focus-visible {
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+      outline-offset: 0;
+      border-radius: var(--sys-shape-corner-extra-small);
+    }
   }
 
   .ai-code-completion-disclaimer {
@@ -55,6 +61,12 @@
         x-link {
             color: var(--sys-color-primary);
             text-decoration: underline;
+
+            &:focus-visible {
+              outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+              outline-offset: 0;
+              border-radius: var(--sys-shape-corner-extra-small);
+            }
         }
     }
 
@@ -70,7 +82,8 @@
       }
 
       .link {
-        padding: var(--sys-size-5) var(--sys-size-8) 0 var(--sys-size-5);
+        margin: var(--sys-size-5) var(--sys-size-8) 0 var(--sys-size-5);
+        display: inline-block;
       }
     }
   }

front_end/ui/components/tooltips/Tooltip.ts

@@ -448,6 +448,7 @@ export class Tooltip extends HTMLElement {
         this.#anchor.addEventListener('blur', this.hideTooltip);
         this.#anchor.addEventListener('mouseleave', this.hideTooltip);
         this.addEventListener('mouseleave', this.hideTooltip);
+        this.addEventListener('focusout', this.hideTooltip);
       }
     }
     // Prevent interaction with the parent element.