You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
computedRole returns the element's role regardless of aria-hidden state —
it's not a visibility check. Verified: `<div aria-hidden="true">` (h3)
still returns `computedRole === 'generic'` even though it's removed from
the AX tree. aria-hidden controls *exposure*, not *role*.
Restored DevTools Accessibility panel as the browser-authoritative check
and added a one-line note explaining why computedRole isn't usable for
this question. The spec-encoded JS walker remains the scriptable fallback.
Earlier commit (f2ecc0d) introduced the wrong claim — this corrects it.
Copy file name to clipboardExpand all lines: docs/glimmer-attribute-behavior.md
+8-15Lines changed: 8 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,21 +85,14 @@ ARIA attributes are string-valued, but Glimmer's bare-mustache form applies the
85
85
86
86
#### Verifying the "visible" verdict empirically
87
87
88
-
The "At runtime (ARIA)" column above is derived from the spec. The cleanest empirical confirmation is `Element.computedRole` (WAI-ARIA Reflection — Chrome 135+, Safari 18.4+, Firefox under flag):
89
-
90
-
```js
91
-
// In Chrome's console, after rendering the section-B fragment:
92
-
document.querySelector('#h5').computedRole;
93
-
// → "generic" (verified empirically — element IS in the AX tree, so visible)
94
-
//
95
-
// For comparison, h3 (`aria-hidden="true"`) returns null:
96
-
document.querySelector('#h3').computedRole;
97
-
// → null (element omitted from AX tree, so hidden)
98
-
```
99
-
100
-
`null` means the element isn't exposed to assistive tech (hidden); a string role means it is exposed (visible). This is the browser's actual computed verdict — no spec-derivation needed.
101
-
102
-
If `computedRole` isn't available in your browser, the **DevTools Accessibility panel** is the equivalent manual path: select each element, check whether it's "Exposed" with a role or "Ignored" due to `aria-hidden=true`.
88
+
The "At runtime (ARIA)" column above is derived from the spec. There is no clean cross-browser JS API to read AX-tree exposure directly — `Element.computedRole` returns the element's _role_ regardless of aria-hidden, so it is **not** a visibility check (verified: `document.querySelector('#h3').computedRole === 'generic'` even though h3 is `aria-hidden="true"` and not exposed). The cleanest browser-authoritative check is the **DevTools Accessibility panel**:
89
+
90
+
1. Render the section-B fragment from the reproduction template (each `h*` element gets a stable id).
91
+
2. Open DevTools → Accessibility tab (Chrome: Elements panel sidebar; Firefox: separate "Accessibility" tab).
92
+
3. Select each `h*` element. The panel shows whether it's exposed to AT:
93
+
-**Exposed** with a computed role → element is in the accessibility tree → "visible".
94
+
-**"Ignored"** with reason "aria-hidden=true" → element removed from AT tree → "hidden".
95
+
4. Confirm h1, h2, h5, h11 are exposed (matching spec), and h3, h7, h12, h14 are ignored due to aria-hidden.
103
96
104
97
A scriptable fallback that works everywhere — encodes the spec's aria-hidden rule directly:
0 commit comments