Accessibility issue in multi select checkbox (no tabbing between items possible)
There is an accessibility issue in the select item of fluent forms (pro). When inspecting the element when tabbing, I saw that the other options / checkboxes had a tabindex of -1 when the focus was on the select.
Accessessibility is mandatory for most websites in the EU and this causes a non compliancy. All companies that are using Fluent Forms (pro) and are undergoing a compliancy audit will fail (WCAG 2.1 AA non compliant )with regards to:
WCAG 2.1.1 Keyboard:
All functionality must be operable with a keyboard.
WCAG 2.4.3 Focus Order:
If a web page has a logical tab order, it must preserve the meaning and operability of the content.
WCAG 2.1.2 No Keyboard Trap:
Keyboard focus should not be trapped within a specific area of the page, preventing users from navigating away.
tabindex Attribute:
The tabindex attribute can be used to control the tab order of elements, but it should be used carefully to avoid creating keyboard traps or illogical navigation.
Another issue is that input elements have a taborder value greater than "0". This is against 2.4.3 Focus Order Level A, where the DOM output is the way to have the taborder automatically for all items with tabindex "0".
Another issue is that labels of forms have the aria-label attribute. Aria-label can be used in cases where text that could label the element is not visible. If there is visible text that labels an element, use aria-labelledby instead. The use of aria-label causes a non-compliancy.
Tagging Lukman Nakib