"AI Suggestions" button accessibility
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3531588. -->
Reported by: [leo pitt](https://www.drupal.org/user/507600)
Related to !694
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>As of <a href="https://www.drupal.org/project/ai/issues/3489572">https://www.drupal.org/project/ai/issues/3489572</a>, ai_content_suggestions now offers the ability for content editors to generate suggestions for content fields by clicking a button alongside an individual field, and receive a list of suggestions to choose from.</p>
<p>There are some parts of the process which are currently a little confusing.</p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<ol>
<li>Create a standard Drupal CMS install.</li>
<li>Add a "Teaser" plain long text field to the standard Article content type.</li>
<li>Go to the Form Display configuration and enable AI Suggestions for the Title, Teaser and Body field. Save.</li>
<li>Go to create a new Article</li>
<li>Attempt to click on the "AI Function" icon to the right of the Title field</li>
<li>Try to locate the "AI Function" icon for the Teaser field.</li>
</ol>
<h3>Areas for possible update</h3>
<h4>AI Function Usability</h4>
<p>I expect that be able to activate the AI Function immediately by clicking on it.</p>
<p>But instead when I click on the "AI Function" text, it disappears, the field is focussed, and a new AI Icon appears to the right of the field, which I have to click on again to trigger the desired functionality.</p>
<h4>AI Function Accessibility</h4>
<p>Using the keyboard, it is not possible to activate the function: I expect to be able to tab to the "AI Function" button to activate it. But when I tab to field, the "AI Button" disappears. And when I tab again to focus the new button that has appeared, the field loses focus and the intended button disappears.</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<ul>
<li>Have the "AI Suggestions" button be visible at all times - not visible only when the field is focussed. Ensure it has an accessible label.</li>
<li>Remove the "AI Suggestions" pseudo element which is on the field and disappears when focussed.</li>
</ul>
issue