Consider automatically connecting button label with aria-labelledby

[Robbert]

In React, om een icon button te maken, kun je het volgende doen:

export const IconButton = forwardRef(({ label, ...restProps }) => (
  <Button {...restProps} label={
    <span class"sr-only">{label}</span>
  } />
    <Icon>{children}></Icon>
  </Button>
);

Als Button automatisch in aria-labelledby zou verwijzen naar de span die sowieso al om de inhoud van de label property heen staat, dan kun je simpelweg het label hidden maken, terwijl het toegankelijk label blijft werken:

export const IconButton = forwardRef(({ label, ...restProps }) => (
  <Button {...restProps} label={
    <span hidden>{label}</span>
  } />
    <Icon>{children}></Icon>
  </Button>
);

De vraag is: zijn er nadelen aan deze aanpak?

Eén van de gevolgen is: zodra je label gebruikt, dan wordt aria-labelledby gebruikt, en dan verdwijnen de children uit de label.

[Robbert]

@bddjong penny for your thoughts