feat(new-rule): summary elements must have an accessible name#4511
feat(new-rule): summary elements must have an accessible name#4511WilcoFiers merged 4 commits intodevelopfrom
Conversation
| assert.isFalse(rule.matches(null, vNode)); | ||
| }); | ||
|
|
||
| it('is false for s details parent in a different DOM tree', () => { |
There was a problem hiding this comment.
I don't think this is setup up correctly. This creates a summary element who has a shadowroot div as the parent and the slot isn't doing anything.
Did you mean instead to setup a case where the summary gets used as the slotted content of the details?
| assert.isFalse(rule.matches(null, vNode)); | ||
| }); | ||
|
|
||
| it('is false for s details parent in a different DOM tree', () => { |
There was a problem hiding this comment.
| it('is false for s details parent in a different DOM tree', () => { | |
| it('is false for details parent in a different DOM tree', () => { |
| const parent = virtualNode.parent; | ||
| if ( | ||
| parent.props.nodeName !== 'details' || | ||
| virtualNode.shadowId !== parent.shadowId |
There was a problem hiding this comment.
Can details and summary every not share the same shadowId? details cannot have a shadow root attached to it and if you put a summary as slotted content to the details they'll both have the same shadowId
<custom-details>
<summary>slotted content</summary>
</custom-details>
<script>
customElements.define('custom-details',
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = '<details><slot></slot></details>';
}
}
);
</script>
There was a problem hiding this comment.
Gd catch. Do have a way to see in virtual tree that two nodes are in the same tree?
There was a problem hiding this comment.
I don't know if we have a way to distinguish between light DOM tree and shadow DOM tree.
| return true; | ||
| } | ||
|
|
||
| function hasDetailsContent(vDetails) { |
There was a problem hiding this comment.
Why ignore summary elements of details that don't have content? They are still interactive and screen readers read them out. They don't seem to be treated any differently if the details has text content.
<details>
<summary></summary>
</details>- JAWS / Chrome - "unlabeled zero button, collapsed"
- NVDA / Firefox - "filled right pointing small triangle, collapsed"
- VO / Safari - "collapsed, details"
There was a problem hiding this comment.
I'm not less sure what's going on when there's nothing in the details element to expand. Its just an empty tab stop at that point. Those aren't great, but they're not an WCAG violation IMO.
## [4.10.0](v4.9.1...v4.10.0) (2024-07-29) ### Features - **new-rule:** summary elements must have an accessible name ([#4511](#4511)) ([0d8a99e](0d8a99e)), closes [#4510](#4510) ### Bug Fixes - **all-rules:** fix flakey all-rules firefox test ([#4467](#4467)) ([3f13aa1](3f13aa1)) - **aria-allowed-attr:** allow aria-multiline=false for element with contenteditable ([#4537](#4537)) ([f019068](f019068)) - **aria-allowed-attr:** allow aria-required=false when normally not allowed ([#4532](#4532)) ([2e242e1](2e242e1)) - **aria-prohibited-attr:** allow aria-label/ledby on decendants of widget ([#4541](#4541)) ([07c5d91](07c5d91)) - **aria-roledescription:** keep disabled with { runOnly: 'wcag2a' } ([#4526](#4526)) ([5b4cb9d](5b4cb9d)), closes [#4523](#4523) - **autocomplete-valid:** incomplete for invalid but safe values ([#4500](#4500)) ([e31a974](e31a974)), closes [#4492](#4492) - **build:** limit locales to valid files when using the --all-lang option ([#4486](#4486)) ([d3db593](d3db593)), closes [#4485](#4485) - colorio.js patch mocking CSS ([#4456](#4456)) ([3ef9353](3ef9353)), closes [#4400](#4400) - correct typos in texts ([#4499](#4499)) ([11fad59](11fad59)) - **landmark-unique:** follow spec, aside -> landmark ([#4469](#4469)) ([e32f803](e32f803)), closes [#4460](#4460) - **required-attr:** allow aria-valuetext on slider instead of valuenow ([#4518](#4518)) ([135898b](135898b)), closes [#4515](#4515) This PR was opened by a robot 🤖 🎉
2 participants
This rule checks that summary elements have an accessible name, through text content, aria-label(ledby) or title. It skips summary elements that are not used as controls for
details, or if itsdetailselement has no content.Closes: #4510