APPS-2313: CDSS WOA-5 Remediation of ADA compliance violations

[bergieboy]

APPS-2314 & APPS-2326: Ensure containing elements that allow text resize without loss of functionality.

This was raised by CDSS and the Lighthouse report in Chrome dev tools. The description and justification are below.

• <meta> tags always go inside the element and are typically used to specify a character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page but is machine parsable.
• The user-scalable attribute defines whether users can scale (zoom) the page content on mobile. By default, scaling is on, but if user-scalable is set to '0' or 'no' then this will prevent users from zooming, which negatively affects user experience (in most cases). For accessibility reasons though, user-scalable needs to be set to yes and the maximum-scale must be at least 5.

Current:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=2.0">

Should be:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0">

APPS-2315: Provide a valid label for form fields.

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

aria-label is a field that can be passed directly to react-select, which is below the hood of LUK's Select. Passing this label resolves this issue.

APPS-2327: Provide Adequate Contrast between placeholder and background on Select Component.

Raised by the Lighthouse report from Chrome dev tools.

Passing the 'themes' prop to LUK's Select component allows you to override the color that is used for the placeholder. I wish there were a cleaner way to achieve this, but this is the best solution I found. Open to other suggestions.

const getPlaceholderTheme = (theme) => ({ ...theme, colors: { ...theme.colors, neutral50: '#555E6F' } });

<Select ... theme={getPlaceholderTheme} ... />

APPS-2316: Ensure ARIA roles, states, and properties are valid. [UPDATED]

using useRef to set ref on the Wrapper component, I was able to search its children for the input element and set the attribute, aria-autocomplete, to 'none'. This should solve this issue.

As far as I can tell, this is not achievable when using react-select, which is what's under the hood for LUK's Select and only allows for aria-label and aria-labeledby to be passed directly. aria-autocomplete is set to list, but cannot be modified in any way that I have found yet. The PR listed below is from about a month ago in the react-select repo, and it would allow for you to pass aria properties, but it doesn't seem to have gotten much attention.

PR for allowing any aria property

[solomontang]

Regarding the contrast of the placeholder in select, this is probably a change we wanna make to the luk repo

[UnsungHero97]

Please sort.