Accessibility: Invalid href attributes in multiple components
Description:
Your application currently has several components with invalid href attributes, which negatively impact accessibility and user experience. These issues are identified by ESLint warnings and need to be addressed to ensure our application is accessible to all users.
Components and Lines Affected:
CanteenCard.jsx
Line 41: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Line 51: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Footer.jsx
Line 7: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Line 19: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Navbar.jsx
Line 32: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Steps to Reproduce:
Run the application and inspect the elements in the specified components.
Observe that the href attributes do not contain valid values.
Expected Behavior:
All href attributes should contain valid, navigable addresses to ensure accessibility and proper functionality.
Actual Behavior:
Invalid href attributes cause accessibility issues, making the application less usable for users relying on screen readers and other assistive technologies.
Possible Solutions:
Provide Valid Links: Ensure that all href attributes contain valid URLs.
Use Buttons for Non-Navigational Actions: If an element is meant to look like a link but does not navigate to a new page, use a <button> element styled as a link instead.
Is there an existing issue for this?
What happened?
Title:
Accessibility: Invalid
href
attributes in multiple componentsDescription:
Your application currently has several components with invalid
href
attributes, which negatively impact accessibility and user experience. These issues are identified by ESLint warnings and need to be addressed to ensure our application is accessible to all users.Components and Lines Affected:
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.
Steps to Reproduce:
href
attributes do not contain valid values.Expected Behavior:
href
attributes should contain valid, navigable addresses to ensure accessibility and proper functionality.Actual Behavior:
href
attributes cause accessibility issues, making the application less usable for users relying on screen readers and other assistive technologies.Possible Solutions:
href
attributes contain valid URLs.<button>
element styled as a link instead.Additional Context:
Refer to the eslint-plugin-jsx-a11y documentation for more information on fixing these issues.
Record