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--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 (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
@ -143,54 +112,112 @@ class Preferences extends React.Component {
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
<input
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 className="preference">
<h4 className="preference__title">Autosave</h4>
<div className="preference__options">
<button
className={autosaveOnClass}
onClick={() => this.props.setAutosave(true)}
<input
type="radio"
onChange={() => this.props.setAutosave(true)}
aria-label="autosave on"
>On</button>
<button
className={autosaveOffClass}
onClick={() => this.props.setAutosave(false)}
name="autosave"
id="autosave-on"
className="preference__radio-button"
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"
>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 className="preference">
<h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options">
<button
className={lintWarningOnClass}
onClick={() => this.props.setLintWarning(true)}
<input
type="radio"
onChange={() => this.props.setLintWarning(true)}
aria-label="lint warning on"
>On</button>
<button
className={lintWarningOffClass}
onClick={() => this.props.setLintWarning(false)}
name="lint warning"
id="lint-warning-on"
className="preference__radio-button"
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"
>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 className="preference">
<h4 className="preference__title">Accessible Text-based Canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6>
<div className="preference__options">
<button
className={textOutputOnClass}
onClick={() => this.props.setTextOutput(true)}
<input
type="radio"
onChange={() => this.props.setTextOutput(true)}
aria-label="text output on"
>On</button>
<button
className={textOutputOffClass}
onClick={() => this.props.setTextOutput(false)}
name="text output"
id="text-output-on"
className="preference__radio-button"
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"
>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>
</section>

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

@ -51,15 +51,15 @@ class Toolbar extends React.Component {
return (
<div className="toolbar">
<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
className="toolbar__play-sketch-button"
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
className={stopButtonClass}
@ -102,9 +102,9 @@ class Toolbar extends React.Component {
<button
className={preferencesButtonClass}
onClick={this.props.openPreferences}
aria-label="open preferences"
aria-label="preferences"
>
<InlineSVG src={preferencesUrl} alt="Show Preferences" />
<InlineSVG src={preferencesUrl} alt="Preferences" />
</button>
</div>
);

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

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

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

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