[a11y]: SidePanel: use <aside> rather than role="complementary"

[wkeese]

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

2.52.0

React version

18

Automated testing tool and ruleset

SonarQube

Assistive technology

No response

Description

SonarQube has started to give warnings to use elements in preference to attributes, and additionally, MDN's documentation for role="complementary" says (three times!) to prefer <aside> over setting the complementary role.

Thus, I suggest to change SidePanel to use an <aside> rather than a <div role=complementary>.

WCAG 2.1 Violation

Unknown

Reproduction/example

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-side-panel-sidepanel--slide-over&globals=viewport:basic

Steps to reproduce

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[amal-k-joy]

recommended as here

[devadula-nandan]

include for web components too

[elycheea]

<aside>/role="complementary" may be more appropriate for slide-in modals rather than slide-over modals which would be more of dialogs.

For future iterations of side panel, we could potentially consider using the as prop¹ for aside/dialog instead of slide-in or slide-over since how these behave is actually more closely related to their actual roles instead.

Footnotes

1. https://react.carbondesignsystem.com/?path=/docs/components-link--overview ↩