aem-core-wcm-components icon indicating copy to clipboard operation
aem-core-wcm-components copied to clipboard

Accordion Single Item Expansion - Start with All Closed

Open juliaetate opened this issue 5 years ago • 3 comments

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?

juliaetate avatar Nov 12 '20 21:11 juliaetate

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.

ky940819 avatar Nov 19 '20 05:11 ky940819

@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.

juliaetate avatar Nov 20 '20 17:11 juliaetate

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?

GrimaceDoesA11y avatar Apr 27 '22 03:04 GrimaceDoesA11y

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

ky940819 avatar Aug 23 '22 16:08 ky940819