Detect cases where <a> elements are used as buttons. Anchor tags should be used for navigation, while actions should be assigned to <button> elements to maintain accessibility and expected behavior.
accessibility-a11yui-robustness
High
Ensure heading elements have meaningful content
Verify that heading elements contain meaningful content. Headings are used for structure and navigation, so empty or generic headings negatively impact accessibility and usability.
accessibility-a11y
High
Interactive DOM elements should not have non-interactive ARIA roles
Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.
accessibility-a11y
High
Use appropriate tabIndex values
Ensure tabIndex values are either 0 or -1. Positive tabIndex values disrupt the natural tab order and can create accessibility issues.
accessibility-a11y
High
Use next/image with explicit dimensions and alt
Always use the Next.js Image component for images with width/height (or fill) and meaningful alt text. Avoid plain <img> for app assets.
stack-nextjsstack-react+3
Low
Attach visual diffs for UI changes
When altering UI, include before/after screenshots or a short clip demonstrating the change, and note responsive states and accessibility impacts.
pr-hygieneui-robustness+1
Low
DOM elements should use the autocomplete attribute correctly
Check for missing or incorrect autocomplete attributes. Proper use of autocomplete improves accessibility and usability, especially for screen readers.
accessibility-a11ysecurity-hardening
Low
Internationalize user-facing text with next-intl or next-i18next
Do not hardcode user-visible strings in pages/layouts. Use an i18n library integrated with App Router and load dictionaries on the server.