Accordion Single Item Expansion - Start with All Closed

adobe / aem-core-wcm-components

Standardized components to build websites with AEM.

https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html

Apache License 2.0

743 stars 750 forks source link

Accordion Single Item Expansion - Start with All Closed #1256

Closed juliaetate closed 2 years ago

juliaetate commented 3 years ago

The current option to only allow one section of an Accordion to be open at a time requires that one section begin as open. Is there any chance of allowing only one section to open at a time while beginning with all options closed?

ky940819 commented 3 years ago

Would just removing the following lines from the clientlib accomplish this? https://github.com/adobe/aem-core-wcm-components/blob/490eda9f2450add37758ec9fed6e41a65d262a5c/content/src/content/jcr_root/apps/core/wcm/components/accordion/v1/accordion/clientlibs/site/js/accordion.js#L127-L130

Would it not make more sense to handle this logic in the model? The model provides the list of expanded items.

Moving that logic to the model and out of the presentation layer would ensure that the data provided by the model with respect to the shown items matches the actual shown items, and then a policy attribute could be added to the component to specify if all tabs are allowed to be closed or not. This way, current behaviour would not be effected, while allowing for this to be done going forward on an opt-in basis.

juliaetate commented 3 years ago

@ky940819 Just removing those lines in the JS will only work if the Expanded Item select for Single Item Expansion is empty, however, there is no blank option. I can get around this by making the single select a multi to allow for no selections or by adding an empty option. With the empty option, it will not default select the actual selected item if I have one, and with multi, it allows multiple but only opens the last in the list. At the moment, multi is most tolerable.

GrimaceDoesA11y commented 2 years ago

With the Single Item expansion pattern, with a maximum of one panel open at a time within the accordion, the following closing patterns should be persistent:

If a user expands a panel, they should be able to close the same panel.
If a user expands a panel, all other panels collapse.

Adobe's implementation

If a user expands a panel, a user IS NOT able to close the same panel. The panel can only be closed if another panel is expanded.
If a user expands a panel, all other panels collapse.

This pattern is problematic. It's a trap pattern. It's similar a person not being able escape a room they just entered.

@gabrielwalt is this captured in another ticket?

ky940819 commented 2 years ago

This is still an issue - is there any plan to resolve this?