AI: add an aria-description to the chat input

We had feedback from the a11y tester that jumping the user into the
textarea could be confusing rather than focusing on the first element in
the panel and letting the user tab through. To avoid that confusion, we
agreed that adding a description to the textarea to tell the user about
the suggested prompts.

Fixed: 408289708
Change-Id: Ie1bc5b22c4f694628ed5ee339b32ca6ab819efa1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6433968
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/components/ChatView.ts

@@ -72,6 +72,11 @@ const UIStrings = {
    *@description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
    */
   notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
+
+  /**
+   *@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'
 } as const;
 
 /*
@@ -1310,6 +1315,7 @@ function renderChatInput({
         @input=${(event: KeyboardEvent) => onTextInputChange((event.target as HTMLInputElement).value)}
         placeholder=${inputPlaceholder}
         jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
+        aria-description=${i18nString(UIStrings.inputTextAriraDescription)}
       ></textarea>
       <div class="chat-input-buttons">
         ${renderTakeScreenshotButton({