Attendance UI Responsive and Accessibility

Summary

Attendance screens use scrollable tables, responsive CSS classes, semantic form controls, buttons, labels, and limited ARIA labeling. Formal accessibility compliance is not established.

Audience

• Frontend developers, QA engineers, accessibility reviewers, and product owners

Confirmed behavior

The weekly board uses a horizontally scrollable table and compact/list modes. Punch views use responsive card/grid styling. Report tables have wrappers suitable for constrained widths. Native inputs, selects, buttons, headings, and tables provide baseline keyboard semantics; the detail close control has an ARIA label.

Requires confirmation

• Complete desktop/tablet/mobile breakpoint behavior
• Logical keyboard order through board cells, modals and bulk actions
• Focus trapping/restoration for dialogs and drawers
• Programmatic error association and live-region announcements
• Table header associations and grid semantics
• Status meaning without color
• Screen-reader labels for icon-only actions
• Contrast and zoom/reflow evidence

No WCAG conformance claim or automated accessibility test suite is supported. Validate with keyboard-only use, browser accessibility inspection, screen reader sampling, responsive emulation, zoom, contrast, and error-state review.

Source References

• UI/salary-ui/apps/client-hrms-portal/src/pages/AttendanceStatus.tsx
• UI/salary-ui/apps/client-hrms-portal/src/pages/hr/PayrollFeaturePages.tsx
• UI/salary-ui/apps/client-hrms-portal/src/pages/AttendanceReportPage.tsx

Related Articles

• Attendance UI
• Attendance business documentation
• Attendance API documentation

See Also

• Attendance troubleshooting
• Attendance reference

Keywords

• Attendance UI
• React
• User workflow

Revision Information

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