[List] Teaser delegation pattern in List generates duplicate HTML ID's

[rubnig]

Bug Report

Current Behavior There is a bug introduced by the following change in the List component: https://github.com/adobe/aem-core-wcm-components/pull/2367/files#diff-f363eed59fd2d3cfd770d0754f5d64b704e70b974817849d990df87038a2a0a4R130

This change always uses the List component its own resource, overwrites some properties and then uses it to delegate it to render Teasers.

If a content author enters a manual configured ID in the List component, the teasers in the List will render the same HTML id attribute as the one that is entered for the List.

Steps to reproduce:

1. Install the latest Adobe Core Components
2. Install the sample content (https://github.com/adobe/aem-core-wcm-components/tree/main/examples)
3. Open http://localhost:4502/editor.html/content/core-components-examples/library/core-content/list.html
4. Adjust the List which renders items as Teasers by adding an ID
5. Open the Page with WCM Mode disabled, so we can inspect the HTML output (http://localhost:4502/content/core-components-examples/library/core-content/list.html?wcmmode=disabled)
6. Inspect the List you've just altered, you will see that the List and its Teasers are all having the same HTML id attribute which is incorrect HTML (ID's need to be unique)

Expected behavior/code The Teaser delegates within the List should have their own unique ID's and not conflict with the ID of the List itself.

Environment

• AEMaaCS 2023.4.11873.20230421T153841Z
• Core Components version 2.22.10
• Oracle JDK 11.0.19

Possible Solution Don't wrap the List resource for rendering Teasers but use another resource like the Page or a Synthetic Resource not containing any of the List properties. As this also causes issues with the policies (we now need to include image policy settings in the List design dialog, see: https://github.com/adobe/aem-core-wcm-components/issues/2458#issuecomment-1544799009

[ky940819]

Another possible solution is to add the teaser list item ID to the overriddenProperties, this way when the teaser model is constructed it will always think the ID has been set in the properties, and the ID value would be exactly the same as non-teaser list items.

[ericvangeem]

+1

[gaijinco]

+1