Skip to content

Commit b6ed43d

Browse files
ericfennisCopilotkarsa-mistmere
authored
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 <[email protected]> * Update packages/lucide-svelte/tests/Icon.spec.ts Co-authored-by: Copilot <[email protected]> * Update packages/shared/src/utils/hasA11yProp.ts Co-authored-by: Copilot <[email protected]> * 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 <[email protected]> Co-authored-by: Karsa <[email protected]>
1 parent 9b10d1d commit b6ed43d

77 files changed

Lines changed: 1191 additions & 506 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ packages/**/src/icons/*.tsx
2020
packages/**/src/aliases/*.ts
2121
packages/**/src/aliases.ts
2222
!packages/**/src/aliases/index.ts
23+
packages/**/src/utils/*.ts
24+
!packages/shared/src/utils/*.ts
2325
packages/**/src/dynamicIconImports.ts
2426
packages/**/DynamicIcon.d.ts
2527
packages/**/dynamicIconImports.js

‎docs/guide/advanced/accessibility.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ because they can quickly give information.
1010
However, not everyone can understand them easily. When using icons it is very important to consider
1111
the following aspects of accessibility.
1212

13+
::: info
14+
By default, we hide icons from screen readers using `aria-hidden="true"`.
15+
You can make them accessible yourself by following the guidelines below.
16+
:::
17+
1318
## Provide visible labels
1419

1520
Icons are a helpful tool to improve perception, but they aren't a replacement for text.

‎docs/guide/packages/lucide-angular.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,3 +167,15 @@ import { coconut } from '@lucide/lab';
167167
})
168168
export class AppModule { }
169169
```
170+
171+
## Accessibility
172+
173+
By default, we hide icons from screen readers using `aria-hidden="true"`.
174+
175+
You can add accessibility attributes using aria-labels.
176+
177+
```html
178+
<lucide-icon name="check" aria-label="Task completed"></lucide-icon>
179+
```
180+
181+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-astro.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,19 @@ import LucideIcon from './LucideIcon.astro';
192192
193193
<LucideIcon name="Menu" />
194194
```
195+
196+
## Accessibility
197+
198+
By default, we hide icons from screen readers using `aria-hidden="true"`.
199+
200+
You can add accessibility attributes using aria-labels.
201+
202+
```jsx
203+
---
204+
import { Check } from '@lucide/astro';
205+
---
206+
207+
<Check aria-label="Task completed" />
208+
```
209+
210+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-preact.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,19 @@ const App = () => {
131131

132132
export default App;
133133
```
134+
135+
## Accessibility
136+
137+
By default, we hide icons from screen readers using `aria-hidden="true"`.
138+
139+
You can add accessibility attributes using aria-labels.
140+
141+
```jsx
142+
import { Check } from 'lucide-preact';
143+
144+
const App = () => {
145+
return <Check aria-label="Task completed" />;
146+
};
147+
```
148+
149+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-react.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,19 @@ const App = () => (
109109
<DynamicIcon name="camera" color="red" size={48} />
110110
);
111111
```
112+
113+
## Accessibility
114+
115+
By default, we hide icons from screen readers using `aria-hidden="true"`.
116+
117+
You can add accessibility attributes using aria-labels.
118+
119+
```jsx
120+
import { Check } from 'lucide-react';
121+
122+
const App = () => {
123+
return <Check aria-label="Task completed" />;
124+
};
125+
```
126+
127+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-solid.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,19 @@ const App = () => {
144144

145145
export default App;
146146
```
147+
148+
## Accessibility
149+
150+
By default, we hide icons from screen readers using `aria-hidden="true"`.
151+
152+
You can add accessibility attributes using aria-labels.
153+
154+
```jsx
155+
import { Check } from 'lucide-solid';
156+
157+
const App = () => {
158+
return <Check aria-label="Task completed" />;
159+
};
160+
```
161+
162+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-svelte.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,3 +331,19 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
331331
332332
<LucideIcon name="Menu" />
333333
```
334+
335+
## Accessibility
336+
337+
By default, we hide icons from screen readers using `aria-hidden="true"`.
338+
339+
You can add accessibility attributes using aria-labels.
340+
341+
```svelte
342+
<script>
343+
import { Check } from '@lucide/svelte';
344+
</script>
345+
346+
<Check aria-label="Task completed" />
347+
```
348+
349+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,25 @@ All other props listed above also work on the `Icon` Component.
146146
</div>
147147
</template>
148148
```
149+
150+
## Accessibility
151+
152+
By default, we hide icons from screen readers using `aria-hidden="true"`.
153+
154+
You can add accessibility attributes using aria-labels.
155+
156+
```vue
157+
<script setup>
158+
import { Check } from 'lucide-vue-next';
159+
</script>
160+
161+
<template>
162+
<Check
163+
color="red"
164+
:size="32"
165+
aria-label="Task completed"
166+
/>
167+
</template>
168+
```
169+
170+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,3 +203,23 @@ createIcons({
203203
}
204204
});
205205
```
206+
207+
## Accessibility
208+
209+
By default, we hide icons from screen readers using `aria-hidden="true"`.
210+
211+
You can add accessibility attributes using aria-labels.
212+
213+
```html
214+
<!DOCTYPE html>
215+
<body>
216+
<i data-lucide="house" aria-label="Home icon"></i>
217+
218+
<script src="https://unpkg.com/lucide@latest"></script>
219+
<script>
220+
lucide.createIcons();
221+
</script>
222+
</body>
223+
```
224+
225+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

0 commit comments

Comments
 (0)