Improve Accessibility of Modals

[Sharqiewicz]

Feature Request: Improve Accessibility of Modals

Description:

Modals in the application currently do not follow accessibility best practices, which can lead to a confusing user experience, especially for users relying on keyboard navigation or assistive technologies.

Current Issues:

• Modals do not use the built-in <dialog> HTML tag, missing out on inherent accessibility features.
• There is no autofocus on the modal, causing issues with keyboard navigation (e.g., users can tab out of the modal and lose focus).
• Pressing the ESC key does not close the modal, which is an expected behavior for accessibility and usability.
• Overall, the modals can be confusing and difficult to use for users.

Tasks:

1. Utilize the Built-in <dialog> Tag:

   Refactor modal components to use the <dialog> HTML tag to benefit from built-in accessibility features.

2. Update daisyUI:

   Upgrade to the latest version of daisyUI, which uses <dialog> instead of <div> for modal components.

3. Implement React createPortal:

   Use React's createPortal to render modals outside the nested DOM hierarchy, ensuring they are placed at the top of the
   website's DOM. This will improve focus management and accessibility.

Expected Outcomes:

• Enhanced accessibility for modals, making them easier to navigate and interact with using keyboard and assistive technologies.
• Improved user experience by ensuring that focus is properly managed within modals.
• Consistent and expected behaviour when interacting with modals, such as closing with the ESC key.