Repository: Sage/carbon (ts)

Issue:
Sidebars label tags incorrect element
### Description

When using a screen reader, sidebars are read out as 'Sidebar header Close'. This seems to be because the aria-labelledby targets the id on the sidebar header and not the heading itself. I would expect the sidebar only to be labelled by the heading.

### Reproduction

https://carbon.sage.com/?path=/docs/sidebar--docs#with-header

### Steps to reproduce

Open dialog with screen reader

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

Target the sidebar heading rather than the sidebar header

### Carbon version

144.4.0

### Design tokens version

_No response_

### Relevant browsers

Chrome, Safari

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(sidebar): ensure that aria-labelledby is applied to the correct piece of content in the header - FE-6891
When using a screen reader, sidebars are read out as 'Sidebar header Close'. This seems to be because the aria-labelledby targets the id on the sidebar header and not the heading itself. This fix applies the aria-labelledby to the content of the sidebar header component.

fixes #7053

### Proposed behaviour

Apply `id` prop to the content of Sidebar's Header component. This is so that only the heading content is read out.
### Current behaviour

`id` prop is on Sidebar's Header component. This means that the heading content is read out and also the close icon.

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

N/A

### Testing instructions

- Ensure that `With heading` example of Sidebar is read out correctly by a screen reader on Mac OS and Windows.
- Check that no other regressions have occurred with Sidebar's functionality or styling due to this change.



Patch:
diff --git a/src/components/sidebar/__internal__/sidebar-header/sidebar-header.component.tsx b/src/components/sidebar/__internal__/sidebar-header/sidebar-header.component.tsx
index 7feb43fde..dd642d8d3 100644
--- a/src/components/sidebar/__internal__/sidebar-header/sidebar-header.component.tsx
+++ b/src/components/sidebar/__internal__/sidebar-header/sidebar-header.component.tsx
@@ -19,12 +19,13 @@ const SidebarHeader = ({
 }: SidebarHeaderProps) => (
   <StyledSidebarHeader
     hasClose={!!closeIcon}
-    id={id}
     data-component="sidebar-header"
     p="27px 32px 32px"
     {...rest}
   >
-    {children}
+    <div data-element="sidebar-heading" id={id}>
+      {children}
+    </div>
     {closeIcon}
   </StyledSidebarHeader>
 );


Test patch:
diff --git a/src/components/sidebar/sidebar.test.tsx b/src/components/sidebar/sidebar.test.tsx
index 003db44f7..b5456fc46 100644
--- a/src/components/sidebar/sidebar.test.tsx
+++ b/src/components/sidebar/sidebar.test.tsx
@@ -52,7 +52,13 @@ test("renders with header when prop is provided", () => {
   ).toBeVisible();
 });
 
-test("sidebar uses header prop as accessible name when provided", () => {
+test("sidebar uses header prop as accessible name when an HTML element is provided as header", () => {
+  render(<Sidebar open header={<h1>My sidebar</h1>} />);
+
+  expect(screen.getByRole("dialog")).toHaveAccessibleName("My sidebar");
+});
+
+test("sidebar uses header prop as accessible name when a string is provided", () => {
   render(<Sidebar open header="My sidebar" />);
 
   expect(screen.getByRole("dialog")).toHaveAccessibleName("My sidebar");