javascript - Setting aria-labelaria-labelledby within React.cloneElement()? - Stack Overflow

admin管理员组

文章数量:1345163

Basically, I'm trying to clone an element and change its aria-label within React.cloneElement. I've got a ponent - ButtonArrows - that creates two Button ponents, one with an arrow icon pointing left, and one pointing right. I'd like to be able to programmatically change the aria-label, but the hyphen throws an error.

Here's some code showing what I'm trying to do:

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      aria-label="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    aria-label="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

and obviously I can't do aria-label="Next" because of the hyphen.

Any suggestions? React unfortunately doesn't have anything like htmlFor (to stand in for html-for) when it est to aria labels. Should I just put an ariaLabel prop on Button and pass it down, or is there a way to do it directly with cloneElement that I'm missing?

Basically, I'm trying to clone an element and change its aria-label within React.cloneElement. I've got a ponent - ButtonArrows - that creates two Button ponents, one with an arrow icon pointing left, and one pointing right. I'd like to be able to programmatically change the aria-label, but the hyphen throws an error.

Here's some code showing what I'm trying to do:

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      aria-label="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    aria-label="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

and obviously I can't do aria-label="Next" because of the hyphen.

Any suggestions? React unfortunately doesn't have anything like htmlFor (to stand in for html-for) when it est to aria labels. Should I just put an ariaLabel prop on Button and pass it down, or is there a way to do it directly with cloneElement that I'm missing?

• javascript
• reactjs
• accessibility
• wai-aria

Share Improve this question Follow edited Jul 26, 2017 at 14:45 k buechner asked Jul 26, 2017 at 14:41 k buechnerk buechner 2311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You should be able to use a plain JavaScript object here:

const nextButton = React.cloneElement(prevButton, {
  'aria-label': 'Next',
  icon: rightArrow
});

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      ariaLabel="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    ariaLabelledby="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

change aria-label to ariaLabel

本文标签： javascriptSetting arialabelarialabelledby within ReactcloneElement()Stack Overflow