Added Accessibility Features to Model Search component

[derekjackson-das]

Summary

Updates to the Model Search component in MulitSearch.tsx, addressing accessibility issues and fixing issue identified in #5564. Changes are limited to the frontend.

• The clear button is keyboard accessible and receives keyboard focus after search field.

• The clear button has an accessible and programatic name and role for assistive technology.

• Focus moves back to the search field after text is cleared when button is removed and search input is empty.
• Slight increase in contrast to the input element's placeholder text to meet WCAG Text Contrast Criteria (Tailwind class .placeholder-gray-400 changes to placeholder-gray-500).
• Decorative magnifying glass icon and "X" svg icons are hidden. (aria-hidden="true").

Change Type

Accessibility

Testing

deque axe automated scan on Multi Search component.

Manual screen reader testing. Keyboard and Screen Reader Recording

1. Move to "Search Model" input text field with screen reader, name and role is announced.
2. Type search term.
3. Navigate to "Clear Search" button, name and role is announced.
4. Use screen reader to "click" the button.
5. "Clear Search" button is removed and focus moves back to "Search Model" input, name and role is announced.

Manual keyboard testing. Keyboard and Screen Reader Recording

1. Open Model list option with Enter key, focus moves to search field.
2. Type in Search field, "X" icon appears.
3. Use tab key to move focus to "X" clear search button.
4. Use Enter or Space key to "click" the clear search button.
5. Clear search button is removed and focus moves back to the search field.

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• My changes do not introduce new warnings
• Local unit tests pass with my changes