Fix: Replace duplicate callout headings with ARIA-labeled sections

[reshma045]

Description

This PR addresses issue #871 by replacing repeated heading elements (<h5>Tip</h5>, <h5>Note</h5>, etc.) used in callout blocks with <section> elements that include accessible ARIA labels instead.

Changes Made

• Modified src/components/callout/index.astro:
  • Replaced <h5> heading with <section role="region" aria-label="...">
  • Ensured the title is passed as an ARIA label instead of a heading element.
  • Removed heading tags to prevent unnecessary duplication in the document outline.

Before vs After

• Before: Multiple <h5>Tip</h5> or <h5>Note</h5> headings were present, cluttering the document structure and affecting accessibility.
• After: Replaced with <section aria-label="Tip">...</section> and similar, improving semantic clarity and screen reader navigation.

Screenshot

Before

After

Related Issue

Closes #871

[coseeian]

This PR looks good.

[reshma045]

Thank you for the feedback! Please let me know if there's anything else you'd like me to update. Otherwise, I’ll wait for the merge whenever it fits your timeline.

[reshma045]

Hi @coseeian,
Just checking in to see if there's anything else you'd like me to adjust on this PR. If everything looks good, I'm happy to wait until the timing is right for a merge. Thanks again for your time and review!

[reshma045]

Hi @perminder-17 , could you please review my PR?
Thank you

[perminder-17]

Thanks for your work @reshma045. I'll have a look today in few hours. Thanks for your patience 🙂

[ksen0]

Hi @reshma045 , thanks for your work on this and your patience! Some minor points that I think could be improved. Rather than inline css, a class would be preferred in general; however, in this case, looks like the semantic heading h5 is replaced entirely with section. Could you try to create this fix without removing the use of h5, which has additional consequences? Seems like if a fix is possible with h5 then the inline CSS would also not be needed.

[reshma045]

Thank you for your feedback, @ksen0!

Yes, preserving the semantic value of h5 while improving accessibility makes sense. I’ll revise the implementation to retain the h5 heading within the callout component and explore a way to include ARIA enhancements without relying on inline CSS.
I’ll push the updated changes shortly. Please let me know if there are any additional preferences you'd like me to keep in mind during the update.