fix: a11y issues

[wesleyboar]

Overview

Mirror accessibility fixes for TUP.

Related

• mimics fix: a11y issues (+ update core-cms & core-styles) tup-ui#537
• accompanied by feat: ...rest spread to Button for HTML attr passthrough #22

Changes

• fix: match new color contrast from Core-CMS & TUP
• fix: required not passed to FormikField input

Testing / Screenshots

Skipped. Done via TACC/tup-ui#537.

[qodo-code-review]

Review Summary by Qodo

Fix accessibility issues and test failures

🐞 Bug fix

Walkthroughs

Description

• Update navbar link color to meet WCAG contrast requirements
• Pass required attribute to FormikInput element
• Fix Paginator tests by adding missing callback prop

Diagram

flowchart LR
  A["Navbar Color Contrast"] --> B["WCAG Compliance"]
  C["FormikInput required Attr"] --> D["Form Validation"]
  E["Paginator Tests"] --> F["Test Fixes"]

Loading

File Changes

1. src/lib/Navbar/Navbar.module.css 🐞 Bug fix +2/-2

Update navbar colors for WCAG contrast

• Changed .nav-link color from hardcoded #707070 to var(--global-color-primary--xx-dark) for
 better contrast
• Moved color property from .nav-text to .nav-icon to apply correct styling

src/lib/Navbar/Navbar.module.css

---

2. src/lib/FieldWrapperFormik/fields/FormikInput.tsx 🐞 Bug fix +1/-1

Pass required attribute to input element

• Added required={required} attribute to the input element
• Ensures the HTML input receives the required attribute passed to the wrapper component

src/lib/FieldWrapperFormik/fields/FormikInput.tsx

---

3. src/lib/Paginator/Paginator.test.jsx 🧪 Tests +4/-2

Add required callback prop to tests

• Added missing callback={() => null} prop to Paginator component in first test
• Added missing callback={() => null} prop to Paginator component in second test

src/lib/Paginator/Paginator.test.jsx

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Required inconsistent across fields 🐞 Bug ✓ Correctness

Description

This PR makes FormikInput forward required to the native <input>, but other peer field
components (select/textarea/checkbox/file) and FormField still destructure required and never
pass it to the underlying control. As a result, fields can render a visible “Required” badge but
lack the semantic required attribute, causing inconsistent accessibility/validation behavior
depending on which field component is used.

Code

src/lib/FieldWrapperFormik/fields/FormikInput.tsx[24]

+      <input {...field} {...props} id={id || field.name} required={required} />

Evidence

The PR change adds required={required} only to FormikInput’s <input>, but other field
components in the same module accept required (and pass it to FieldWrapper for the badge) while
omitting it from the actual native element. The types also explicitly include required?: boolean
for these props, indicating the API intends to support it consistently.

src/lib/FieldWrapperFormik/fields/FormikInput.tsx[5-25]
src/lib/FieldWrapperFormik/fields/index.ts[3-25]
src/lib/FieldWrapperFormik/fields/FormikSelect.tsx[5-27]
src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx[5-25]
src/lib/FieldWrapperFormik/fields/FormikCheck.tsx[5-31]
src/lib/Form/FormField.jsx[48-132]
src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx[44-66]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`required` is now forwarded to the native control in `FormikInput`, but other field components in this repo still accept/display `required` without applying it to the underlying form element. This creates inconsistent required semantics and accessibility depending on which field component is used.

## Issue Context
`required` is part of the public prop types for multiple field components, and `FieldWrapper` already uses it to render a "Required" badge. To make the behavior consistent, the native control should also receive `required={required}` (or the dropzone input should receive a required attribute via `getInputProps`).

## Fix Focus Areas
- src/lib/FieldWrapperFormik/fields/FormikSelect.tsx[5-28]
- src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx[5-25]
- src/lib/FieldWrapperFormik/fields/FormikCheck.tsx[5-31]
- src/lib/Form/FormField.jsx[48-132]
- src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx[44-66]

## Notes
For `react-dropzone`, consider passing `required` via `getInputProps({ required })` and/or explicitly adding `required={required}` to the `<input>` if compatible with how `getInputProps` is intended to be used.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[wesleyboar]

Qodo analysis seems correct. There is more to do for full support. For now, I am just porting TUP changes, to stay in scope of my work. And I hear this repo will be revisited this year, maybe even rebuilt with ShadCN.