Merge pull request #12 from MathuraMG/accessibility

add aria tags and roles
This commit is contained in:
Cassie Tarakajian 2016-07-18 12:10:23 -04:00 committed by GitHub
commit 62023c2c82
12 changed files with 103 additions and 24 deletions

View file

@ -3,8 +3,8 @@ import { Link } from 'react-router';
function Nav(props) { function Nav(props) {
return ( return (
<nav className="nav"> <nav className="nav" role="navigation" title="main-navigation">
<ul className="nav__items-left"> <ul className="nav__items-left" title="project-menu">
<li className="nav__item"> <li className="nav__item">
<a <a
className="nav__new" className="nav__new"
@ -39,7 +39,7 @@ function Nav(props) {
</a> </a>
</li> </li>
</ul> </ul>
<ul className="nav__items-right"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li className="nav__item">
{props.user.authenticated && <p>Hello, {props.user.username}!</p>} {props.user.authenticated && <p>Hello, {props.user.username}!</p>}
{!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>} {!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}

View file

@ -44,7 +44,7 @@ export function decreaseIndentation() {
}; };
} }
export function updateIndentation() { export function updateIndentation(event) {
const value = event.target.value; const value = event.target.value;
return { return {
type: ActionTypes.UPDATE_INDENTATION, type: ActionTypes.UPDATE_INDENTATION,

View file

@ -25,6 +25,7 @@ class Editor extends React.Component {
value: this.props.file.content, value: this.props.file.content,
lineNumbers: true, lineNumbers: true,
styleActiveLine: true, styleActiveLine: true,
inputStyle: 'contenteditable',
mode: 'javascript', mode: 'javascript',
lineWrapping: true, lineWrapping: true,
gutters: ['CodeMirror-lint-markers'], gutters: ['CodeMirror-lint-markers'],
@ -75,7 +76,7 @@ class Editor extends React.Component {
_cm: CodeMirror.Editor _cm: CodeMirror.Editor
render() { render() {
return <div ref="container" className="editor-holder"></div>; return <div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="region"></div>;
} }
} }

View file

@ -20,45 +20,92 @@ function Preferences(props) {
'preference__option--selected': !props.isTabIndent 'preference__option--selected': !props.isTabIndent
}); });
return ( return (
<div className={preferencesContainerClass} tabIndex="0"> <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading"> <div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2> <h2 className="preferences__title">Preferences</h2>
<button className="preferences__exit-button" onClick={props.closePreferences}> <button
className="preferences__exit-button"
onClick={props.closePreferences}
title="exit"
>
<Isvg src={exitUrl} alt="Exit Preferences" /> <Isvg src={exitUrl} alt="Exit Preferences" />
</button> </button>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Text Size</h4> <h4 className="preference__title">Text Size</h4>
<button className="preference__plus-button" onClick={props.decreaseFont}> <button
className="preference__plus-button"
onClick={props.decreaseFont}
id="preference-decrease-font-size"
>
<Isvg src={minusUrl} alt="Decrease Font Size" /> <Isvg src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
</button> </button>
<label htmlFor="preference-decrease-font-size" className="preference__button-label">
<input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input> Decrease Font Size
<button className="preference__minus-button" onClick={props.increaseFont}> </label>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.fontSize}
onChange={props.updateFont}
>
</input>
<button
className="preference__minus-button"
onClick={props.increaseFont}
id="preference-increase-font-size"
>
<Isvg src={plusUrl} alt="Increase Font Size" /> <Isvg src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
</button> </button>
<label htmlFor="preference-increase-font-size" className="preference__button-label">
Increase Font Size
</label>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Indentation Amount</h4> <h4 className="preference__title">Indentation Amount</h4>
<button className="preference__plus-button" onClick={props.decreaseIndentation}> <button
className="preference__plus-button"
onClick={props.decreaseIndentation}
id="preference-decrease-indentation"
>
<Isvg src={minusUrl} alt="DecreaseIndentation Amount" /> <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
</button> </button>
<input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input> <label htmlFor="preference-decrease-indentation" className="preference__button-label">
<button className="preference__minus-button" onClick={props.increaseIndentation}> Decrease Indentation Amount
</label>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.indentationAmount}
onChange={props.updateIndentation}
>
</input>
<button
className="preference__minus-button"
onClick={props.increaseIndentation}
id="preference-increase-indentation"
>
<Isvg src={plusUrl} alt="IncreaseIndentation Amount" /> <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
</button> </button>
<label htmlFor="preference-increase-indentation" className="preference__button-label">
Increase Indentation Amount
</label>
<div className="preference__vertical-list"> <div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button> <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button> <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
</div> </div>
</div> </div>
</div> </section>
); );
} }

