Merge pull request #70 from MathuraMG/accessibility

Accessibility changes to preferences and toolbar
2016-08-30 21:32:40 -04:00 · 2016-08-30 21:32:40 -04:00 · f8ab95d0dc
parent 6a3f3a7cf0 fbc6f1c97a
commit f8ab95d0dc
4 changed files with 101 additions and 71 deletions
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@ -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>
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@ -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>
    );
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@ -104,9 +104,6 @@
 	&:hover {
 		color: $light-primary-text-color;
 	}
-	&--selected {
-    color: $light-primary-text-color;
-  }
 }

 %modal {
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@ -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;
 }