add more roles + remove menu roles

This commit is contained in:
mathuramg 2016-07-13 15:23:48 -04:00
parent d4d3d354b3
commit b4c15e70df
4 changed files with 26 additions and 5 deletions

View file

@ -47,7 +47,7 @@ class Editor extends React.Component {
_cm: CodeMirror.Editor _cm: CodeMirror.Editor
render() { render() {
return <div ref="container" className="editor-holder" tabIndex="0" title="code-editor"></div>; return <div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="region"></div>;
} }
} }

View file

@ -20,7 +20,7 @@ function Preferences(props) {
'preference__option--selected': !props.isTabIndent 'preference__option--selected': !props.isTabIndent
}); });
return ( return (
<div className={preferencesContainerClass} tabIndex="0" title="preference-menu" id="preferences-menu"> <div 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}>
@ -35,7 +35,15 @@ function Preferences(props) {
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
</button> </button>
<input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.fontSize} onChange={props.updateFont}></input> <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}> <button className="preference__minus-button" onClick={props.increaseFont}>
<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>
@ -48,7 +56,15 @@ function Preferences(props) {
<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" aria-live="status" aria-live="polite" role="status" value={props.indentationAmount} onChange={props.updateIndentation}></input> <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}> <button className="preference__minus-button" onClick={props.increaseIndentation}>
<Isvg src={plusUrl} alt="IncreaseIndentation Amount" /> <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>

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

@ -41,7 +41,10 @@ function Toolbar(props) {
{props.projectName} {props.projectName}
</span> </span>
</div> </div>
<button className={preferencesButtonClass} onClick={props.openPreferences} role="menuitem" aria-haspopup="true" aria-owns="preferences-menu"> <button
className={preferencesButtonClass}
onClick={props.openPreferences}
>
<Isvg src={preferencesUrl} alt="Show Preferences" /> <Isvg src={preferencesUrl} alt="Show Preferences" />
</button> </button>
</div> </div>