Files
b6ed43d48c 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>
2026-01-20 15:55:02 +01:00

60 lines
1.7 KiB
TypeScript

import { describe, it, expect } from 'vitest';
import { airVent } from './testIconNodes';
import { createAstroHTMLString, render } from './utils';
import { Icon, Rocket } from '../src/lucide-astro';
describe('Using Icon Component', async () => {
const { container } = await render(Icon, {
props: { iconNode: airVent, size: 48, stroke: 'red', absoluteStrokeWidth: true },
});
it('should render icon and match snapshot', async () => {
expect(container.innerHTML).toMatchSnapshot();
});
it('should render icon based on a iconNode', async () => {
expect(container.innerHTML).toBeDefined();
});
});
describe('Icon Component Accessibility', () => {
it('should have aria-hidden prop when no aria prop is present', async () => {
const { container } = await render(Icon, {
props: {
iconNode: airVent,
size: 48,
stroke: 'red',
absoluteStrokeWidth: true,
},
});
expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
});
it('should not have aria-hidden prop when aria prop is present', async () => {
const { container } = await render(Rocket, {
props: {
size: 48,
stroke: 'red',
absoluteStrokeWidth: true,
'aria-label': 'Release icon',
},
});
expect(container.firstChild).not.toHaveAttribute('aria-hidden');
});
it('should not have aria-hidden prop when title prop is present', async () => {
const { container } = await render(Rocket, {
props: {
size: 48,
stroke: 'red',
absoluteStrokeWidth: true,
title: 'Release icon',
},
});
expect(container.firstChild).not.toHaveAttribute('aria-hidden');
});
});