angular icon indicating copy to clipboard operation
angular copied to clipboard

Docs: a11y: add section for ngFor trackBy option

Open d-koppenhagen opened this issue 1 year ago • 0 comments

Description

ngFor provides the option trackBy. This option allows to define the tracking property when rendering a list of objects. This is essential for making the list more accessible.

When updating a list element without defining trackBy, the DOM element is destroyed completely and the updated is added as a completely ne DOM element. This will cause issues when the element was for example focused before, as the focus ist lost afterwards and will may change to some other list element.

Using trackBy with a unique property in the lists objects, will change this behavior as the element to update can be found in the DOM by its tracking property. This will have the effect only the content of this DOM element is updated and the element won’t be destroyed.

This behavior and hint for using trackBy should be added to the accessibility docs.

What is the affected URL?

https://angular.io/guide/accessibility

Please provide the steps to reproduce the issue

No response

Please provide the expected behavior vs the actual behavior you encountered

No response

Please provide a screenshot if possible

No response

Please provide the exception or error you saw

No response

Is this a browser-specific issue? If so, please specify the device, browser, and version.

No response

d-koppenhagen avatar Jul 28 '22 07:07 d-koppenhagen