details element with summary element

Pass Criteria

Reference

Test ds-001: Details and Summary elements

Summary text

Summary subtree should be used as accessible name

No accessible description.

Code

<details id="details1">
	<summary>Summary text</summary>
	<p>Summary subtree should be used as accessible name</p>
</details>

Test ds-002: Details element with open attribute

Am I open?

This should be expanded by default

Code

<details id="details2" open>
	<summary>Am I open?</summary>
	<p>This should be expanded by default</p>
</details>

Test ds-003: Summary element with aria-label attribute

Summary text

Aria-label should be used as accessible name

Summary subtree should be used as accessible description

Code

<details id="details3">
	<summary aria-label="aria-label attribute">Summary text</summary>
	<p>Aria-label should be used as accessible name</p>
	<p>Summary subtree should be used as accessible description</p>
</details>

Test ds-004: Summary element with aria-labelledby attribute

Summary text

p referenced by aria-labelledby

Aria-labelledby should be used as accessible name

Summary subtree should be used as accessible description

Code

<details id="details4">
	<summary aria-labelledby="ds-004-labelledby">Summary text</summary>
	<p>id="ds-004-labelledby">p referenced by aria-labelledby</p>
	<p>Aria-labelledby should be used as accessible name</p>
</details>

Test ds-005: Summary element with title attribute

Summary text

Summary subtree should be used as accessible name

Title attribute should be used as accessible description

Code

<details id="details4">
	<summary title="title text">Summary text</summary>
	<p>Summary subtree should be used as accessible name</p>
	<p>Title attribute should be used as accessible description</p>
</details>

Test ds-006: Empty Summary element with title attribute

Title attribute should be used as accessible name

No accessible description.

Code

<details id="details6">
	<summary title="title text"></summary>
	<p>Title attribute should be used as accessible name</p>
</details>

Test ds-007: Empty Summary element without title attribute

User-Agent should provide own text string as accessible name

No accessible description.

Code

<details id="details7">
	<summary></summary>
	<p>User-Agent should provide own text string as accessible name</p>
</details>

Test ds-008: Summary element with aria-describedby attribute

Summary text

p referenced by aria-describedby

Aria-describedby should be used as accessible description

Summary subtree should be used as accessible name

Code

<details id="details8">
	<summary aria-describedby="ds-008-describedby">Summary text</summary>
	<p>id="ds-008-describedby">p referenced by aria-describedby</p>
	<p>Aria-describedby should be used as accessible description</p>
</details>