Closed inesdgomes closed 4 months ago
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.
@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?
We talked and agreed that we need to test this in design files
@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.
@beatrizmartinmartins Could we aim for 22 April to have this ready?
@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 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.
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
@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?
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.
@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
@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:
@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