Leave UI Responsive and Accessibility Evidence

Summary

The shared UI primitives provide flexible grids, horizontal table overflow, labels, and modal semantics, but no formal accessibility audit or WCAG claim exists.

Audience

Frontend developers, QA, accessibility reviewers, support, and product owners.

Overview

Confirmed evidence includes auto-fitting card grids, a two-column layout, table wrappers with horizontal overflow, native labeled inputs in ESS, native buttons/selects, and role="dialog" plus aria-modal on Leave modals. Narrow-width behavior is otherwise largely browser/CSS driven.

Requires confirmation: dedicated tablet/mobile breakpoints for every Leave panel, focus trapping/restoration, Escape handling, focus error movement, ARIA-described validation association, table captions/row headers, screen-reader status announcements, and non-color-only status cues. Legacy Field implementation and shared modal details require an accessibility review.

No WCAG conformance is claimed. Test keyboard order, zoom/reflow, modal focus, labels, status meaning, and error announcements before approval.

Screenshot placeholder: sanitized desktop, tablet, and mobile captures with focus indicators visible.

Source References

• UI/salary-ui/apps/client-hrms-portal/src/pages/hr/PayrollFeaturePages.tsx
• UI/salary-ui/apps/client-hrms-portal/src/ess/EssComponents.tsx
• UI/salary-ui/apps/client-hrms-portal/src/styles/pageStyles.ts

Related Articles

• Leave UI
• Leave API

See Also

• Leave business documentation
• Leave technical documentation

Keywords

• Leave UI
• Leave UI Responsive and Accessibility Evidence
• Workforce management

Revision Information

• Status: Draft
• Last reviewed: 2026-07-15
• Review cycle: Quarterly