EAA - Accessibility - TimePicker selector doesnt support arial-label

[BiaginiMatheus]

Environment

• Package version(s): all
• Operating System: all
• Browser name and version: all

Steps to reproduce

1. Open a page that has the TimePicker
2. Run some accessibility check tool, like axe devtools
3. ❌ Select element must have an accessible name

Actual behavior

It's not possible to send the aria-label to the component and it doesn't take the ref prop, so it's not possible to edit it afterwords as well

Expected behavior

The component should have aria-label on the AM/PM selector

Possible solution

The component should have an aria-label, or at least support it as a param, or worst case, accept the "ref" property to be editable

The component doesn't even support id prop, which makes it hard to query

The workaround I found to achieve that for now is this (Gambiarra in portuguese)

useEffect(() => {
        const select = document.querySelector(`.local-class.${randomGeneratedClassName} .${Classes.HTML_SELECT}.${TimePickerClasses.TIMEPICKER_AMPM_SELECT} select`);
        if (select && !select.hasAttribute('aria-label')) {
            select.setAttribute('aria-label', 'Select AM or PM');
        }
    }, []);