feat(packages): Added aria-hidden fallback for decorative icons to all packages (#3604)

* Add aria hidden to lucide package

* Add aria-hidden to astro package

* Add tests for shared package

* Fix test for props

* add aria prop to lucide-solid

* Add aria-hidden to lucide-vue-next

* Add aria-hidden prop to angular package

* Fix builds

* Add notice about aria-label in docs

* Format code

* Update packages/svelte/tests/Icon.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/lucide-svelte/tests/Icon.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/shared/src/utils/hasA11yProp.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Adjusted docs

* Fix import

* update tests

* test(shared): fix hasA11yProp unit test

* fix(packages/lucide-angular): fix hasA11yProp import path (non-relative import path will not get properly resolved by ng-packagr)

* Format code

* Adjust aria props to root element

* Format code

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>

docs/guide/advanced/accessibility.md

@@ -10,6 +10,11 @@ because they can quickly give information.
 However, not everyone can understand them easily. When using icons it is very important to consider
 the following aspects of accessibility.
 
+::: info
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+You can make them accessible yourself by following the guidelines below.
+:::
+
 ## Provide visible labels
 
 Icons are a helpful tool to improve perception, but they aren't a replacement for text.

docs/guide/packages/lucide-angular.md

@@ -167,3 +167,15 @@ import { coconut } from '@lucide/lab';
 })
 export class AppModule { }
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```html
+<lucide-icon name="check" aria-label="Task completed"></lucide-icon>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-astro.md

@@ -192,3 +192,19 @@ import LucideIcon from './LucideIcon.astro';
 
 <LucideIcon name="Menu" />
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+---
+import { Check } from '@lucide/astro';
+---
+
+<Check aria-label="Task completed" />
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-preact.md

@@ -131,3 +131,19 @@ const App = () => {
 
 export default App;
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-preact';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-react.md

@@ -109,3 +109,19 @@ const App = () => (
   <DynamicIcon name="camera" color="red" size={48} />
 );
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-react';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-solid.md

@@ -144,3 +144,19 @@ const App = () => {
 
 export default App;
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-solid';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-svelte.md

@@ -331,3 +331,19 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 
 <LucideIcon name="Menu" />
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```svelte
+<script>
+  import { Check } from '@lucide/svelte';
+</script>
+
+<Check aria-label="Task completed" />
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide-vue-next.md

@@ -146,3 +146,25 @@ All other props listed above also work on the `Icon` Component.
   </div>
 </template>
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```vue
+<script setup>
+import { Check } from 'lucide-vue-next';
+</script>
+
+<template>
+  <Check
+    color="red"
+    :size="32"
+    aria-label="Task completed"
+  />
+</template>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

docs/guide/packages/lucide.md

@@ -203,3 +203,23 @@ createIcons({
   }
 });
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```html
+<!DOCTYPE html>
+<body>
+  <i data-lucide="house" aria-label="Home icon"></i>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
+</body>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).