Accordion description

[oscarcarlstrom]

Støtte Description i Accordion

Utkast på omskriving av Accordion for å:

• støtte <Description/>
• gjøre det mulig å fjerne den mintgrønne borderen som er til venstre i accordion-panel (åpnet accordion)
• gjøre det mulig å håndtere aria-role og aria-describedby inne i Content, dette kan være aktuelt hvis man f.eks. vil putte en <CheckboxGroup/> inne i <Content/>

Jeg lurer på om vi egentlig skulle hatt en komponent til, som er litt mer bare-bones. Minimalt med styling og fast semantikk, som da følger patternet til https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/. Da kunne vi kalt den for <Disclousure/>, og gjenbrukt deler av den i implementasjonen til <Accordion/>.

Jeg føler i hvert fall litt at implementasjonen til <Accordion/> begynner å skli litt ut her. Og vi har allerede konkludert med at vi har behov for noe som ligner mer på disclosure patternet (f.eks. "Les mer"). Da kunne vi fjernet noContentBorder og noPanelContentAria som er lagt til her. Så kunne man brukt <Disclousure/> for å få til akkurat det samme.

Da ser jeg for meg at en <Disclousure/> kunne fungert slik:

<Disclousure>
  <Text id={titleId}>Les mer</Text>
  <Content>
    <CheckboxGroup
      value={selectedAreas}
      onChange={(value) => setSelectedAreas(value)}
      aria-labelledby={titleId}
    >
      {options.map((option) => (
        <Checkbox key={option} value={option}>
          {option}
        </Checkbox>
      ))}
    </CheckboxGroup>
  </Content>
</Disclousure>

Og blitt rendret slik (litt forenklet):

<div class="..." data-open="true">
  <button id=":r2m:" aria-controls=":r2n:" aria-expanded="true" class="...">
    Velg område
    <svg ...>...</svg> <!-- ChevronDown icon --->
  </button>
  <div class="...">
    <div class="..." data-slot="content" id=":r2n:">
      <div aria-labelledby=":r2m:" role="group" id="react-aria3614521700-:r2q:" class="..." data-rac="">...</div>
    </div>
  </div>
</div>

I tillegg har lagt inn en id-referanse (contentId) som manglet på Content her. Det burde kanskje fikses uavhengig av denne PR-en egentlig. Men det kommer litt an på hva vi bestemmer oss for å gjøre

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0dbcc03

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for obos-grunnmuren ready!

Name	Link
🔨 Latest commit	0dbcc03
🔍 Latest deploy log	https://app.netlify.com/sites/obos-grunnmuren/deploys/66cef7a77cda0000088290fa
😎 Deploy Preview	https://deploy-preview-910--obos-grunnmuren.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.