r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge pull request #70 from MathuraMG/accessibility

Browse source 
Accessibility changes to preferences and toolbar
This commit is contained in:
Cassie Tarakajian 2016-08-30 21:32:40 -04:00 committed by GitHub
commit f8ab95d0dc
4 changed files with 101 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
client/modules/IDE/components/Preferences.js
View file

@ -38,38 +38,7 @@ class Preferences extends React.Component {
preferences: true, preferences: true,
'preferences--selected': this.props.isVisible 'preferences--selected': this.props.isVisible
}); });
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': this.props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.isTabIndent
});
let autosaveOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.autosave
});
let autosaveOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.autosave
});
let lintWarningOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.lintWarning
});
let lintWarningOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.lintWarning
});
let textOutputOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.textOutput
});
let textOutputOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.textOutput
});
return ( return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu"> <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading"> <div className="preferences__heading">
@ -143,54 +112,112 @@ class Preferences extends React.Component {
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
</button> </button>
<div className="preference__vertical-list"> <div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button> <input
<button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button> type="radio"
onChange={this.props.indentWithSpace}
aria-label="indentation with space"
name="indentation"
id="indentation-space"
className="preference__radio-button"
value="Spaces"
checked={!this.props.isTabIndent}
/>
<label htmlFor="indentation-space" className="preference__option">Spaces</label>
<input
type="radio"
onChange={this.props.indentWithTab}
aria-label="indentation with tab"
name="indentation"
id="indentation-tab"
className="preference__radio-button"
value="Tabs"
checked={this.props.isTabIndent}
/>
<label htmlFor="indentation-tab" className="preference__option">Tabs</label>
</div> </div>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Autosave</h4> <h4 className="preference__title">Autosave</h4>
<div className="preference__options"> <div className="preference__options">
<button <input
className={autosaveOnClass} type="radio"
onClick={() => this.props.setAutosave(true)} onChange={() => this.props.setAutosave(true)}
aria-label="autosave on" aria-label="autosave on"
>On</button> name="autosave"
<button id="autosave-on"
className={autosaveOffClass} className="preference__radio-button"
onClick={() => this.props.setAutosave(false)} value="On"
checked={this.props.autosave}
/>
<label htmlFor="autosave-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setAutosave(false)}
aria-label="autosave off" aria-label="autosave off"
>Off</button> name="autosave"
id="autosave-off"
className="preference__radio-button"
value="Off"
checked={!this.props.autosave}
/>
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div> </div>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Lint Warning Sound</h4> <h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options"> <div className="preference__options">
<button <input
className={lintWarningOnClass} type="radio"
onClick={() => this.props.setLintWarning(true)} onChange={() => this.props.setLintWarning(true)}
aria-label="lint warning on" aria-label="lint warning on"
>On</button> name="lint warning"
<button id="lint-warning-on"
className={lintWarningOffClass} className="preference__radio-button"
onClick={() => this.props.setLintWarning(false)} value="On"
checked={this.props.lintWarning}
/>
<label htmlFor="lint-warning-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setLintWarning(false)}
aria-label="lint warning off" aria-label="lint warning off"
>Off</button> name="lint warning"
id="lint-warning-off"
className="preference__radio-button"
value="Off"
checked={!this.props.lintWarning}
/>
<label htmlFor="lint-warning-off" className="preference__option">Off</label>
</div> </div>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Accessible Text-based Canvas</h4> <h4 className="preference__title">Accessible Text-based Canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6> <h6 className="preference__subtitle">Used with screen reader</h6>
<div className="preference__options"> <div className="preference__options">
<button <input
className={textOutputOnClass} type="radio"
onClick={() => this.props.setTextOutput(true)} onChange={() => this.props.setTextOutput(true)}
aria-label="text output on" aria-label="text output on"
>On</button> name="text output"
<button id="text-output-on"
className={textOutputOffClass} className="preference__radio-button"
onClick={() => this.props.setTextOutput(false)} value="On"
checked={this.props.textOutput}
/>
<label htmlFor="text-output-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setTextOutput(false)}
aria-label="text output off" aria-label="text output off"
>Off</button> name="text output"
id="text-output-off"
className="preference__radio-button"
value="Off"
checked={!this.props.textOutput}
/>
<label htmlFor="text-output-off" className="preference__option">Off</label>
</div> </div>
</div> </div>
</section> </section>

14
client/modules/IDE/components/Toolbar.js
View file

@ -51,15 +51,15 @@ class Toolbar extends React.Component {
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" /> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button <button
className="toolbar__play-sketch-button" className="toolbar__play-sketch-button"
onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }} onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
aria-label="play sketch with output text" aria-label="play sketch"
> >
<InlineSVG src={playUrl} alt="Play Sketch with output text" /> <InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
<InlineSVG src={playUrl} alt="Play only visual Sketch" />
</button> </button>
<button <button
className={stopButtonClass} className={stopButtonClass}
@ -102,9 +102,9 @@ class Toolbar extends React.Component {
<button <button
className={preferencesButtonClass} className={preferencesButtonClass}
onClick={this.props.openPreferences} onClick={this.props.openPreferences}
aria-label="open preferences" aria-label="preferences"
> >
<InlineSVG src={preferencesUrl} alt="Show Preferences" /> <InlineSVG src={preferencesUrl} alt="Preferences" />
</button> </button>
</div> </div>
); );

3
client/styles/abstracts/_placeholders.scss
View file

@ -104,9 +104,6 @@
&:hover { &:hover {
color: $light-primary-text-color; color: $light-primary-text-color;
} }
&--selected {
color: $light-primary-text-color;
}
} }
%modal { %modal {

12
client/styles/components/_preferences.scss
View file

@ -81,13 +81,15 @@
padding-left: #{28 / $base-font-size}rem; padding-left: #{28 / $base-font-size}rem;
} }
.preference__radio-button {
@extend %hidden-element;
}
.preference__option { .preference__option {
@extend %preference-option; @extend %preference-option;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
&--selected { color: $light-inactive-text-color;
@extend %preference-option--selected;
}
} }
.preference__options { .preference__options {
@ -96,6 +98,10 @@
width: #{70 / $base-font-size}rem; width: #{70 / $base-font-size}rem;
} }
.preference__radio-button:checked + .preference__option {
color: $light-primary-text-color;
}
.preference--hidden { .preference--hidden {
@extend %hidden-element; @extend %hidden-element;
} }