fix(a11y): remove tab role from buttons in beta rwd challenges (#45032)

* fix: remove tab role from buttons in beta rwd challenges

* remove sr-only text

* remove whitespace

client/src/templates/Challenges/classic/action-row.tsx

@@ -38,34 +38,30 @@ const ActionRow = ({
       </div>
       <div className='tabs-row'>
         <EditorTabs />
-        <button
-          className='restart-step-tab'
-          onClick={resetChallenge}
-          role='tab'
-        >
+        <button className='restart-step-tab' onClick={resetChallenge}>
           {t('learn.editor-tabs.restart-step')}
         </button>
         <div className='panel-display-tabs'>
           <button
+            aria-expanded={showConsole ? 'true' : 'false'}
             className={showConsole ? 'active-tab' : ''}
             onClick={() => togglePane('showConsole')}
-            role='tab'
           >
             {t('learn.editor-tabs.console')}
           </button>
           {hasNotes && (
             <button
+              aria-expanded={showNotes ? 'true' : 'false'}
               className={showNotes ? 'active-tab' : ''}
               onClick={() => togglePane('showNotes')}
-              role='tab'
             >
               {t('learn.editor-tabs.notes')}
             </button>
           )}
           <button
+            aria-expanded={showPreview ? 'true' : 'false'}
             className={showPreview ? 'active-tab' : ''}
             onClick={() => togglePane('showPreview')}
-            role='tab'
           >
             {t('learn.editor-tabs.preview')}
           </button>

client/src/templates/Challenges/classic/classic.css

@@ -88,7 +88,7 @@ button.monaco-editor-tab:hover {
   border-bottom: 2px solid var(--primary-background);
 }
 
-.monaco-editor-tab[role='tab'][aria-selected='true'] {
+.monaco-editor-tab[aria-expanded='true'] {
   border-color: var(--secondary-color);
   background-color: var(--secondary-color);
   color: var(--secondary-background);

client/src/templates/Challenges/classic/editor-tabs.tsx

@@ -42,13 +42,13 @@ class EditorTabs extends Component<EditorTabsProps> {
         {sortChallengeFiles(challengeFiles).map(
           (challengeFile: ChallengeFile) => (
             <button
-              aria-selected={visibleEditors[challengeFile.fileKey]}
+              aria-expanded={visibleEditors[challengeFile.fileKey] ?? 'false'}
               className='monaco-editor-tab'
               key={challengeFile.fileKey}
               onClick={() => toggleVisibleEditor(challengeFile.fileKey)}
-              role='tab'
             >
-              {`${challengeFile.name}.${challengeFile.ext}`}
+              {`${challengeFile.name}.${challengeFile.ext}`}{' '}
+              <span className='sr-only'>editor</span>
             </button>
           )
         )}