gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

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

* remove sr-only text

* remove whitespace
This commit is contained in:
Bruce B
2022-02-11 16:00:36 -08:00
committed by GitHub
parent f7ab163aea
commit a5e4596db7
3 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/templates/Challenges/classic/action-row.tsx
View File

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

2
client/src/templates/Challenges/classic/classic.css
View File

@ -88,7 +88,7 @@ button.monaco-editor-tab:hover {
border-bottom: 2px solid var(--primary-background); 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); border-color: var(--secondary-color);
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: var(--secondary-background); color: var(--secondary-background);

6
client/src/templates/Challenges/classic/editor-tabs.tsx
View File

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