View file

@ -83,6 +83,8 @@ class PreviewFrame extends React.Component {
return ( return (
<iframe <iframe
className="preview-frame" className="preview-frame"
role="region"
tabIndex="0"
frameBorder="0" frameBorder="0"
title="sketch output" title="sketch output"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"

View file

@ -11,7 +11,7 @@ function Sidebar(props) {
}); });
return ( return (
<section className={sidebarClass}> <nav className={sidebarClass} title="file-navigation" role="navigation">
<div className="sidebar__header"> <div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3> <h3 className="sidebar__title">Sketch Files</h3>
<div className="sidebar__icons"> <div className="sidebar__icons">
@ -53,7 +53,7 @@ function Sidebar(props) {
); );
})} })}
</ul> </ul>
</section> </nav>
); );
} }

View file

@ -24,12 +24,18 @@ function Toolbar(props) {
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={props.startSketch}> <button className={playButtonClass} onClick={props.startSketch} id="play-button">
<Isvg src={playUrl} alt="Play Sketch" /> <Isvg src={playUrl} alt="Play Sketch" />
</button> </button>
<button className={stopButtonClass} onClick={props.stopSketch}> <label htmlFor="play-button" className="toolbar__button-label">
play
</label>
<button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
<Isvg src={stopUrl} alt="Stop Sketch" /> <Isvg src={stopUrl} alt="Stop Sketch" />
</button> </button>
<label htmlFor="stop-button" className="toolbar__button-label">
stop
</label>
<div className="toolbar__project-name-container"> <div className="toolbar__project-name-container">
<span <span
className="toolbar__project-name" className="toolbar__project-name"
@ -48,9 +54,16 @@ function Toolbar(props) {
} }
})()} })()}
</div> </div>
<button className={preferencesButtonClass} onClick={props.openPreferences}> <button
className={preferencesButtonClass}
onClick={props.openPreferences}
id="preferences-button"
>
<Isvg src={preferencesUrl} alt="Show Preferences" /> <Isvg src={preferencesUrl} alt="Show Preferences" />
</button> </button>
<label htmlFor="preferences-button" className="toolbar__button-label">
preferences
</label>
</div> </div>
); );
} }

View file

@ -27,7 +27,7 @@ const preferences = (state = initialState, action) => {
}); });
case ActionTypes.UPDATE_FONTSIZE: case ActionTypes.UPDATE_FONTSIZE:
return Object.assign({}, state, { return Object.assign({}, state, {
fontSize: action.value fontSize: parseInt(action.value, 10)
}); });
case ActionTypes.INCREASE_INDENTATION: case ActionTypes.INCREASE_INDENTATION:
return Object.assign({}, state, { return Object.assign({}, state, {
@ -39,7 +39,7 @@ const preferences = (state = initialState, action) => {
}); });
case ActionTypes.UPDATE_INDENTATION: case ActionTypes.UPDATE_INDENTATION:
return Object.assign({}, state, { return Object.assign({}, state, {
indentationAmount: action.value indentationAmount: parseInt(action.value, 10)
}); });
case ActionTypes.INDENT_WITH_TAB: case ActionTypes.INDENT_WITH_TAB:
return Object.assign({}, state, { return Object.assign({}, state, {

View file

@ -107,3 +107,12 @@
color: $light-primary-text-color; color: $light-primary-text-color;
} }
} }
%hidden-label {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

View file

@ -2,7 +2,7 @@
position: absolute; position: absolute;
top: #{66 / $base-font-size}rem; top: #{66 / $base-font-size}rem;
right: #{40 / $base-font-size}rem; right: #{40 / $base-font-size}rem;
width: #{332 / $base-font-size}rem; width: #{336 / $base-font-size}rem;
background-color: $light-button-background-color; background-color: $light-button-background-color;
display: none; display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@ -79,3 +79,7 @@
@extend %preference-option--selected; @extend %preference-option--selected;
} }
} }
.preference__button-label {
@extend %hidden-label
}

View file

@ -55,6 +55,9 @@
} }
} }
.toolbar__button-label {
@extend %hidden-label
}
.toolbar__project-owner { .toolbar__project-owner {
margin-left: #{5 / $base-font-size}rem; margin-left: #{5 / $base-font-size}rem;
} }

View file

@ -11,7 +11,7 @@ function draw() {
background(220); background(220);
}` }`
const defaultHTML = const defaultHTML =
`<!DOCTYPE html> `<!DOCTYPE html>
<html> <html>
<head> <head>