Summary: Update core UI components to improve accessibility, aesthetics, and usability.

Description:
The ZBX front-end suffers from accessibility issues, including insufficient color contrast, missing or improper ARIA attributes, and UI inconsistencies. This ticket focuses on updating essential UI components to align with modern accessibility and design standards.

Objectives:

• Enhance UI aesthetics (border radius, color consistency, review and improve component interactive states).
• Improve accessibility with proper component labeling and ARIA attributes.

• Provide developers with updated design specifications.

Tasks:

1. Conduct an accessibility audit to identify critical issues of buttons, links, forms, tables and tags. (List could change over time)
2. Define an updated UI priority list (prioritize most affected UI/components first).
3. Apply visual improvements (border radius, colors, hover/focus states).
4. Ensure proper ARIA attributes and component labeling.
5. Update the design library, establish guide lines.
6. Provide updated UI component mockups to developers.

Acceptance Criteria:

• Accessibility audit is completed, and key issues are reviewed and documented.

• UI components are updated with improved accessibility features.
• Improvement suggestions are provided for each reviewed UI problem.

• Component mockups are available in the design library.

• Developers can implement updates without major UI inconsistencies.

Progress tracker: