Description
Describe the bug
We're in the process of migrating a codebase from Svelte 4 to 5 and hitting an odd linting issue. We'd like components to expose the standard aria-label
property externally, with a different internal name like so:
let { 'aria-label': ariaLabel }: { 'aria-label'?: string; } = $props();
This seems to work when it is the only property on the component, but if there are other properties then linting fails with a svelte/no-unused-props error.
Reproduction
Using:
- "svelte": "5.25.3",
- "svelte-eslint-parser": "^1.1.1",
Run eslint against the file below. I get an error on the aria-label prop that I think is invalid:
6:5 error 'aria-label' is an unused Props property svelte/no-unused-props
Here's the odd thing - remove the 'a' property (delete lines 3, 7, and 13) and the aria-label warning goes away. 🤷🏻♂️
<script lang="ts">
interface Props {
a: string;
'aria-label'?: string;
}
let {
a,
'aria-label': ariaLabel,
}: Props = $props();
</script>
<div aria-label="{ariaLabel}">
{a}
</div>
Logs
System Info
System:
OS: macOS 15.3.2
CPU: (10) arm64 Apple M1 Max
Memory: 925.83 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.0.0 - ~/Library/pnpm/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.5.1 - ~/Library/pnpm/npm
pnpm: 10.6.2 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 134.0.6998.166
Safari: 18.3.1
Severity
blocking an upgrade