diff --git a/CHANGELOG.md b/CHANGELOG.md index 9382dbe..e36f09b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ## [Unreleased] +## [0.5.0] - 2024-11-07 + ### Changed - Enhanced accessibility check for generic text in the `` component to include applicable ARIA roles. @@ -84,3 +86,4 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), [0.2.2]: https://github.com/bpetermann/aware-components/releases/tag/v.0.2.2 [0.3.2]: https://github.com/bpetermann/aware-components/releases/tag/v0.3.2 [0.4.2]: https://github.com/bpetermann/aware-components/releases/tag/v0.4.2 +[0.5.0]: https://github.com/bpetermann/aware-components/releases/tag/v0.4.2 diff --git a/packages/aware-components/README.md b/packages/aware-components/README.md index 674d6fd..3909e03 100644 --- a/packages/aware-components/README.md +++ b/packages/aware-components/README.md @@ -11,6 +11,7 @@ The goal is to improve accessibility by ensuring proper usage of naming conventi - **Built-in Accessibility Checks**: Each component provides real-time accessibility feedback, including warnings about heading levels, contrast issues, ARIA labels, and more. - **Common HTML Elements**: Components are based on familiar HTML elements, making them easy to integrate into existing projects. - **Customizable Warnings**: Developers receive accessibility warnings during development, enabling quick fixes and improvements. +- **Standalone Accessibility Checks**: In addition to components, several standalone accessibility checks are exported for broader use. - **Expandable**: While currently focused on accessibility, the library is designed to expand in the future. ## Stability Warning ⚠️ @@ -91,6 +92,17 @@ function Headings() { } ``` +**Example 3: Standalone Accessibility checks** + +In addition to the components, some standalone accessibility checks are exported. + +```jsx +import { isRatioOk, canHaveAriaHidden } from 'aware-components'; + +console.log(isRatioOk('white', 'black', 'AAA', 18)); // Checks if the contrast ratio between text and background colors meets WCAG level AA or AAA, based on text size. +console.log(canHaveAriaHidden(SomeComponent())); // Checks if the aria-hidden attribute can be applied to the component. +``` + ## Mix and Match Most components can be used alongside standard HTML elements. This flexibility allows for easy integration, but for the most comprehensive accessibility insights, consider using `aware-components` for all core elements in your component tree. diff --git a/packages/aware-components/package.json b/packages/aware-components/package.json index 595686e..474165b 100644 --- a/packages/aware-components/package.json +++ b/packages/aware-components/package.json @@ -1,7 +1,7 @@ { "name": "aware-components", "private": false, - "version": "0.4.2", + "version": "0.5.0", "description": "React components with built-in accessibility checks for common HTML elements.", "type": "module", "main": "dist/index.umd.js",