WhatSock / apex

Apex 4X: The Comprehensive ARIA Development Suite
MIT License
28 stars 10 forks source link

Accordion behaviour unpredictable, straylight internal content #20

Closed mbgower closed 3 years ago

mbgower commented 3 years ago

The behaviour of the starlight accordion sample isn't as I expected http://whatsock.com/Templates/Accordions/Internal%20-%20Straylight/index.htm

The following screen shot shows the initial state of the accordion, with SECTION ONE opened, SECTION TWO and SECTION THREE collapsed. Sections 1 and 2 have a teal fill colour. Section 3 inexplicably has a dark grey fill colour.

accordion initial state

Pressing Enter with focus on Section 1 did not cause the accordion to collapse. Tried Spacebar as well.

When I tabbed to section 2, pressing Enter with Section 2 caused the collapse of Section 1 and the opening of Section 2 (with a delayed animation effect).

Putting focus on Section 3 and pressing Enter accomplished nothing.

The animation on the expand/collapse (where the open panel would slowly collapse and the closed panel slowly open) was so delayed that both accordions would be open for almost a second before the original accordion would be collapsed, as shown in the following screenshot In some cases I was not sure whether Enter action was not working or just highly delayed.

2 accordions in the process of opening and closing

--

On further investigation, I believe the design is that one accordion must always be open? Thus one of the things I took for a bug (the Enter key not toggling the accordion) might actually be by design. Looking at the APG, I see that is an allowed state, but it is not something I was familiar with. I suspect it will confuse users. At the least, I suggest that interaction be spelled out more clearly in the page documentation -- and I would caution that it is not a common design.

If Section 3 had also responded, I may have been able to discover this 'one always open' interaction more quickly.

accdc commented 3 years ago

Thanks, that helps a lot. :)

For the time being I've commented out the animation effect block for accordions, and anyone can uncomment and play with this if desired later within the setup code. This change should fix the strange visual delays you were mentioning.

Good catch about the paradigm for standard accordions, I turned the isToggle property to true on all the accordions so they will now toggle correctly to closed after they are opened. This can be changed as needed within the setup if a change is needed for any particular implementation. Additionally, if multiple accordions ever need to be opened at the same time, the allowMultiple property can be optionally set to true to make this possible as well.

Regarding the 3rd accordion, this is actually meant to show how adding aria-disabled="true" to the triggering element will automatically cause the accordion panel to be disabled. This can be changed programmatically or physically as needed within the code though for any tipe of implementation.

I know there are still some oddities regarding the visual display, but these should be fairly easy to remedy. I'll ping Laurance Lewis and see if he can help me get these styled a bit better.

Does this help a bit?

All the best, Bryan

LaurenceRLewis commented 3 years ago

Closing as fixed. Reopen if you think the update does not address the issue raised.