Gestire lo stato del componente Accordion

[stefanorg]

Ciao, vorrei poter gestire lo stato di un pannello accordion, decidendo se deve essere aperto o chiuso.

Dalla documentazione: https://frend.co/components/accordion/ dovrebbe bastare l'utilizzo dei tag aria-selected="true" aria-expanded="true" nell'header e aria-hidden="false" nel panel.

Anche impostando quei tag, il pannello inizialmente aperto, viene subito chiuso.

Qualche suggerimento?

[stefanorg]

anche il tag aria-multiselectable sembra essere ignorato.

[eshiol]

Non credo si tratti di un bug ma della particolare configurazione scelta. In particolare le righe 9 e 11del file src/components/accordion/index.js che allego per completezza.

import Fraccordion from 'fr-accordion'

const accordion = Fraccordion({
    // String - Use header id on element to tie each accordion panel to its header - see panelIdPrefix
    headerIdPrefix: 'accordion-header',
    // String - Use panel id on element to tie each accordion header to its panel - see headerIdPrefix
    panelIdPrefix: 'accordion-panel',
    // Boolean - If set to false, all accordion panels will be closed on init()
    firstPanelsOpenByDefault: false,
    // Boolean - If set to false, each accordion instance will only allow a single panel to be open at a time
    multiselectable: true,
    // String - Class name that will be added to the selector when the component has been initialised
    readyClass: 'fr-accordion--is-ready'
})

export default { accordion, Fraccordion }

[gunzip]

l'attuale implementazione non consente di mantenere lo stato. dovremmo considerare di sostituire il componente con un fork dell'originale che abiliti questa funzionalità (o con un altro componente simile che mantenga le stesse caratteristiche per l'accessibilità)

ref: https://github.com/frend/frend.co/pull/107

[eshiol]

@gunzip ho provato la tua PR impostando l'header con aria-selected="true" e sembra funzionare a dovere. Però senza aria-expanded="true" l'icona rimane con la freccia verso il basso, come quando il panel è chiuso, per via del foglio di stile. Si dovrà cambiare

.Accordion--default .Accordion-header[aria-expanded="true"] {
  background-image: var(--Accordion-link-arrow-up);
}
.Accordion--plus .Accordion-header[aria-expanded="true"] {
  background-image: var(--Accordion-link-minus);
}

in

.Accordion--default .Accordion-header[aria-selected="true"] {
  background-image: var(--Accordion-link-arrow-up);
}
.Accordion--plus .Accordion-header[aria-selected="true"] {
  background-image: var(--Accordion-link-minus);
}

Con multiselectable: false, è possibile aprire più panel.