dequelabs / dequelabs/axe-core

Update getAccessibleRefs to support elementInternals

Open
#5,222 0 comments 0 reactions 0 assignees View on GitHub
elementInternals feat
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

`getAccessibleRefs` currently does not handle accessible references from element internals. In supporting this, we also want to have the association be to virtual nodes and not pure DOM nodes, and allowing filtering the return by how it's associated (such as in [color-contrast-matches](https://github.com/dequelabs/axe-core/blob/develop/lib/rules/color-contrast-matches.js#L116-L120)).

We are thinking we could create the accessible ref at DOM walk time (`getFlattenTree`) rather than lazily through `getAccessibleRef`. In order to avoid walking the DOM twice (once to keep track of the associations and then again afterwards to get the virtual nodes), we should keep track of both nodes that have ids and nodes that have accessible ref attributes / properties. Then once we have finished walking the DOM we can use those lists to create the accessible reference without having to rewalk the DOM. We could then add the references to the virtual node itself (e.g. `vNode.accessibleRefs`).

So for example, the end result could look like this:

```js
class VirtualNode {
accessibleRefs = [
{
vNodes: [vNode, vNode],
attribute: 'aria-labelledby'
}, {
vNodes: [vNode],
attribute: 'aria-activedescendant'
}
]

getAccessibleRefs(ariaProp) {
if (ariaProp) {
return this.accessibleRefs.filter(ref => ref.attribute === araiProp).map(ref => ref.vNodes);
}
return this.accessibleRefs.map(ref => ref.vNodes);
}
}
```

Contributor guide

Open the contributing guide

Research direction

Start by reading getFlattenTree and getAccessibleRef, then inspect VirtualNode and the color-contrast-matches usage of getAccessibleRefs. Trace how IDs and accessible reference attributes or properties are collected during the DOM walk. Done means element-internals references resolve to virtual nodes, and callers can filter references by their association attribute without rewalking the DOM.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.