Accordion: Improve 'expanded' status

[inesdgomes]

@justintemps Similarly to this issue https://github.com/international-labour-organization/designsystem/issues/260 I think, the tab accordion should stay blue when it's open. What do you think?

See example here (search refiners): https://iloorg.prod.acquia-sites.com/search?search_api_fulltext=child+labour&ilo_date%5Bmin%5D=&ilo_date%5Bmax%5D=&sort_by=ilo_date&f%5B0%5D=language%3Aen

And here: https://iloorg.prod.acquia-sites.com/publications/flagship-reports/template-world-employment-and-social-outlook-2023-value-essential-work

[justintemps]

Hey @inesdgomes we can do this obviously, but I'm not sure we're going to be happy with the result. Shouldn't the blue just display when the control is hovered or being actioned? Otherwise I think it will confuse the accessibility.

[inesdgomes]

@justintemps If you check it on mobile, that's how it works: the accordion tab stays blue after you tapped it. I think that makes it much clearer, otherwise there's nothing really telling you which tab is open, apart form the +/- symbol which is not obvious. Why would it be bad for accessibility?

[justintemps]

We talked and agreed that we need to test this in design files

[inesdgomes]

@beatrizmartinmartins Sharing an example of how accordions are being used: https://www-preview.ilo.org/resource/other/qas-business-and-child-labour#Why_does_ILO_not_consider_that_children_working_in_farms_as_part_of_their_education_

This a bad example, but something that will definitely happen a lot. Because we can scroll inside the body of accordions, I feel like the accordion tab needs some background colour or drop shadow no? It's strange to see content disappearing into the white of the accordion tab background.

[inesdgomes]

@beatrizmartinmartins Could we aim for 22 April to have this ready?

[beatrizmartinmartins]

@inesdgomes I will work today on all the issues we have on the tracker so we can review them next week during our weekly

[beatrizmartinmartins]

@inesdgomes you can check a preview of the accordion here I think it has enough contrast when it's selected and doesn't need a background to reinforce the selected state. Also made the change on the component

[inesdgomes]

@beatrizmartinmartins I think the difference is still very subtle. It could work if the accordion was used with little content, but we're seeing that's not how it's being used by CMS editors. Here's a crazy, but realistic example: https://iloorg.prod.acquia-sites.com/ilo-helpdesk-questions-and-answers-business-and-general-policies

If you several accordions open on that page, it's not clear which ones are open.

[beatrizmartinmartins]

I was thinking, what if we change the hover state for the selected one? https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=5959%3A8896&t=3cDu3JEAQ22cCyUi-1 Maybe this could fix our issues not being able to identify what is selected or not. The hover state is important, but doesnt need that much prominence @inesdgomes

[inesdgomes]

@beatrizmartinmartins Agreed that the hover status does not need so much prominence, but don't understand how the proposal here addresses the original problem as the 'Open Default' state is still the same as before. https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=5959%3A8896&t=3cDu3JEAQ22cCyUi-1

Actually, what do we mean by 'Selected'? Is it the same as 'Focus'? Did you mean that the light blue background shows when an accordion is expanded? If so, shouldn't the light blue background show in the 'Open Default' state?

[beatrizmartinmartins]

Previsouly, the Open Default state was this

And my proposal is to change the hover for selected/focus and use the preivous version of the selected has the hover state.

[inesdgomes]

@beatrizmartinmartins Understand the 'Hover' was changed, but the 'Open Default' state is still like that in here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=5959%3A8896&t=3cDu3JEAQ22cCyUi-1

[inesdgomes]

@justintemps This can move to development. Beatriz revised the default and hover states of the Accordion here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=5959%3A8896&t=3cDu3JEAQ22cCyUi-1

What changed:

• 'Closed Hover' state: light blue background was removed
• 'Open Default' state: light blue background was added; text and icon should now be ILO blue
• 'Open Hover' state: text and icon should now be dark blue