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

fix(a11y): improve tab navigation for Editor

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2020-06-12 17:15:44 +02:00
committed by Mrugesh Mohapatra
parent 301212e194
commit ad059dc49c
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/templates/Challenges/classic/Editor.js
View File

@ -328,43 +328,46 @@ class Editor extends Component {
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom'; const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
// TODO: tabs should be dynamically created from the challengeFiles // TODO: tabs should be dynamically created from the challengeFiles
// TODO: a11y fixes.
// TODO: is the key necessary? Try switching themes without it. // TODO: is the key necessary? Try switching themes without it.
return ( return (
<Suspense fallback={<Loader timeout={600} />}> <Suspense fallback={<Loader timeout={600} />}>
<span className='notranslate'> <span className='notranslate'>
<div className='monaco-editor-tabs'> <div className='monaco-editor-tabs'>
{challengeFiles['indexjsx'] && ( {challengeFiles['indexjsx'] && (
<div <button
className='monaco-editor-tab' className='monaco-editor-tab'
onClick={() => this.changeTab('indexjsx')} onClick={() => this.changeTab('indexjsx')}
role='tab'
> >
script.jsx script.jsx
</div> </button>
)} )}
{challengeFiles['indexhtml'] && ( {challengeFiles['indexhtml'] && (
<div <button
className='monaco-editor-tab' className='monaco-editor-tab'
onClick={() => this.changeTab('indexhtml')} onClick={() => this.changeTab('indexhtml')}
role='tab'
> >
index.html index.html
</div> </button>
)} )}
{challengeFiles['indexjs'] && ( {challengeFiles['indexjs'] && (
<div <button
className='monaco-editor-tab' className='monaco-editor-tab'
onClick={() => this.changeTab('indexjs')} onClick={() => this.changeTab('indexjs')}
role='tab'
> >
script.js script.js
</div> </button>
)} )}
{challengeFiles['indexcss'] && ( {challengeFiles['indexcss'] && (
<div <button
className='monaco-editor-tab' className='monaco-editor-tab'
onClick={() => this.changeTab('indexcss')} onClick={() => this.changeTab('indexcss')}
role='tab'
> >
styles.css styles.css
</div> </button>
)} )}
</div> </div>
<MonacoEditor <MonacoEditor