Use useId() for stable unique ID in omnibar aria-controls (#1791)

- Replace hardcoded 'suggestions-list' ID with useId() generated value
- Update SearchForm to generate stable unique ID for aria-controls
- Update SuggestionsList to accept and use id prop
- Ensures proper ARIA relationship and prevents ID conflicts

Addresses PR review comment: #1786 (comment)

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/SearchForm.js

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import { Fragment, h } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useContext, useId } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { AiChatIcon, SearchIcon } from '../../components/Icons.js';
 import { usePlatformName } from '../../settings.provider';
@@ -26,6 +26,7 @@ export function SearchForm({ enableAi, term, setTerm }) {
 
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
+    const suggestionsListId = useId();
 
     const {
         suggestions,
@@ -67,7 +68,7 @@ export function SearchForm({ enableAi, term, setTerm }) {
                             aria-label={t('searchForm_placeholder')}
                             aria-expanded={suggestions.length > 0}
                             aria-haspopup="listbox"
-                            aria-controls="suggestions-list"
+                            aria-controls={suggestionsListId}
                             aria-activedescendant={selectedSuggestion?.id}
                             spellcheck={false}
                             autoComplete="off"
@@ -103,6 +104,7 @@ export function SearchForm({ enableAi, term, setTerm }) {
                     </div>
                 </div>
                 <SuggestionsList
+                    id={suggestionsListId}
                     suggestions={suggestions}
                     selectedSuggestion={selectedSuggestion}
                     setSelectedSuggestion={setSelectedSuggestion}

special-pages/pages/new-tab/app/omnibar/components/SuggestionList.js

@@ -12,16 +12,17 @@ import styles from './SuggestionList.module.css';
 
 /**
  * @param {object} props
+ * @param {string} props.id
  * @param {SuggestionModel[]} props.suggestions
  * @param {SuggestionModel | null} props.selectedSuggestion
  * @param {(suggestion: SuggestionModel) => void} props.setSelectedSuggestion
  * @param {() => void} props.clearSelectedSuggestion
  */
-export function SuggestionsList({ suggestions, selectedSuggestion, setSelectedSuggestion, clearSelectedSuggestion }) {
+export function SuggestionsList({ id, suggestions, selectedSuggestion, setSelectedSuggestion, clearSelectedSuggestion }) {
     const { openSuggestion } = useContext(OmnibarContext);
     const platformName = usePlatformName();
     return (
-        <div role="listbox" id="suggestions-list" class={styles.list}>
+        <div role="listbox" id={id} class={styles.list}>
             {suggestions.map((suggestion) => {
                 return (
                     <button