[RPP][AI] Add aria-label for the tooltip and the 'learn more in settings' tooltip button

Bug: 406544094, 406543373
Change-Id: Ie7ab6bd97916e44e07bec1229ef22021c1677bfb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6401713
Auto-Submit: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: AlinaVarkki

front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -631,7 +631,7 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(tooltip);
       assert.strictEqual(
           cleanTextContent(tooltip.innerText),
-          'The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more',
+          'The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more in settings',
       );
     });
 
@@ -664,7 +664,7 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(tooltip);
       assert.strictEqual(
           cleanTextContent(tooltip.innerText),
-          'The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more',
+          'The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more in settings',
       );
     });
 
@@ -735,7 +735,7 @@ describeWithEnvironment('Overlays', () => {
          assert.isOk(tooltip);
          assert.strictEqual(
              cleanTextContent(tooltip.innerText),
-             'Auto annotations are not available. Learn more',
+             'Auto annotations are not available. Learn more in settings',
          );
        });
 
@@ -762,7 +762,7 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(tooltip);
       assert.strictEqual(
           cleanTextContent(tooltip.innerText),
-          'Auto annotations are not available. Learn more',
+          'Auto annotations are not available. Learn more in settings',
       );
     });
 

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -45,7 +45,15 @@ const UIStrings = {
   /**
    *@description Label used for screenreaders on the FRE dialog
    */
-  freDialog: 'Get AI-powered annotation suggestions dialog'
+  freDialog: 'Get AI-powered annotation suggestions dialog',
+  /**
+   *@description Screen-reader text for a tooltip link for navigating to "AI innovations" settings where the user can learn more about auto-annotations.
+   */
+  learnMoreAriaLabel: 'Learn more about auto annotations in settings',
+  /**
+   *@description Screen-reader text for a tooltip icon.
+   */
+  moreInfoAriaLabel: 'More info',
 } as const;
 
 /*
@@ -55,7 +63,7 @@ const UIStringsNotTranslate = {
   /**
    *@description Tooltip link for the navigating to "AI innovations" page in settings.
    */
-  learnMore: 'Learn more',
+  learnMore: 'Learn more in settings',
   /**
    *@description Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
@@ -606,7 +614,11 @@ export class EntryLabelOverlay extends HTMLElement {
 
   #renderAITooltip(opts: {textContent: string, includeSettingsButton: boolean}): Lit.TemplateResult {
     // clang-format off
-    return html`<devtools-tooltip variant="rich" id="info-tooltip" ${Directives.ref(this.#richTooltip)}>
+    return html`<devtools-tooltip
+    variant="rich"
+    id="info-tooltip"
+    aria-label=${i18nString(UIStrings.moreInfoAriaLabel)}
+    ${Directives.ref(this.#richTooltip)}>
       <div class="info-tooltip-container">
         ${opts.textContent}
         ${opts.includeSettingsButton ? html`
@@ -617,6 +629,7 @@ export class EntryLabelOverlay extends HTMLElement {
               click: true,
             })}
             @click=${this.#onTooltipLearnMoreClick}
+            aria-label=${i18nString(UIStrings.learnMoreAriaLabel)}
           >${lockedString(UIStringsNotTranslate.learnMore)}</button>
         ` : Lit.nothing}
       </div>