Skip to content

Audit tool reports Missing content in <details> headings/anchors with inner text #15558

@dickjohnpaul

Description

@dickjohnpaul

Astro Info

Astro                    v5.17.2
Node                     v20.19.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The Audit tool in the toolbar reports an accessibility issue, "Missing content" for anchors and headings in closed details elements unless the elements have aria-labels explicitly set, or the details element includes the open attribute. The issue persists upon manually opening the details element via clicking the summary.

This was replicated in StackBlitz on Node 20.19.1 but the same behavior occurs on my machine with Node 22.12.0 as required.

What's the expected result?

Since inner text is valid, I believe the audit should pass.

To my knowledge, accessibility is affected when elements have explicitly set display to none, visibility to hidden, or use the aria-hidden="true" attribute. The details element does none of these by default from what I can tell.

This might need better research - I'm not totally up to date with accessibility regarding detail/summary blocks. I couldn't find anything specific in the spec or on MDN.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-fp7kqxhx?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P3: minor bugAn edge case that only affects very specific usage (priority)pkg: astroRelated to the core `astro` package (scope)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions