feat: [AsPu-562] accessibility HTML attributes for Course Navigation top bar

Author: PKulkoRaccoonGang

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -102,7 +102,12 @@ const SequenceNavigation = ({
   };
 
   return sequenceStatus === LOADED && (
-    <nav id="courseware-sequence-navigation" data-testid="courseware-sequence-navigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
+    <nav
+      id="courseware-sequenceNavigation"
+      className={classNames('sequence-navigation', className)}
+      style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
+      aria-label="course sequence tabs"
+    >
       {renderPreviousButton()}
       {renderUnitButtons()}
       {renderNextButton()}

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx

@@ -38,6 +38,7 @@ const SequenceNavigationTabs = ({
         <div
           className="sequence-navigation-tabs d-flex flex-grow-1"
           style={shouldDisplayDropdown ? invisibleStyle : null}
+          role="tablist"
           ref={containerRef}
         >
           {unitIds.map(buttonUnitId => (

src/courseware/course/sequence/sequence-navigation/UnitButton.jsx

@@ -39,6 +39,9 @@ const UnitButton = ({
       variant="link"
       onClick={handleClick}
       title={title}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={title}
       as={Link}
       to={unitPath}
     >