PatternFly-React preview: https://patternfly-react-pr-2634.surge.sh

Hey Jenny, thanks for taking a look! So from what I can tell, I believe in org we have AutoLinkHeaders that set the id. So in the mdxPF4Template.js and index.js there is an AutoLinkHeader that generates the size, className, id, content, etc. It does this from the AutoLinkHeader.js file. For the other PR I had on unique org ids, I had to pass a suffix to the AutoLinkHeader to add that to the id and differentiate them. With this issue, it looked like it was with what was being pulled from patternfly-react so I changed the aria-controls in ClipboardCopyToggle.tsx. That's been my thinking up until this point anyway. :)

@jessiehuff That makes sense. Thank you for clarifying! Just out of curiosity (and for future reference), is aria-controls somehow modifying the value of the id there?

@jenny-s51 aria-controls provide a relation between a parent element and a child element (the toggle's button in this case). The reason I think it needed to be changed here is because otherwise we get the issue: "ARIA attributes must conform to valid values" basically pointing out that we need to pass the correct information to screen readers. This article seems to give a good summary of aria-controls. :)

Your changes have been released in:

• @patternfly/react-core@3.84.1
• @patternfly/react-docs@4.9.27
• @patternfly/react-inline-edit-extension@2.9.72
• demo-app-ts@2.17.1
• @patternfly/react-table@2.16.11
• @patternfly/react-topology@2.7.20
• @patternfly/react-virtualized-extension@1.1.106

Thanks for your contribution! 🎉