![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
dom-accessibility-api
Advanced tools
Package description
The dom-accessibility-api package is a library that provides utility functions for querying and manipulating the accessibility tree of DOM elements. It allows developers to retrieve accessible names and descriptions, roles, and other properties related to accessibility, which are crucial for building web applications that are compliant with accessibility standards.
Getting the accessible name
This feature allows you to retrieve the accessible name of a DOM element, which is the name that screen readers will announce to users.
import { getAccessibleName } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const accessibleName = getAccessibleName(element);
Getting the accessible description
This feature allows you to retrieve the accessible description of a DOM element, providing additional context to assistive technologies.
import { getAccessibleDescription } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const accessibleDescription = getAccessibleDescription(element);
Getting the role
This feature allows you to get the computed role of a DOM element, which is used by assistive technologies to understand the purpose of the element.
import { getRole } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const role = getRole(element);
aria-query is a package that provides maps of ARIA roles, states, and properties to use with DOM elements. It is similar to dom-accessibility-api in that it helps with accessibility concerns but does not provide functions to directly retrieve accessible names or descriptions.
ally.js is a JavaScript library to help modern web applications with accessibility concerns. It provides a higher-level API compared to dom-accessibility-api and includes features for focus handling, keyboard interaction, and more.
Changelog
0.5.4
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.
Readme
Computes the accessible name or description of a given DOM Element. https://w3c.github.io/accname/ implemented in JavaScript for testing.
$ yarn add dom-accessibility-api
import {
computeAccessibleName,
computeAccessibleDescription,
} from "dom-accessibility-api";
I'm not an editor of any of the referenced specs (nor very experience with using them) so if you got any insights, something catches your eye please open an issue.
WARNING: Only active node versions are supported. Inactive node versions can stop working in a SemVer MINOR release.
ie 11
edge >= 14
firefox >= 52
chrome >= 49
safari >= 10
node 10.0
or check the published .browserslistrc
Using https://github.com/web-platform-tests/wpt. Be sure to init submodules when cloning. See the test readme for more info about the test setup.
153/159
web-platform-tests
accname
✓ [expected fail] description_1.0_combobox-focusable-manual.html
✓ [expected fail] description_from_content_of_describedby_element-manual.html
✓ description_link-with-label-manual.html
✓ description_test_case_557-manual.html
✓ description_test_case_664-manual.html
✓ description_test_case_665-manual.html
✓ description_test_case_666-manual.html
✓ description_test_case_772-manual.html
✓ description_test_case_773-manual.html
✓ description_test_case_774-manual.html
✓ description_test_case_838-manual.html
✓ description_test_case_broken_reference-manual.html
✓ description_test_case_one_valid_reference-manual.html
✓ description_title-same-element-manual.html
✓ name_1.0_combobox-focusable-alternative-manual.html
✓ name_1.0_combobox-focusable-manual.html
✓ name_checkbox-label-embedded-combobox-manual.html
✓ name_checkbox-label-embedded-listbox-manual.html
✓ name_checkbox-label-embedded-menu-manual.html
✓ name_checkbox-label-embedded-select-manual.html
✓ name_checkbox-label-embedded-slider-manual.html
✓ name_checkbox-label-embedded-spinbutton-manual.html
✓ name_checkbox-label-embedded-textbox-manual.html
✓ name_checkbox-label-multiple-label-alternative-manual.html
✓ name_checkbox-label-multiple-label-manual.html
✓ name_checkbox-title-manual.html
✓ name_file-label-embedded-combobox-manual.html
✓ name_file-label-embedded-menu-manual.html
✓ name_file-label-embedded-select-manual.html
✓ name_file-label-embedded-slider-manual.html
✓ name_file-label-embedded-spinbutton-manual.html
✓ [expected fail] name_file-label-inline-block-elements-manual.html
✓ [expected fail] name_file-label-inline-block-styles-manual.html
✓ name_file-label-inline-hidden-elements-manual.html
✓ name_file-label-owned-combobox-manual.html
✓ name_file-label-owned-combobox-owned-listbox-manual.html
✓ name_file-title-manual.html
✓ name_from_content-manual.html
✓ name_from_content_of_label-manual.html
✓ name_from_content_of_labelledby_element-manual.html
✓ name_from_content_of_labelledby_elements_one_of_which_is_hidden-manual.html
✓ name_heading-combobox-focusable-alternative-manual.html
✓ name_image-title-manual.html
✓ name_link-mixed-content-manual.html
✓ name_link-with-label-manual.html
✓ name_password-label-embedded-combobox-manual.html
✓ name_password-label-embedded-menu-manual.html
✓ name_password-label-embedded-select-manual.html
✓ name_password-label-embedded-slider-manual.html
✓ name_password-label-embedded-spinbutton-manual.html
✓ name_password-title-manual.html
✓ name_radio-label-embedded-combobox-manual.html
✓ name_radio-label-embedded-menu-manual.html
✓ name_radio-label-embedded-select-manual.html
✓ name_radio-label-embedded-slider-manual.html
✓ name_radio-label-embedded-spinbutton-manual.html
✓ name_radio-title-manual.html
✓ name_test_case_539-manual.html
✓ name_test_case_540-manual.html
✓ name_test_case_541-manual.html
✓ name_test_case_543-manual.html
✓ name_test_case_544-manual.html
✓ name_test_case_545-manual.html
✓ name_test_case_546-manual.html
✓ name_test_case_547-manual.html
✓ name_test_case_548-manual.html
✓ name_test_case_549-manual.html
✓ name_test_case_550-manual.html
✓ name_test_case_551-manual.html
✓ [expected fail] name_test_case_552-manual.html
✓ [expected fail] name_test_case_553-manual.html
✓ name_test_case_556-manual.html
✓ name_test_case_557-manual.html
✓ name_test_case_558-manual.html
✓ name_test_case_559-manual.html
✓ name_test_case_560-manual.html
✓ name_test_case_561-manual.html
✓ name_test_case_562-manual.html
✓ name_test_case_563-manual.html
✓ name_test_case_564-manual.html
✓ name_test_case_565-manual.html
✓ name_test_case_566-manual.html
✓ name_test_case_596-manual.html
✓ name_test_case_597-manual.html
✓ name_test_case_598-manual.html
✓ name_test_case_599-manual.html
✓ name_test_case_600-manual.html
✓ name_test_case_601-manual.html
✓ name_test_case_602-manual.html
✓ name_test_case_603-manual.html
✓ name_test_case_604-manual.html
✓ name_test_case_605-manual.html
✓ name_test_case_606-manual.html
✓ name_test_case_607-manual.html
✓ name_test_case_608-manual.html
✓ name_test_case_609-manual.html
✓ name_test_case_610-manual.html
✓ name_test_case_611-manual.html
✓ name_test_case_612-manual.html
✓ name_test_case_613-manual.html
✓ name_test_case_614-manual.html
✓ name_test_case_615-manual.html
✓ name_test_case_616-manual.html
✓ name_test_case_617-manual.html
✓ name_test_case_618-manual.html
✓ name_test_case_619-manual.html
✓ name_test_case_620-manual.html
✓ name_test_case_621-manual.html
✓ [expected fail] name_test_case_659-manual.html
✓ [expected fail] name_test_case_660-manual.html
✓ [expected fail] name_test_case_661-manual.html
✓ [expected fail] name_test_case_662-manual.html
✓ [expected fail] name_test_case_663a-manual.html
✓ name_test_case_721-manual.html
✓ name_test_case_723-manual.html
✓ name_test_case_724-manual.html
✓ name_test_case_725-manual.html
✓ name_test_case_726-manual.html
✓ name_test_case_727-manual.html
✓ name_test_case_728-manual.html
✓ name_test_case_729-manual.html
✓ name_test_case_730-manual.html
✓ name_test_case_731-manual.html
✓ name_test_case_733-manual.html
✓ name_test_case_734-manual.html
✓ name_test_case_735-manual.html
✓ name_test_case_736-manual.html
✓ name_test_case_737-manual.html
✓ name_test_case_738-manual.html
✓ name_test_case_739-manual.html
✓ name_test_case_740-manual.html
✓ name_test_case_741-manual.html
✓ name_test_case_742-manual.html
✓ name_test_case_743-manual.html
✓ name_test_case_744-manual.html
✓ name_test_case_745-manual.html
✓ name_test_case_746-manual.html
✓ name_test_case_747-manual.html
✓ name_test_case_748-manual.html
✓ name_test_case_749-manual.html
✓ name_test_case_750-manual.html
✓ name_test_case_751-manual.html
✓ name_test_case_752-manual.html
✓ [expected fail] name_test_case_753-manual.html
✓ [expected fail] name_test_case_754-manual.html
✓ [expected fail] name_test_case_755-manual.html
✓ [expected fail] name_test_case_756-manual.html
✓ [expected fail] name_test_case_757-manual.html
✓ [expected fail] name_test_case_758-manual.html
✓ [expected fail] name_test_case_759-manual.html
✓ [expected fail] name_test_case_760-manual.html
✓ [expected fail] name_test_case_761-manual.html
✓ [expected fail] name_test_case_762-manual.html
✓ name_text-label-embedded-combobox-manual.html
✓ name_text-label-embedded-menu-manual.html
✓ name_text-label-embedded-select-manual.html
✓ name_text-label-embedded-slider-manual.html
✓ name_text-label-embedded-spinbutton-manual.html
✓ name_text-title-manual.html
FAQs
Implements https://w3c.github.io/accname/
The npm package dom-accessibility-api receives a total of 12,995,490 weekly downloads. As such, dom-accessibility-api popularity was classified as popular.
We found that dom-accessibility-api demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.