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

add focus and labels

Browse source
This commit is contained in:
MathuraMG 2016-09-28 12:09:42 -04:00
parent f017dd8a76
commit 46d58014ff
3 changed files with 49 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/About.js
View file

@ -4,13 +4,17 @@ const exitUrl = require('../../../images/exit.svg');
import { browserHistory } from 'react-router'; import { browserHistory } from 'react-router';
class About extends React.Component { class About extends React.Component {
componentDidMount() {
this.refs.about.focus();
}
closeAboutModal() { closeAboutModal() {
browserHistory.goBack(); browserHistory.goBack();
} }
render() { render() {
return ( return (
<div className="about"> <section className="about" ref="about" tabIndex="0">
<header className="about__header"> <header className="about__header">
<h2>About</h2> <h2>About</h2>
<button className="about__exit-button" onClick={this.closeAboutModal}> <button className="about__exit-button" onClick={this.closeAboutModal}>
@ -33,7 +37,7 @@ class About extends React.Component {
> report a bug.</a> > report a bug.</a>
</p> </p>
</div> </div>
</div> </section>
); );
} }
} }

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

@ -148,6 +148,7 @@ class Editor extends React.Component {
> >
<button <button
className="editor__options-button" className="editor__options-button"
aria-label="editor options"
tabIndex="0" tabIndex="0"
onClick={(e) => { onClick={(e) => {
e.target.focus(); e.target.focus();
@ -157,7 +158,7 @@ class Editor extends React.Component {
> >
<InlineSVG src={downArrowUrl} /> <InlineSVG src={downArrowUrl} />
</button> </button>
<ul className="editor__options"> <ul className="editor__options" title="editor options">
<li> <li>
<a onClick={this.tidyCode}>Tidy</a> <a onClick={this.tidyCode}>Tidy</a>
</li> </li>

17
client/modules/IDE/components/ShareModal.js
View file

@ -2,13 +2,17 @@ import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg'); const exitUrl = require('../../../images/exit.svg');
function ShareModal(props) { class ShareModal extends React.Component {
componentDidMount() {
this.refs.shareModal.focus();
}
render() {
const hostname = window.location.origin; const hostname = window.location.origin;
return ( return (
<section className="share-modal"> <section className="share-modal" ref="shareModal" tabIndex="0">
<header className="share-modal__header"> <header className="share-modal__header">
<h2>Share Sketch</h2> <h2>Share Sketch</h2>
<button className="about__exit-button" onClick={props.closeShareModal}> <button className="about__exit-button" onClick={this.props.closeShareModal}>
<InlineSVG src={exitUrl} alt="Close Share Overlay" /> <InlineSVG src={exitUrl} alt="Close Share Overlay" />
</button> </button>
</header> </header>
@ -17,7 +21,7 @@ function ShareModal(props) {
<input <input
type="text" type="text"
className="share-modal__input" className="share-modal__input"
value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`} value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
/> />
</div> </div>
<div className="share-modal__section"> <div className="share-modal__section">
@ -25,7 +29,7 @@ function ShareModal(props) {
<input <input
type="text" type="text"
className="share-modal__input" className="share-modal__input"
value={`${hostname}/full/${props.projectId}`} value={`${hostname}/full/${this.props.projectId}`}
/> />
</div> </div>
<div className="share-modal__section"> <div className="share-modal__section">
@ -33,12 +37,13 @@ function ShareModal(props) {
<input <input
type="text" type="text"
className="share-modal__input" className="share-modal__input"
value={`${hostname}/projects/${props.projectId}`} value={`${hostname}/projects/${this.props.projectId}`}
/> />
</div> </div>
</section> </section>
); );
} }
}
ShareModal.propTypes = { ShareModal.propTypes = {
projectId: PropTypes.string.isRequired, projectId: PropTypes.string.isRequired,