fix(a11y): resolve empty link issue in HeroUIProCallout overlay link

[anusha-c18]

Closes #5814

📝 Description

Fixes an accessibility issue where the HeroUIProCallout component contained an empty overlay link. The NextLink element had a href but no accessible name, which causes an “Empty link” error (WCAG 2.4.4).

This update adds semantic labelling using aria-labelledby and improves accessibility compliance and screen reader behaviour.

⛳️ Current behavior (updates)

• The HeroUIProCallout rendered an absolutely positioned NextLink overlay with no text or accessible label.
• This is an “Empty link” violation.
• The clickable area still worked visually but was not correctly announced by screen readers.

🚀 New behavior

• Added aria-labelledby to the overlay link, referencing the title and description inside the card.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Verified using the WAVE tool.

Summary by CodeRabbit

• Accessibility
  • Improved screen reader support by associating the callout link with labeled title and description via aria-labelledby, using newly added, unique IDs for those texts.
• Style
  • Enhanced callout copy by adding “with beautiful” and inserting line breaks for better readability.
  • Visual and content updates only; no changes to the component’s public API or behavior beyond improved labeling.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a8340ff

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@anusha-c18 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Introduces accessibility attributes and IDs to a docs callout component, linking text elements to a NextLink via aria-labelledby. Slightly expands the callout’s visible heading text and line breaks. No changes to the component’s exported API.

Changes

Cohort / File(s)	Summary
Docs callout accessibility and content update apps/docs/components/docs/heroui-pro-callout.tsx	Added ids for title/description, set aria-labelledby on NextLink to reference them, and updated heading text with added phrase and line breaks. No API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly identifies an accessibility fix for the HeroUIProCallout component by resolving an empty link issue on its overlay link and follows the conventional commit style prefix for a11y. It succinctly summarizes the main change without extraneous detail and directly reflects the updates made in the pull request. The phrasing is specific enough that a teammate reviewing history can immediately understand the purpose of this fix. Therefore, the title aligns well with the repository’s guidelines for clarity and conciseness.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	The PR description follows the repository’s template by providing the issue number, a detailed description, current and new behavior sections, a breaking change indicator, and additional information. Each section clearly explains the accessibility fix, the context of the “Empty link” violation, and the applied solution. The required headings and content are present and filled with relevant details. Therefore, the description is complete and conforms to the template.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 28, 2025 4:19pm
heroui-sb	Ready	Preview	Comment	Oct 28, 2025 4:19pm

[wingkwong]

As a result, screen readers cannot determine the link’s purpose. Users relying on assistive technology hear a meaningless or silent link, making navigation confusing.

I don't think callout-title callout-description would help much in this case. prefer something more meaningful.

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5813

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5813

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5813

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5813

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5813

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5813

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5813

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5813

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5813

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5813

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5813

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5813

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5813

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5813

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5813

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5813

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5813

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5813

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5813

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5813

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5813

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5813

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5813

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5813

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5813

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5813

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5813

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5813

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5813

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5813

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5813

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5813

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5813

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5813

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5813

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5813

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5813

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5813

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5813

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5813

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5813

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5813

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5813

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5813

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5813

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5813

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5813

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5813

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5813

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5813

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5813

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5813

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5813

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5813

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5813

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5813

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5813

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5813

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5813

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5813

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5813

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5813

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5813

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5813

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5813

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5813

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5813

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5813

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5813

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5813

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5813

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5813

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5813

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5813

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5813

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5813

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5813

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5813

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5813

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5813

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5813

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5813

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5813

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5813

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5813

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5813

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5813

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5813

commit: a8340ff