Badge without wrapper?

[eirikbacker]

Ang. spørsmål om Badge; kom på at slik Badge funker med et wrapper-element, så kan vi få problemer når noe bytte mellom å ha Badge og ikke - fordi det ikke bare er et element som legges til som barn av f.eks button, men noe som må legges rundt button. Da endrer DOMen seg ganske mye og blir potensielt ugyldig; f.eks: Uten badge:

<ul>
  <li>Tekst</li>
</ul>

Med bage:

<ul>
  <span class="ds-badge__wrapper"><li>Tekst <span class="ds-badge"></span></li></span>
</ul>

Skulle vi revurdert litt om vi får Badge til å uten wrapper? Vet det kommer utfordringer med det og, men bare en tanke her :relaxed:

[eirikbacker]

Tobas: den burde kanskje fått role="presentation" vertfall :thinking_face:

Eirik: Wrapperen i seg selv trenger ikke role siden den ikke er noe landemerke, men men ul > span er ikke valid HTML, og dersom man bruker display: grid eller flex f.eks som styler direkte barn, så bytter det plutselig hva som er direkte barn - litt uante konsekvenser der :see_no_evil: Badge i breadcrumbs kan skje dersom "Inbox" er en del av stien :thinking_face: eller i en dropdown-liste, eller navigasjonelement er det ganske naturlig :relaxed:

[Barsnes]

Om det er ein lett løysing som funker med rein html css så er all for it. Me kan også løyse dette slik me har gjort med dei andre flytande komponentane våre. Forskjellen er at desse er skjult til dei skal flyte, menst badge alltid skal være der, og det er fint at posisjonen ikkje blir rekalkulert når du scroller, slik som det blir gjort i DropdownMenu og Popover

Badge i breadcrumbs ville vel sett slik ut:

<Breadcrumbs.Root>
  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
  <Breadcrumbs.Nav aria-label="Du er her:">
    <Breadcrumbs.List>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="https://designsystemet.no/">Nivå 1</Breadcrumbs.Link>
        <Badge /> <------------------ 
      </Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Nav>
</Breadcrumbs.Root>

Dette ville ikkje gi feil html struktur, men det er verre om den skal flyte over, då blir det slik:

<Breadcrumbs.Root>
  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
  <Breadcrumbs.Nav aria-label="Du er her:">
    <Breadcrumbs.List>
      <Badge>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="https://designsystemet.no/">Nivå 1</Breadcrumbs.Link>
        </Breadcrumbs.Item>
      </Badge>
    </Breadcrumbs.List>
  </Breadcrumbs.Nav>
</Breadcrumbs.Root>

men her kunne det også ha blitt wrappa rundt *.Link.

Ser fort at det kan bli brukarfeil her

[eirikbacker]

Enig - fort gjort med brukerfeil :o

Skal lese og svare mer utfyllende siden, men begge eksemplene er også problematisk UU-messig, fordi Badge må tegnes inni det interaktive for å leses opp, så vi burde ha:

<Breadcrumbs.Root>
  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
  <Breadcrumbs.Nav aria-label="Du er her:">
    <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="https://designsystemet.no/">
            Nivå 1 <Badge />
          </Breadcrumbs.Link>
        </Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Nav>
</Breadcrumbs.Root>

og

<Breadcrumbs.Root>
  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
  <Breadcrumbs.Nav aria-label="Du er her:">
    <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="https://designsystemet.no/">
            <Badge>Nivå 1<Badge>
          </Breadcrumbs.Link>
        </Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Nav>
</Breadcrumbs.Root>

Hvis vi rendrer selve dotten med ::before og gjør content: attr(data-ds-value) så får vi til å gjenskape floating, uten å ha mer enn ett element, samt ivareta både floating og ikke-floating versjonen ☺️ så må vi dokumentere godt at Badge alltid skal legges inni det interaktive elementet: ✅ Do:

<Button>
  <Badge value="5" aria-label="5 uleste">Inbox</Badge>
</Button>

❌ Don't:

<Badge value="5" aria-label="5 uleste">
  <Button>Inbox</Button>
</Badge>