feat(sidebar): add aria-labelledby referencing title if not provided

Give guid as id to sidebar header container, and provide this as the aria-lablledby to the sidebar
container if no aria-label or aria-labelledby prop is provided. This improves accessibility and
makes Sidebar consistent with DialogFullScreen. It also fixes an issue with the previous commit
where, with Voiceover on, opening the sidebar places focus on the header rather than the sidebar
container.

src/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -3,9 +3,10 @@ import PropTypes from "prop-types";
 import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
 import SidebarHeaderStyle from "./sidebar-header.style";
 
-const SidebarHeader = ({ className, children, ...props }) => (
+const SidebarHeader = ({ className, children, id, ...props }) => (
   <SidebarHeaderStyle
     className={className}
+    id={id}
     {...tagComponent("sidebar-header", props)}
   >
     {children}
@@ -17,6 +18,8 @@ SidebarHeader.propTypes = {
   children: PropTypes.node,
   /** A custom class name. */
   className: PropTypes.string,
+  /** A custom id. */
+  id: PropTypes.string,
 };
 
 export default SidebarHeader;

src/components/sidebar/sidebar.component.js

@@ -9,6 +9,7 @@ import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
 import Box from "../box";
 import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
+import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalFocus from "../../hooks/__internal__/useModalFocus";
 
@@ -34,6 +35,7 @@ const Sidebar = React.forwardRef(
     ref
   ) => {
     const locale = useLocale();
+    const { current: titleId } = useRef(createGuid());
 
     let sidebarRef = useRef();
     if (ref) sidebarRef = ref;
@@ -63,7 +65,9 @@ const Sidebar = React.forwardRef(
         aria-modal={!enableBackgroundUI}
         aria-describedby={ariaDescribedBy}
         aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
+        aria-labelledby={
+          !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy
+        }
         ref={sidebarRef}
         position={position}
         size={size}
@@ -72,7 +76,7 @@ const Sidebar = React.forwardRef(
         role={role}
         {...focusProps}
       >
-        {header && <SidebarHeader>{header}</SidebarHeader>}
+        {header && <SidebarHeader id={titleId}>{header}</SidebarHeader>}
         {closeIcon()}
         <Box
           data-element="sidebar-content"

src/components/sidebar/sidebar.spec.js

@@ -7,6 +7,9 @@ import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 import IconButton from "../icon-button";
 import StyledIconButton from "../icon-button/icon-button.style";
 import SidebarHeader from "./__internal__/sidebar-header/sidebar-header.component";
+import guid from "../../__internal__/utils/helpers/guid";
+
+jest.mock("../../__internal__/utils/helpers/guid");
 
 describe("Sidebar", () => {
   let wrapper, spy;
@@ -111,6 +114,22 @@ describe("Sidebar", () => {
         wrapper = mount(<Sidebar open header="test header" />);
         expect(wrapper.find(SidebarHeader).contains("test header")).toBe(true);
       });
+
+      it("when a header is provided, the container has an aria-labeledby attribute set to it's header's id", () => {
+        guid.mockImplementation(() => "guid-12345");
+
+        wrapper = mount(<Sidebar open header="test header" />);
+        expect(wrapper.find(SidebarStyle).first().prop("aria-labelledby")).toBe(
+          "guid-12345"
+        );
+      });
+
+      it("when no header is provided, the container has an aria-labeledby attribute set to the prop provided", () => {
+        wrapper = mount(<Sidebar open aria-labelledby="my-id" />);
+        expect(wrapper.find(SidebarStyle).first().prop("aria-labelledby")).toBe(
+          "my-id"
+        );
+      });
     });
   });