[Bug]: Accessibility Concerns

[dylan-dot-c]

What happened?

With the website, there might be some small a11y issues when its comes to keyboard focusing on some elements.

1. Add Profile Button: This button is wrapped by an anchor tag which makes it double focusable when you use your keyboard(once for the anchor tag and once for the button). According to HTML5 Document Specification, this is invalid as any interactive elements should not be a descendant of an anchor element.

Content model:
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

Therefore it would make this code invalid.
<a href="..." target="..." rel="..."> <button className="..."> Add your profile </button> </a>

2. There is no proper focus styles on the form elements(input and select and also the search and clear icons in the input). This makes it hard to know where you actually are on the site. Also after careful inspection of the code, I see instances where hover:text-primaryFocus dark:hover:text-secondaryFocus classes were used in the code but at the same time, none of those colors are present in the tailwind-config.js file, so I believe thats why there are no colors to highlight certain focusable elements.

3. Also for the pagination buttons, they are focusable but its set to focus:outline-none which will make it not so visible if tabbed. I think it was done to improve the styling of those but I think it might need to be changed or improved so they can look more button-like.

4. I think we can also have the pagination component a second time at the top, so users wont have to scroll all the way down if they want to move to the next page.

5. Back to the search input, I see there is functionality for searching when the search button is click, but seeing that you guys are debouncing the input, it might not be required, and at the same time, if a user starts to type the search button disappears and changed to the clear button, so if the input is debounced there might not need to be a reason to tie functionality to the search icon as it would just be there for design purposes. Also, the search icons aren't buttons so they aren't focusable.

6. On mobile, when the results are shown, there is little to no space at the bottom for the pagination buttons so they would be hard to press.

7. On Mobile when there is no results found, the screen is split into 2 colors, the primary blue color and the white default color of the webpage, I think that is because the background color is applied to a container div in the application and not to the body or html tag.

P.S. I realized this is a bit long, but if you guys would like me to break it up into smaller issues I can do so.

Add screenshots

What browsers are you seeing the problem on?

Microsoft Edge

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Welcome, @dylan-dot-c! Your issue is like a spark that ignites innovation. We're thrilled to dive into it and work together to find a solution.

Soon the maintainers/owner will review it and provide you with feedback/suggestions.

[dylan-dot-c]

@shyamtawli can I get assigned to this issue please.
Also can you review my other issue as well.