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

Merge pull request #12 from MathuraMG/accessibility

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/Nav.js
View file

@ -3,8 +3,8 @@ import { Link } from 'react-router';
function Nav(props) {
return (
<nav className="nav">
<ul className="nav__items-left">
<nav className="nav" role="navigation" title="main-navigation">
<ul className="nav__items-left" title="project-menu">
<li className="nav__item">
<a
className="nav__new"
@ -39,7 +39,7 @@ function Nav(props) {
</a>
</li>
</ul>
<ul className="nav__items-right">
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
{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>}

2
client/modules/IDE/actions/preferences.js
View file

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

3
client/modules/IDE/components/Editor.js
View file

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

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

@ -20,45 +20,92 @@ function Preferences(props) {
'preference__option--selected': !props.isTabIndent
});
return (
<div className={preferencesContainerClass} tabIndex="0">
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<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" />
</button>
</div>
<div className="preference">
<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" />
<h6 className="preference__label">Decrease</h6>
</button>
<input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input>
<button className="preference__minus-button" onClick={props.increaseFont}>
<label htmlFor="preference-decrease-font-size" className="preference__button-label">
Decrease Font Size
</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" />
<h6 className="preference__label">Increase</h6>
</button>
<label htmlFor="preference-increase-font-size" className="preference__button-label">
Increase Font Size
</label>
</div>
<div className="preference">
<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" />
<h6 className="preference__label">Decrease</h6>
</button>
<input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input>
<button className="preference__minus-button" onClick={props.increaseIndentation}>
<label htmlFor="preference-decrease-indentation" className="preference__button-label">
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" />
<h6 className="preference__label">Increase</h6>
</button>
<label htmlFor="preference-increase-indentation" className="preference__button-label">
Increase Indentation Amount
</label>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
</div>
</div>
</div>
</section>
);
}

2
client/modules/IDE/components/PreviewFrame.js
View file

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

4
client/modules/IDE/components/Sidebar.js
View file

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

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

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

4
client/modules/IDE/reducers/preferences.js
View file

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

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

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

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

@ -2,7 +2,7 @@
position: absolute;
top: #{66 / $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;
display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@ -79,3 +79,7 @@
@extend %preference-option--selected;
}
}
.preference__button-label {
@extend %hidden-label
}

3
client/styles/components/_toolbar.scss
View file

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