[Bug]: Accessibility: focus states missing from select dropdown input elements

[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

Currently the focus states are missing from certain user input elements like select dropdown, this causes reduced accessibility towards people who rely on keyboard input, since it's unclear the element is currently actively focussed or not

Further on, when the dropdown element is expanded, there is no possibility to tab into the list of available options, given the fact it's not possible to tab into the options, this reduces the accessibility to change the value for people who rely on keyboard input

Current Behavior

No response

Expected behavior

Focus state should be visible

Possible Solutions or Causes

Implementation of focus state on certain input elements

As of the current setup there is no possible way to declare a focus state as they are currently implemented on the button component, on the button component this could be achieved by adding elevated, filled, tonal, outlined or text CSS classes, as they have focus pseudo CSS selector defined

However, on existing components (such as the datepicker) defining a style (elevated, filled, tonal, outlined, text) makes it a bit more difficult, since we don't want to hard code a style into a component and make it as flexible as possible in usage

I assume it's currently not possible yet to define a desired style such as elevated, filled, tonal, outlined, text in the Materialize.AutoInit function and suggest it would be a great idea to implement this, with the aim of view to further-on inherit the given value on component basis or by defining a default focus state would also be a great plus towards accessibility

Implementation of tabbability (and auto focus) on dropdown options when expanded
Make dropdown options available via keyboard when options are expanded
Create auto focus, eg. when user hits enter button to expand the options, auto focus on the current selected item if there is a selection, else focus on the first item

Applying as described above, the user should be able to navigate with keyboard through available options and make desired selection

Steps to reproduce

I've came upon this issue using the Datepicker component

1. Create a Datepicker component
2. Tab trough the interface
3. Select dropdown elements (as other triggering elements) are not visually focussed
4. If expanded, dropdown select options are not accessible by keyboard

Your Environment

• Version used: v2.1.1
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Additional information you want to tell us:

[gselderslaghs]

Related to #510 and #538

[gselderslaghs]

Focus states styling on month and year select elements have been implemented in #596

The combination of Datepicker, Modal and FormSelect turned out not working well together, it turned out since the Modal component was removed from Datepicker in the latest version keyboard interaction and active focusing in the FormSelect element are working correctly