Enhance Accessibility (a11y): Add Keyboard Focus Indicators & Screen Reader Labels to Controls

[Abhi666-max]

Problem Statement

Upon auditing the frontend accessibility of the application, I noticed that several interactive control elements (such as icon-only action buttons) lack descriptive aria-labels. This renders them confusing to screen readers, violating WCAG 4.1.2 (Name, Role, Value).

Furthermore, relying on default CSS resets often suppresses native focus outlines without replacing them with :focus-visible. This leaves keyboard-only users (who rely on Tab navigation) unable to see which link or action button is currently focused, strictly violating WCAG 2.4.7 (Focus Visible).

Proposed Solution

I propose enhancing the accessibility of the UI components by implementing proper ARIA attributes and a modern, high-contrast keyboard focus ring.

The technical implementation will involve:

1. Auditing the HTML structure (e.g., in the admin/dashboard views) to append context-specific aria-label tags to icon-only <button> and <a> elements.
2. Updating the global stylesheet to prevent the default mouse-click outline (outline: none on :focus) while strictly enforcing a highly visible focus ring for keyboard users using the :focus-visible pseudo-class (e.g., applying an outline-offset and box-shadow that matches the brand color).

Assignment Request

I am actively participating in GSSoC '26 and am prepared to implement these accessibility standards. Please assign this issue to me. Kindly apply the relevant labels (e.g., gssoc, gssoc26, a11y, enhancement).

[snehamathad604]

Hi @Abhi666-max, I am interested in working on this accessibility enhancement under GSSoC '26.
I would like to contribute by improving keyboard focus visibility and adding proper ARIA labels to interactive controls.

Please assign this issue to me if it is available. Thank you!

[madiha-webdev]

Hi @Abhi666-max, I would like to work on this accessibility improvement issue. I understand the importance of WCAG compliance, especially regarding proper ARIA labeling and visible keyboard focus states for accessibility and usability.

I plan to:
• Audit interactive UI elements and add meaningful aria-label attributes where required.
• Improve keyboard navigation visibility using :focus-visible with accessible focus ring styling.
• Ensure the implementation follows WCAG 2.4.7 and 4.1.2 standards without affecting existing UI behavior.

I would appreciate the opportunity to contribute to this issue. Thank you!