carbon
carbon copied to clipboard
Sage
Regression: Unnecessary component type validations break existing component logic in AccordionGroup
Current behaviour
At a number of places, components started validating the type of their children which breaks our application, for example AccordionGroups only accept Accordion.
For example with accordions we have an intermediate component between the AccordionGroup and the Accordion component that assembles the content of the Accordion and decides whether certain accordions should be rendered at all. This component returns an Accordion at the end but the validations still don't accept it.
Expected behaviour
These validations are removed or degraded into warnings.
CodeSandbox or Storybook URL
https://codesandbox.io/s/blissful-bhaskara-k8rt5t?file=/src/index.js
JIRA Ticket (Sage Only)
No response
Suggested Solution
These validations are removed as they don't add much value but makes things much more complicated
Carbon Version
109
Design Tokens Version
No response
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
This is causing a number of regression issues for us and we are unable upgrade to the latest version.
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@blaky Unfortunately in case of AccordionGroup and Accordion we rely on the correct component tree structure to provide a WCAG compliant keyboard navigation. After a team meeting we've decided that we're not going to support any other component composition than the one shown in the examples as that would require us to make the components (we rely on a correct structure in a couple other components as well) unnecessarily complex in some cases. Fortunately your case can be easily solved by abstracting the additional logic to a function instead of a component so that the component tree stays the same.
https://codesandbox.io/s/eloquent-kepler-8x4yy7
That's not something we can accept. We have a complex component structure that routes the right content. As I mentioned the directly rendered children of the AccordionGroup at the end is still an Accordion. This should make no difference in terms of keyboard navigation or accessibility.
@blaky Hey Bence, sorry for the delay, could you please provide me an example which can't be solved with the workaround that I've proposed above?
@mkrds your example in codesandbox with logic in a function works but still dumps validation errors in the console.
This appears to be fixed in the latest Carbon. @markryd or @blaky. Are you able to confirm?
