Pizzaria is a lightweight library for managing ARIA attributes and roles in web development. It simplifies accessibility implementation by providing helper functions to add, remove, and validate ARIA attributes across single or multiple elements.
- Batch operations: Apply ARIA attributes to multiple elements using CSS selectors.
- Role management: Easily set or modify ARIA roles for elements.
- Accessibility helpers: Manage modals, alerts, and other ARIA-compliant components.
- Clean and readable API: Designed for developers who value simplicity and performance.
Install Pizzaria via npm:
npm install pizzaria
Or with yarn:
yarn add pizzaria
import {
setAriaAttributes,
setAriaRole,
removeAriaAttributes,
hasAriaAttribute,
setAriaModal,
setAriaAlert,
} from 'pizzaria';
setAriaAttributes('.button', {
pressed: 'false',
label: 'Submit',
});
setAriaRole('#modal', 'dialog');
removeAriaAttributes('.button', ['pressed', 'label']);
const hasPressed = hasAriaAttribute('.button', 'pressed');
console.log(hasPressed); // true or false
setAriaModal('#modal', true); // Opens the modal
setAriaModal('#modal', false); // Closes the modal
setAriaAlert('#alert', 'This is an alert message');
Set multiple ARIA attributes for one or more elements.
- Parameters:
selector
(string): CSS selector for the target elements.attributes
(object): Key-value pairs of ARIA attributes to set.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
Assign a specific ARIA role to one or more elements.
- Parameters:
selector
(string): CSS selector for the target elements.role
(string): The ARIA role to set.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
Remove specific ARIA attributes from one or more elements.
- Parameters:
selector
(string): CSS selector for the target elements.attributes
(array of strings): List of ARIA attributes to remove.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
Check if all elements selected by the CSS selector have a specific ARIA attribute.
-
Parameters:
selector
(string): CSS selector for the target elements.attribute
(string): The ARIA attribute to check.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
-
Returns: (boolean)
true
if all elements have the attribute, otherwisefalse
.
Configure ARIA attributes for modal dialogs.
- Parameters:
selector
(string): CSS selector for the modal element.isOpen
(boolean):true
to open the modal,false
to close it.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
Configure ARIA attributes and content for alert elements.
- Parameters:
selector
(string): CSS selector for the alert element.message
(string): The alert message to display.context
(Document | HTMLElement): (Optional) Limits the scope of the selector. Defaults todocument
.
Run the comprehensive test suite to validate Pizzaria:
npm test
The suite covers:
- Setting, removing, and validating ARIA attributes.
- Managing ARIA roles for accessibility.
- Handling edge cases with modals and alerts.
- Batch operations on multiple elements.
MIT
If you have ideas or want to contribute, feel free to submit a pull request or open an issue! 🍕