-
#1048
d9ad334
Thanks @TomPridham! - Cachewindow.getComputedStyle
resultsShould improve performance in environments that don't cache these results natively e.g. JSDOM. This increases memory usage. If this results in adverse effects (e.g. resource constrained browser environments), please file an issue.
- #978
0128d16
Thanks @hiebj! - Add explicit typings location to support use in TypeScript ESM modules
-
#934
8acefc3
Thanks @alonidiom! - Supportaria-description
as descriptor -
#933
a593ee0
Thanks @jlp-craigmorten! - Support"none"
role as a synonym for the"presentation"
role
- #919
215955e
Thanks @MatanBobi! - add anisDisabled
function to check if elements are disabled or not
- #902
df97b80
Thanks @eps1lon! - Fix a case of maximum call stack size exceeded when a node referenced itself inaria-labelledby
.
-
#893
d5af41d
Thanks @eps1lon! - Don't considertitle
in 2EEffectively ensures that
title
will not have precedence over name from content. For example, theoption
in<option title="Title">Content</option>
will now have"Content"
as its accessible name instead of"Title"
.
- #827
a1daca5
Thanks @nolanlawson! - Follow aria-labelledby and aria-describedby if they point to elements in the same shadow root.
-
#811
5b0f48e
Thanks @eps1lon! - Prefer button subtree overtitle
attribute.const name = computeAccessibleName(<button title="from-title">from-content</button>); -'from-title' === name +'from-content' === name
<button title="from-title">from-content</button>
would previously compute the accessible name "from-title". This is correct in ACCNAME 1.2 but is changed in the latest editors draft. The latest editors draft specifically refers to HTML-AAM which says that the subtree should take precedent over thetitle
attribute.computeAccessibleName
now calculates "from-content" as the accessible name.
- #800
de554b0
Thanks @pablo-abc! - Remover circular dependency, which fixes warnings thrown in certain environments.
- #796
cb38778
Thanks @calebeby! -<input type="number" />
now maps torole
spinbutton
(wastextbox
before).
-
#770
7066180
Thanks @eps1lon! - Allow computing name for inaccessible elementsThis is mainly targetted at integration with
@testing-library/dom
. But it can also be used as a general performance boost when used in a JSDOM environment. The rationale is that most elements are part of the a11y tree. In those cases computing a11y tree exclusion is wasted. Since it's expensive, we can disable it. The recommendation is to only ignore a11y tree inclusion locally and specifically enable it for the tests where you do know that a11y tree inclusion will play a role.
-
#762
b3e4a17
Thanks @eps1lon! - Compute name from author formenu
role.Previously we wouldn't compute any name for
menu
to pass some web-platform-tests that covered an exotic use case. Now we correctly respect name from author (e.g.aria-label
oraria-labelledby
).
-
#343
3d755c2
Thanks @eps1lon! - AddisInaccessible
andisSubtreeInaccessible
.isInaccessible
implements https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion.isSubtreeInaccessible
can be used to inject a memoized version of that function intoisInaccessible
.
-
#666
26ee73d
Thanks @eps1lon! - Consider<label />
when computing the accessible name of<output />
Given
<label for="outputid">Output Label</label> <output id="outputid"></output>
Previously the accessible name of the
<output />
would ignore the<label />
. However, an<output />
is labelable and therefore the accessible name is now computed using<label />
elements if they exists. In this example the accessible name is"Output Label"
.
-
#627
0485441
Thanks @eps1lon! - Ensure certain babel helpers aren't requiredSource:
-const [item] = list; +const item = list[0];
Transpiled:
-var _trim$split = list.trim().split(" "), -_trim$split2 = _slicedToArray(_trim$split, 1), -item = _trim$split2[0] +var item = list[0];
-
#629
383bdb6
Thanks @eps1lon! - Use label attribute for naming of<optgroup>
elements.Given
<select> <optgroup label="foo"> <option value="1">bar</option> </optgroup> </select>
Previously the
<optgroup />
would not have an accessible name. Though 2D inaccname
1.2 could be interpreted to use thelabel
attribute:Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that defines a text alternative, return that alternative [...]
This was confirmed in NVDA + FireFox.
-
3866289
#442 Thanks @geoffrich! - Correctly determine accessible name when element contains a slot.Previously, computing the accessible name would only examine child nodes. However, content placed in a slot is is an assigned node, not a child node.
If you have a custom element
custom-button
with a slot:<button><slot></slot></button> <!-- accname of inner <button> is 'Custom name' (previously '') --> <custom-button>Custom name</custom-button>
If you have a custom element
custom-button-default
with default content in the slot:<button><slot>Default name</slot></button> <!-- accname of inner <button> is 'Custom name' (previously 'Default name') --> <custom-button-default>Custom name</custom-button-default> <!-- accname of inner <button> is 'Default name' (previously 'Default name') --> <custom-button-default></custom-button-default>
This is not currently defined in the accname spec but reflects current browser behavior.
-
76e8f93
#430 Thanks @ckundo! - Maintainimg
role forimg
with missingalt
attribute.Previously
<img />
would be treated the same as<img alt />
.<img />
is now treated asrole="img"
as specified.
-
96d4438
#436 Thanks @eps1lon! - Resolve presentational role conflicts when global WAI-ARIA states or properties (ARIA attributes) are used.<img alt="" />
used to have no role. By spec it should haverole="presentation"
with no ARIA attributes orrole="img"
otherwise.
-
03273b7
#406 Thanks @eps1lon! - Fix various issues for input typessubmit
,reset
andimage
Prefer input
value
whentype
isreset
orsubmit
:<input type="submit" value="Submit values"> -// accessible name: "Submit" +// accessible name: "Submit values" <input type="reset" value="Reset form"> -// accessible name: "Reset" +// accessible name: "Reset form"
For input
type
image
consideralt
attribute or fall back to"Submit query"
.
-
fcc66ae
#394 Thanks @marcosvega91! - Ignoretitle
attribute if it is empty.Previously
<button title="">Hello, Dave!</button>
would wrongly compute an empty name.
-
9e46c51
#380 Thanks @eps1lon! - BREAKING CHANGEIgnore
::before
and::after
by default.This was necessary to prevent excessive warnings in
jsdom@^16.4.0
. If you use this package in a browser that supports the second argument ofwindow.getComputedStyle
you can set thecomputedStyleSupportsPseudoElements
option to true:computeAccessibleName(element, { computedStyleSupportsPseudoElements: true, }); computeAccessibleDescription(element, { computedStyleSupportsPseudoElements: true, });
If you pass a custom implementation of
getComputedStyle
then this option defaults totrue
. The following two calls are equivalent:computeAccessibleName(element, { computedStyleSupportsPseudoElements: true, }); computeAccessibleName(element, { getComputedStyle: (element, pseudoElement) => { // custom implementation }, });
-
d6c4455
#352 Thanks @eps1lon! - Support native labels in IE 11Also affects Edge < 18 and Firefox < 56.
-
f7c1981
#288 Thanks @eps1lon! - Drop node 13 supportWe only stopped testing. Probability of breakage should be very low.
New policy:
Only active node versions are supported. Inactive node versions can stop working in a SemVer MINOR release.
-
fa53c51
#210 Thanks @eps1lon! - Implement accessbile description computationimport { computeAccessibleDescription } from "dom-accessibility-api"; const description = computeAccessibleDescription(element);
Warning: It always considers
title
attributes if the description is empty. Even if thetitle
attribute was already used for the accessible name. This is fails a web-platform-test. The other failing test is due toaria-label
being ignored for the description which is correct by spec. It's likely an issue with wpt. The other tests are passing (13/15).
-
d668f72
#273 Thanks @eps1lon! - fix: Concatenate text nodes without spaceFixes
<h1>Hello {name}!</h1>
inreact
computing"Hello name !"
instead ofHello name!
.
-
737dfae
#234 Thanks @willamzv! - Consider<legend>
for the name of its<fieldset>
element.<fieldset> <legend><em>my</em> fieldset</legend> </fieldset>
Computing the name for this fieldset would've returned an empty string previously. It now correctly computes
my fieldset
following the accessible name computation forfieldset
elements
-
969da7d
#240 Thanks @eps1lon! - Reduce over-transpilationSwitched from
for-of
to.forEach
or a basicfor
looparray.push(...otherArray)
topush.apply(array, otherArray)
This removed a bunch of babel junk that wasn't needed.
-
d578329
#248 Thanks @eps1lon! - Consider<caption>
for the name of its<table>
element.<table> <caption> <em>my</em> table </caption> </table>
Computing the name for this table would've returned an empty string previously. It now correctly computes
my table
following the accessible name computation fortable
elements
-
b421d9e
#168 Thanks @eps1lon! - fix: Use relative paths in exports fieldFixes a crash when using ES modules in Node.
- 7f1ada0: Internal polish
-
eb86842: Add option to mock window.getComputedStyle
This option has two use cases in mind:
- fake the style and assume everything is visible. This increases performance (window.getComputedStyle) is expensive) by not distinguishing between various levels of visual impairments. If one can't see the name with a screen reader then neither will a sighted user
- Wrap a cache provider around
window.getComputedStyle
. We don't implement any because the returnedCSSStyleDeclaration
is only live in a browser.jsdom
does not implement live declarations.