Merge pull request #12 from MathuraMG/accessibility
add aria tags and roles
This commit is contained in:
commit
62023c2c82
12 changed files with 103 additions and 24 deletions
|
@ -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>}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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, {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ function draw() {
|
||||||
background(220);
|
background(220);
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const defaultHTML =
|
const defaultHTML =
|
||||||
`<!DOCTYPE html>
|
`<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
Loading…
Reference in a new issue