AI: add aria-label to context chat button

We need to try to make the button more descriptive for screen-readers.

Fixed: 409337524
Change-Id: If815e77fd86a460f9d90faf9447ec90311441745
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448429
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/components/ChatView.ts

@@ -76,7 +76,11 @@ const UIStrings = {
   /**
    *@description Label added to the text input to describe the context for screen readers. Not shown visibly on screen.
    */
-  inputTextAriraDescription: 'You can also use one of the suggested prompts above to start your conversation'
+  inputTextAriraDescription: 'You can also use one of the suggested prompts above to start your conversation',
+  /**
+   *@description Label added to the button that reveals the selected context item in DevTools
+   */
+  revealContextDescription: 'Reveal the selected context item in DevTools',
 } as const;
 
 /*
@@ -953,6 +957,7 @@ function renderSelection({
       tabindex=${hasPickerBehavior ? '-1' : '0'}
       @click=${onContextClick}
       @keydown=${handleKeyDown}
+      aria-label=${i18nString(UIStrings.revealContextDescription)}
     >
       ${icon}${selectedContext?.getTitle() ?? html`<span>${
         lockedString(UIStringsNotTranslate.noElementSelected)