Skip to content

Commit 8e4932c

Browse files
authored
Add related dynamic attributes example (#6108)
* Add related dynamic attributes example * Lint
1 parent 94deb32 commit 8e4932c

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

docs/ui-coverage/configuration/attributefilters.mdx

+40
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,43 @@ For every attribute that an element has, the first `attributeFilters` rule for w
145145
```
146146
.user (2 instances)
147147
```
148+
149+
### Filtering related dynamic attributes
150+
151+
When filtering dynamic `id` attributes, you should also filter attributes that reference those IDs to prevent elements from being identified by these related dynamic values. Common relationships include:
152+
153+
- Form associations (`for` attributes on labels)
154+
- ARIA relationships (`aria-labelledby`, `aria-describedby`, `aria-controls`, `aria-owns`, `aria-details`)
155+
- Name attributes that may mirror IDs in certain frameworks
156+
157+
```json
158+
{
159+
"uiCoverage": {
160+
"attributeFilters": [
161+
{
162+
"attribute": "id|for|name|aria-.*",
163+
"value": "dynamic-.*",
164+
"include": false
165+
}
166+
]
167+
}
168+
}
169+
```
170+
171+
#### HTML
172+
173+
```xml
174+
<div>
175+
<label for="dynamic-input-1">First Name</label>
176+
<input id="dynamic-input-1" name="dynamic-input-1" aria-describedby="dynamic-help-1" />
177+
<p id="dynamic-help-1">Enter your first name</p>
178+
</div>
179+
```
180+
181+
#### Elements shown in UI Coverage
182+
183+
```
184+
label
185+
input
186+
p
187+
```

0 commit comments

Comments
 (0)