BOLT-327 Rename ariaLabelledBy

Author: Stegosauruss

packages/dotcom-ui-header/src/components/sub-navigation/SubNavDropdown.tsx

@@ -9,19 +9,19 @@ interface DropdownItem {
 interface SubNavDropdownProps {
   id: string
   items: DropdownItem[]
-  labelledById: string
+  ariaLabelledBy: string
   title?: string
 }
 
-const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, labelledById, title }) => {
+const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, ariaLabelledBy, title }) => {
   return (
     <div
       id={id}
       className="o-header__subnav-dropdown"
       data-o-header-subnav-dropdown-modal
       role="dialog"
       aria-modal="true"
-      aria-labelledby={labelledById}
+      aria-labelledby={ariaLabelledBy}
     >
       {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
       <button

packages/dotcom-ui-header/src/components/sub-navigation/SubNavWithDropdown.tsx

@@ -10,7 +10,7 @@ interface SubNavWithDropdownProps {
 
 const SubNavWithDropdown: React.FC<SubNavWithDropdownProps> = ({ item, selected }) => {
   const dropdownItems = item.subnavDropdownOptions || []
-  const labelSlug = item.label.toLowerCase().replace(/\s+/g, '-')
+  const labelSlug = item.label?.toLowerCase().replace(/\s+/g, '-')
   const buttonId = `subnav-dropdown-button-${labelSlug}`
   const modalId = `subnav-dropdown-modal-${labelSlug}`
 
@@ -29,7 +29,7 @@ const SubNavWithDropdown: React.FC<SubNavWithDropdownProps> = ({ item, selected
       >
         {item.label}
       </button>
-      <SubNavDropdown id={modalId} labelledById={buttonId} items={dropdownItems} title={item.label} />
+      <SubNavDropdown id={modalId} ariaLabelledBy={buttonId} items={dropdownItems} title={item.label} />
     </div>
   )
 }