microsoft / microsoft/vscode-edge-devtools
Cannot deal with Angular labels
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 827
- Forks
- 358
- Avg merge
- 20h 32m
- Merged PRs (30d)
- 10
Description
Environment (please complete the following information):
- Windows 11
- Extension version 2.1.3
Describe the bug:
Angular allows the adding of dynamic aria-labels like in this example:
<button [attr.aria-label]="myActionLabel">…
This is described in the documentation here: https://angular.io/guide/accessibility
The extension does not recognise this and marks the element as missing a label.
Repro steps:
-
Add an element with a dynamic aria label to your application:
<input type="number" [attr.aria-label]="myInput.ariaLabel" /> -
Activate the plugin.
The input field will be marked as missing an aria-label.
Expected behavior:
The plugin should recognise the attribute [attr.aria-label] and no longer show the warning.
Additional context:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the warning by activating the plugin on the Angular input using [attr.aria-label]="myInput.ariaLabel", then trace how the extension handles Angular template attributes and accessibility labels. Done means the dynamic aria-label is recognised and the missing-label warning no longer appears.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100