[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

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

[amal-k-joy]

recommended as here

[devadula-nandan]

include for web components too