Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/eight-cherries-relate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"html-aria": patch
---

Bugfix: more AAM mappings were incorporated

- `<dd>` now maps to `definition`
- `<dt>` now maps to `term`
- `<figcaption>` now maps to `caption`
5 changes: 5 additions & 0 deletions .changeset/silly-tigers-teach.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"html-aria": patch
---

Add support for custom elements
5 changes: 5 additions & 0 deletions .changeset/two-toys-sneeze.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"html-aria": minor
---

Bugfix: aria-roledescription and aria-brailleroledescription removed from “naming prohibited” attributes
18 changes: 12 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ Determine which HTML maps to which default ARIA role.
import { getRole } from "html-aria";

// DOM
const el = document.querySelector('article')
const el = document.querySelector("article");
getRole(el); // "article"

// Node.js (no DOM)
Expand All @@ -142,7 +142,7 @@ The spec dictates that **certain elements may NOT receive certain roles.** For e
import { getSupportedRoles } from "html-aria";

// DOM
const el = document.querySelector('img')
const el = document.querySelector("img");
getSupportedRoles(el); // ["none", "presentation", "img"]

// Node.js (no DOM)
Expand Down Expand Up @@ -341,13 +341,19 @@ Further, a common mistake many simple accessibility libraries make is mapping ar

_Note: `—` = [no corresponding role](#whats-the-difference-between-no-corresponding-role-and-the-none-role). Also worth pointing out that in other cases, [global aria-\* attributes](https://www.w3.org/TR/wai-aria-1.3/#global_states) are allowed, so this is unique to the element and NOT the ARIA role._

### Technical deviations from the spec
### Discrepancies between specs

#### Mark
Though the [HTML in ARIA](https://www.w3.org/TR/html-aria) spec was the foundation for this library, at points it conflicts with [AAM](https://www.w3.org/TR/html-aam-1.0). We also have browsers sometimes showing inconsistent roles, too. For these discrepancies, we compare what the specs recommend, along with the library’s current decision in an attempt to follow the most helpful path.

The `<mark>` tag gets the `mark` role. Seems logical, right? Well, not according to the spec. It’s [not listed in the HTML in ARIA spec](https://www.w3.org/TR/html-aria/#el-mark), and it’s worth noting that `<mark>` is a [_related concept_](https://www.w3.org/TR/wai-aria-1.3/#mark), not a base concept as elements usually are.
| Element | [HTML in ARIA](https://www.w3.org/TR/html-aria) | [AAM](https://www.w3.org/TR/html-aam-1.0) | Browsers\* | html-aria |
| :------------- | :---------------------------------------------- | :---------------------------------------- | :------------------------------- | --------------------- |
| `<dd>` | No corresponding role | definition | definition | definition |
| `<dl>` | No corresponding role | list | (inconsistent) | No corresponding role |
| `<dt>` | No corresponding role | term | term | term |
| `<figcaption>` | No corresponding role | caption | caption (`Figcaption` in Chrome) | caption |
| `<mark>` | No corresponding role | mark | mark | mark |

But despite the ARIA specs being pretty clear that `<mark>` and `mark` aren’t directly equivalent, all modern browsers today seem to think they are, and `<mark>` always gets a `mark` role. For that reason, html-aria has sided with practical browser implementation rather than the ARIA spec.
_\* Chrome 132, Safari 18, Firefox 135. _

#### SVG

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@
"@changesets/changelog-github": "^0.5.0",
"@changesets/cli": "^2.27.12",
"@types/aria-query": "^5.0.4",
"@vitest/browser": "^3.0.4",
"@vitest/browser": "^3.0.5",
"aria-query": "^5.3.2",
"dom-accessibility-api": "^0.7.0",
"happy-dom": "^16.7.3",
"happy-dom": "^17.0.2",
"jsdom": "^25.0.1",
"playwright": "^1.50.0",
"playwright": "^1.50.1",
"typescript": "^5.7.3",
"unbuild": "^3.3.1",
"vitest": "^3.0.4"
"vitest": "^3.0.5"
}
}
Loading