Skip to content

Update a11y-link-in-text-block rule to include HTML anchor elements #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TylerJDev opened this issue May 19, 2025 · 0 comments · May be fixed by #345
Open

Update a11y-link-in-text-block rule to include HTML anchor elements #344

TylerJDev opened this issue May 19, 2025 · 0 comments · May be fixed by #345
Assignees
Labels

Comments

@TylerJDev
Copy link
Member

We currently have an ESLint rule named a11y-link-in-text-block. This rule suggests usage of the inline prop if the link is within a text block, as suggested in a11y-link-text-block.md. We should add onto this rule by also looking at HTML anchor elements (e.g. <a href>) in a similar fashion to how we currently do it in the rule. Instead of suggesting the inline prop, we should suggest conversion of HTML links to Link components that exist within primer/react.

For HTML anchor elements, we should suggest in the ESLint message that it is suggested to utilize the Link component that we provide in PRC. The autofix should replace the anchor element with the Link component, and keep everything else, such as attributes and text content.

  • Update src/rules/a11y-link-in-text-block.js to introduce a new check for HTML anchor elements
  • The new check should mirror the one that we have for the Link component, but instead suggest usage of the Link component and include an autofix which will replace the anchor element with the Link component
  • Update docs/rules/a11y-link-in-text-block.md with the new addition. The update to the docs should include examples of incorrect usage and correct usage, following the theme of the existing content within that file.
  • Add tests in src/rules/a11y-link-in-text-block.js which should test the new change, and ensure that the anchor element is correctly replaced with the Link component
  • Run npm test to ensure that there are no failures related to the changes added

In summary, the change should ideally be lightweight and follow the themes that already exist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
1 participant