From a5e4596db7d5dbfc9ea3577b60d6c5a1638383dc Mon Sep 17 00:00:00 2001
From: Bruce B <bbsmooth@gmail.com>
Date: Fri, 11 Feb 2022 16:00:36 -0800
Subject: [PATCH] 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
---
 .../src/templates/Challenges/classic/action-row.tsx  | 12 ++++--------
 client/src/templates/Challenges/classic/classic.css  |  2 +-
 .../src/templates/Challenges/classic/editor-tabs.tsx |  6 +++---
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/templates/Challenges/classic/action-row.tsx b/client/src/templates/Challenges/classic/action-row.tsx
index a136595eb4..02a5ac97e5 100644
--- a/client/src/templates/Challenges/classic/action-row.tsx
+++ b/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>
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index bc5df4e463..5e642163b1 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/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);
diff --git a/client/src/templates/Challenges/classic/editor-tabs.tsx b/client/src/templates/Challenges/classic/editor-tabs.tsx
index 637c9e3875..02bee7bd23 100644
--- a/client/src/templates/Challenges/classic/editor-tabs.tsx
+++ b/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>
           )
         )}