Improve accessibility of dynamically updated FAQ-related articles

Start at the FAQRelatedArticles widget on the customer ticket form and trace its AJAX replacement, heading, layout, and localization paths. Verify loading, result, no-result, and error announcements without moving focus, add the debounce and semantic structure, then test the widget with a screen reader and keyboard navigation.

Description
The “Helpful articles” (FAQRelatedArticles) widget on the customer ticket form is updated dynamically based on the entered subject and message body.
Currently, these updates are not reliably announced by screen readers. The widget also contains presentational clearing elements, skips a heading level, and sends requests without a short debounce delay.

Current behavior

• Loading, results, “no results,” and request errors are not announced to screen readers.
• The dynamic content is replaced entirely after each AJAX response.
• The page heading hierarchy changes from <h1> directly to <h3>.
• .Clear elements are used for layout.
• Searches are triggered without a debounce delay.
• Article results are already rendered as descriptive links inside a <ul>.
• Updating the widget does not move keyboard focus.

Expected behavior

• Screen readers receive concise, non-interrupting status announcements.
• Announcements cover:
  • Loading
  • One matching article
  • Multiple matching articles
  • No matching articles
  • Loading errors
• The article list itself is not automatically read in full.
• Keyboard focus remains in the subject or message field.
• Requests are delayed briefly to prevent unnecessary repeated updates.
• The widget has a correct heading hierarchy and semantic region.
• Layout is handled through CSS rather than .Clear elements.
• Status messages are translated.

Proposed implementation

• Add a persistent status element:

<div id="FAQRelatedArticlesStatus"
     class="FAQRelatedArticlesStatus"
     role="status"
     aria-atomic="true"></div>

• Keep the status element outside the content replaced by AJAX.
• Render the widget as a labelled section:

<section id="FAQRelatedArticles"
         aria-labelledby="FAQRelatedArticlesHeading">
    <h2 id="FAQRelatedArticlesHeading">
        Helpful articles
    </h2>
</section>

• Update the status text after each request without moving focus.
• Add a 400 ms debounce before starting the FAQ search.
• Add localized singular, plural, no-result, and error messages.
• Remove .Clear elements and use flexbox for the header layout.