fix header levels in example code in README.md#1
fix header levels in example code in README.md#1brandonzylstra wants to merge 1 commit intoastro-community:mainfrom
Conversation
If I understood the intention of the example, I think this is what was meant.
There was a problem hiding this comment.
Pull request overview
This PR attempts to fix the expected HTML output in the README.md example by changing the heading tags to match their corresponding aria-level attributes (e.g., <h1 aria-level="1"> instead of <h3 aria-level="1">). However, this creates a critical discrepancy with the actual component implementation.
Key Issue:
- The
Heading.astrocomponent (shown in the README and confirmed indemo/src/components/Heading.astro) always renders an<h3>tag with a dynamicaria-levelattribute - The "corrected" output now shows varying heading tags (
<h1>,<h2>,<h3>,<h4>) that the component cannot actually produce
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <h1 aria-level="1">Title</h1> | ||
| <p>This section uses a heading of level 1.</p> | ||
|
|
||
| <section> | ||
| <h3 aria-level="2">Heading</h3> | ||
| <h2 aria-level="2">Heading</h2> | ||
| <p>This section uses a heading of level 2.</p> | ||
|
|
||
| <section> | ||
| <h3 aria-level="3">Sub-Heading</h3> | ||
| <p>This section uses a heading of level 3.</p> | ||
|
|
||
| <section> | ||
| <h3 aria-level="4">Sub-Sub-Heading</h3> | ||
| <h4 aria-level="4">Sub-Sub-Heading</h4> |
There was a problem hiding this comment.
The corrected HTML output shows varying heading tags (h1, h2, h3, h4) that match their aria-level attributes. However, the Heading.astro component implementation shown above (line 65) always renders an h3 tag with a dynamic aria-level attribute. This creates a discrepancy: the actual output would be all h3 tags with different aria-level values, not different heading tags. Either the component implementation should be updated to dynamically select the heading tag (e.g., using a dynamic element or conditional rendering), or the expected output should show h3 tags consistently to accurately reflect what the component actually produces.
If I understood the intention of the example, I think this is what was meant.