Expense UI Responsive and Accessibility Behavior

Summary

Expense reuses shared responsive layout primitives and flexible card/form grids. Accessibility evidence is Foundation rather than a confirmed conformance level.

Confirmed behavior

• ESS uses shared RequestPage, Field, table, and loading components.
• Compatibility uses flexible grids, cards, a data table, and a modal.
• The add button has an accessible label.
• The compatibility form overlay declares dialog and modal semantics.
• Native input types are used for numbers and dates.
• Buttons expose disabled state for non-Pending card actions.

Gaps

No Expense-specific keyboard test, screen-reader test, automated accessibility suite, focus-management assertion, contrast audit, or formal responsive breakpoint test is confirmed. Some icon/text controls rely on shared component behavior.

Screenshot placeholder: narrow and wide layouts with synthetic claims, plus keyboard focus evidence when available.

Requires confirmation

Target conformance level, focus trapping/restoration, accessible table behavior, error announcement, mobile approval usability, and ownership of testing require confirmation.

Source References

• UI/salary-ui/apps/client-hrms-portal/src/ess/EssPages.tsx
• UI/salary-ui/apps/client-hrms-portal/src/pages/hr/HrOperationsPage.tsx
• UI/salary-ui/apps/client-hrms-portal/src/components/ApprovalActionModal.tsx

Related Articles

• Expense UI documentation
• Expense business documentation
• Expense API documentation

See Also

• Expense technical documentation
• Expense module

Keywords

• Expense UI
• Responsive and Accessibility

Revision Information

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