feat(MainModal): initialize currentSubSection with deepLinkData if available

fix(ModalTopBar): enhance accessibility for breadcrumb navigation
refactor(Header): remove back navigation title for cleaner header display

src/components/Elements/MainModal/Main.jsx

@@ -24,7 +24,7 @@ function MainModal({ modalClose, deepLinkData }) {
   const [currentTab, setCurrentTab] = useState(initialTab);
   const [currentSection, setCurrentSection] = useState('');
   const [currentSectionName, setCurrentSectionName] = useState('');
-  const [currentSubSection, setCurrentSubSection] = useState(null);
+  const [currentSubSection, setCurrentSubSection] = useState(deepLinkData?.subSection || null);
   const [productView, setProductView] = useState(null);
   const [resetDiscoverToAll, setResetDiscoverToAll] = useState(false);
   const [navigationTrigger, setNavigationTrigger] = useState(null);

src/components/Elements/MainModal/components/ModalTopBar.jsx

@@ -164,26 +164,42 @@ function ModalTopBar({
           draggable={false}
         />
         {breadcrumbPath.length > 0 && (
-          <div className="breadcrumbs">
+          <nav className="breadcrumbs" aria-label="Breadcrumb navigation">
             {breadcrumbPath.map((item, index) => {
               const isLast = index === breadcrumbPath.length - 1;
               const isClickable = item.onClick !== null;
 
               return (
                 <span key={index} className="breadcrumb-segment">
-                  <span
-                    className={`breadcrumb-item ${isLast ? 'breadcrumb-current' : ''} ${
-                      isClickable ? 'breadcrumb-clickable' : ''
-                    }`}
-                    onClick={item.onClick}
-                  >
-                    {item.label}
-                  </span>
-                  {!isLast && <MdChevronRight className="breadcrumb-separator" />}
+                  {isClickable ? (
+                    <span
+                      className={`breadcrumb-item breadcrumb-clickable`}
+                      onClick={item.onClick}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          item.onClick();
+                        }
+                      }}
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`Navigate to ${item.label}`}
+                    >
+                      {item.label}
+                    </span>
+                  ) : (
+                    <span
+                      className={`breadcrumb-item ${isLast ? 'breadcrumb-current' : ''}`}
+                      aria-current={isLast ? 'page' : undefined}
+                    >
+                      {item.label}
+                    </span>
+                  )}
+                  {!isLast && <MdChevronRight className="breadcrumb-separator" aria-hidden="true" />}
                 </span>
               );
             })}
-          </div>
+          </nav>
         )}
       </div>
       <div className="topBarRight">

src/components/Layout/Settings/Header/Header.jsx

@@ -67,14 +67,6 @@ function Header(props) {
   return (
     <div className="modalHeader">
       <span className="mainTitle">
-        {props.secondaryTitle && (
-          <>
-            <span className="backTitle" onClick={props.goBack}>
-              {props.title}
-            </span>
-            <MdOutlineKeyboardArrowRight />
-          </>
-        )}
         {props.secondaryTitle || props.title}
       </span>
       <div className="headerActions">