[Accessibility]: Autocomplete options not accessible by keyboard interaction

[gselderslaghs]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When using the Autocomplete component, shown options are not tabbable/focusable by keyboard interaction which causes reduced accessibility towards people who rely on keyboard input

Current Behavior

Options are shown when typing, however, when trying to tab into the options by keyboard interaction to select desired option, tab focus goes to next page element

Codepen example

Expected behavior

Autocomplete options should be able to select by mouse or keyboard input

Possible Solutions or Causes

Implement the necessary functional attributes on initialization in order to make options tabbable/focusable by keyboard interaction

Your Environment

• Version used: 2.1.1

[gselderslaghs]

Found an additional bug where autocomplete component's functionality doesn't seem to be backward compatible with firefox < 113 and other older browsers, the options do not seem to be accessible by keyboard input

Needs review

[gselderslaghs]

Found an additional bug where autocomplete component's functionality doesn't seem to be backward compatible with firefox < 113 and other older browsers, the options do not seem to be accessible by keyboard input

Needs review

This has to do with the CSS declaration, the active states are added, items can be selected, however, the active state css declaration "color-mix" does not seem to be supported

Example of result with color-mix

Example when changing to hex color

Conclusion: unsupported in older browsers (<= 2023) https://caniuse.com/mdn-css_types_color_color-mix, the color-mix implementation is used on the background-color property and has currently a broader usage in the Materialize framework
This makes the end users in older browser not able to visually indicate which item is actively focussed or selected and possible it has implications on other components as wel as the outcome might be the colors generated by color-mix are not being rendered as specified

Currently looking into a fallback implementation if we could prefix it with the autoprefixer or eventually with a custom polyfill