Lookup, date picker and time picker field does not have accessible labels, role and state info.

[JBismonte]

Describe the bug
[VPAT] Lookup, time and date picker button in fields does not have accessible labels and role and state info..

To Reproduce

1. open screenreader
2. go to: https://master-enterprise.demo.design.infor.com/components/field-options/example-index
3. hover over the lookup, date or timepicker buttons, the buttons are not announced.
4. Also do this in web components...

Expected behavior
VPAT Recommendation:
Ensure the following information is conveyed for each control:

1. A meaningful label describing the function/purpose of the control (e.g. "Look up").
2. A role to inform users of how the control functions (e.g. by wrapping the control in a element, or in an element with role="button").
   see example compliant code for the lookup control:

<span class="lookup-wrapper sm">
    <input>
    <button class="trigger">
        <span class=sr-only">Look up</span>
        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
            ...
        </svg>
    </button>
</span> 

Version

• ids-enterprise: v4.36.2 and v4.38.0-dev

Screenshots

Platform

• Infor Application/Team Name: Infor Landmark
• Device: (if applicable) : NA
• OS Version: Windows 10
• Browser Name: firefox
• Browser Version: 85.0 (64-bit)

Additional context
https://jira.lawson.com/browse/LMCLIENT-34219

[tmcconechy]

Which component are you referencing @JBismonte ? The screen shot shows field options but lookup, date or timepicker. Is it all 4? Or one specifically?

[tmcconechy]

Also relates to #4127 i think once we HAVE a tab stop it also needs the label. So basically the same issue there

[ceszilla]

marking as on of the identified high priority items, fyi

[tmcconechy]

As discussed lets add a tabbable setting to trigger fields. In 4.x it will be false and in 5.x it will be true.
I think this should be working fine in WC but you can test it quick if you want.

[janahintal]

Hi @tmcconechy , I noticed that everytime I open the datepicker, time and lookup here https://master-enterprise.demo.design.infor.com/components/form/example-compact-mode.html? the entire page reloads again.

[tmcconechy]

@janahintal i made an update so it wont do that anymore. But the link is now on https://main-enterprise.demo.design.infor.com/components/form/example-compact-mode.html as we renamed main to master. And it will require #5052 to be merged