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

Merge pull request #1430 from processing/semantic-elements

Browse source 
Add <main> to all pages, add semantic HTML updates
This commit is contained in:
Cassie Tarakajian 2020-05-20 14:59:16 -04:00 committed by GitHub
commit ec16905ff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 403 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/components/Nav.jsx
View file

@ -682,21 +682,12 @@ class Nav extends React.PureComponent {
}; };
return ( return (
<header>
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}> <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderLeftLayout(navDropdownState)} {this.renderLeftLayout(navDropdownState)}
{this.renderUserMenu(navDropdownState)} {this.renderUserMenu(navDropdownState)}
{/*
<div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released.
It is in development, you can report bugs <a
href="https://github.com/processing/p5.js-web-editor/issues"
target="_blank"
rel="noopener noreferrer"
>here</a>.
Please use with caution.
</div>
*/}
</nav> </nav>
</header>
); );
} }
} }

2
client/components/__test__/__snapshots__/Nav.test.jsx.snap
View file

@ -1,6 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav renders correctly 1`] = ` exports[`Nav renders correctly 1`] = `
<header>
<nav <nav
className="nav" className="nav"
title="main-navigation" title="main-navigation"
@ -341,4 +342,5 @@ exports[`Nav renders correctly 1`] = `
</li> </li>
</ul> </ul>
</nav> </nav>
</header>
`; `;

4
client/modules/IDE/components/AssetList.jsx
View file

@ -175,7 +175,7 @@ class AssetList extends React.Component {
render() { render() {
const { assetList } = this.props; const { assetList } = this.props;
return ( return (
<div className="asset-table-container"> <article className="asset-table-container">
<Helmet> <Helmet>
<title>{this.getAssetsTitle()}</title> <title>{this.getAssetsTitle()}</title>
</Helmet> </Helmet>
@ -195,7 +195,7 @@ class AssetList extends React.Component {
{assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)} {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
</tbody> </tbody>
</table>} </table>}
</div> </article>
); );
} }
} }

4
client/modules/IDE/components/CollectionList/CollectionList.jsx
View file

@ -129,7 +129,7 @@ class CollectionList extends React.Component {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username; const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return ( return (
<div className="sketches-table-container"> <article className="sketches-table-container">
<Helmet> <Helmet>
<title>{this.getTitle()}</title> <title>{this.getTitle()}</title>
</Helmet> </Helmet>
@ -176,7 +176,7 @@ class CollectionList extends React.Component {
</Overlay> </Overlay>
) )
} }
</div> </article>
); );
} }
} }

8
client/modules/IDE/components/Console.jsx
View file

@ -86,8 +86,8 @@ class Console extends React.Component {
}); });
return ( return (
<div className={consoleClass} role="main"> <section className={consoleClass} >
<div className="preview-console__header"> <header className="preview-console__header">
<h2 className="preview-console__header-title">Console</h2> <h2 className="preview-console__header-title">Console</h2>
<div className="preview-console__header-buttons"> <div className="preview-console__header-buttons">
<button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console"> <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
@ -104,7 +104,7 @@ class Console extends React.Component {
<UpArrowIcon focusable="false" aria-hidden="true" /> <UpArrowIcon focusable="false" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </header>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages"> <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => { {this.props.consoleEvents.map((consoleEvent) => {
const { method, times } = consoleEvent; const { method, times } = consoleEvent;
@ -127,7 +127,7 @@ class Console extends React.Component {
); );
})} })}
</div> </div>
</div> </section>
); );
} }
} }

9
client/modules/IDE/components/Editor.jsx
View file

@ -314,10 +314,7 @@ class Editor extends React.Component {
}); });
return ( return (
<section <section className={editorSectionClass} >
role="main"
className={editorSectionClass}
>
<header className="editor__header"> <header className="editor__header">
<button <button
aria-label="Open Sketch files navigation" aria-label="Open Sketch files navigation"
@ -348,8 +345,8 @@ class Editor extends React.Component {
/> />
</div> </div>
</header> </header>
<div ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} > <article ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</div> </article>
<EditorAccessibility <EditorAccessibility
lintMessages={this.props.lintMessages} lintMessages={this.props.lintMessages}
/> />

8
client/modules/IDE/components/Sidebar.jsx
View file

@ -68,8 +68,8 @@ class Sidebar extends React.Component {
const rootFile = this.props.files.filter(file => file.name === 'root')[0]; const rootFile = this.props.files.filter(file => file.name === 'root')[0];
return ( return (
<nav className={sidebarClass} title="file-navigation" > <section className={sidebarClass}>
<div className="sidebar__header" onContextMenu={this.toggleProjectOptions}> <header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<h3 className="sidebar__title"> <h3 className="sidebar__title">
<span>Sketch Files</span> <span>Sketch Files</span>
</h3> </h3>
@ -130,12 +130,12 @@ class Sidebar extends React.Component {
} }
</ul> </ul>
</div> </div>
</div> </header>
<ConnectedFileNode <ConnectedFileNode
id={rootFile.id} id={rootFile.id}
canEdit={canEditProject} canEdit={canEditProject}
/> />
</nav> </section>
); );
} }
} }

4
client/modules/IDE/components/SketchList.jsx
View file

@ -414,7 +414,7 @@ class SketchList extends React.Component {
render() { render() {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username; const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return ( return (
<div className="sketches-table-container"> <article className="sketches-table-container">
<Helmet> <Helmet>
<title>{this.getSketchesTitle()}</title> <title>{this.getSketchesTitle()}</title>
</Helmet> </Helmet>
@ -457,7 +457,7 @@ class SketchList extends React.Component {
/> />
</Overlay> </Overlay>
} }
</div> </article>
); );
} }
} }

4
client/modules/IDE/pages/FullView.jsx
View file

@ -25,7 +25,7 @@ class FullView extends React.Component {
owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }} owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }} project={{ name: this.props.project.name, id: this.props.params.project_id }}
/> />
<div className="preview-frame-holder"> <main className="preview-frame-holder">
<PreviewFrame <PreviewFrame
htmlFile={this.props.htmlFile} htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles} jsFiles={this.props.jsFiles}
@ -48,7 +48,7 @@ class FullView extends React.Component {
expandConsole={this.ident} expandConsole={this.ident}
clearConsole={this.ident} clearConsole={this.ident}
/> />
</div> </main>
</div> </div>
); );
} }

8
client/modules/IDE/pages/IDEView.jsx
View file

@ -239,7 +239,7 @@ class IDEView extends React.Component {
/> />
</Overlay> </Overlay>
} }
<div className="editor-preview-container"> <main className="editor-preview-container">
<SplitPane <SplitPane
split="vertical" split="vertical"
size={this.state.sidebarSize} size={this.state.sidebarSize}
@ -327,7 +327,7 @@ class IDEView extends React.Component {
theme={this.props.preferences.theme} theme={this.props.preferences.theme}
/> />
</SplitPane> </SplitPane>
<div className="preview-frame-holder"> <section className="preview-frame-holder">
<header className="preview-frame__header"> <header className="preview-frame__header">
<h2 className="preview-frame__title">Preview</h2> <h2 className="preview-frame__title">Preview</h2>
</header> </header>
@ -370,10 +370,10 @@ class IDEView extends React.Component {
cmController={this.cmController} cmController={this.cmController}
/> />
</div> </div>
</div> </section>
</SplitPane> </SplitPane>
</SplitPane> </SplitPane>
</div> </main>
{ this.props.ide.modalIsVisible && { this.props.ide.modalIsVisible &&
<NewFileModal /> <NewFileModal />
} }

14
client/modules/User/components/Collection.jsx
View file

@ -227,7 +227,7 @@ class Collection extends React.Component {
// }; // };
return ( return (
<div className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}> <header className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}>
<div className="collection-metadata__columns"> <div className="collection-metadata__columns">
<div className="collection-metadata__column--left"> <div className="collection-metadata__column--left">
<h2 className="collection-metadata__name"> <h2 className="collection-metadata__name">
@ -270,7 +270,7 @@ class Collection extends React.Component {
} }
</div> </div>
</div> </div>
</div> </header>
); );
} }
@ -344,13 +344,14 @@ class Collection extends React.Component {
const title = this.hasCollection() ? this.getCollectionName() : null; const title = this.hasCollection() ? this.getCollectionName() : null;
return ( return (
<section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}> <main className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<article className="collection">
<Helmet> <Helmet>
<title>{this.getTitle()}</title> <title>{this.getTitle()}</title>
</Helmet> </Helmet>
{this._renderLoader()} {this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()} {this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-content"> <article className="collection-content">
<div className="collection-table-wrapper"> <div className="collection-table-wrapper">
{this._renderEmptyTable()} {this._renderEmptyTable()}
{this.hasCollectionItems() && {this.hasCollectionItems() &&
@ -390,8 +391,9 @@ class Collection extends React.Component {
) )
} }
</div> </div>
</div> </article>
</section> </article>
</main>
); );
} }
} }

4
client/modules/User/pages/AccountView.jsx
View file

@ -46,7 +46,7 @@ class AccountView extends React.Component {
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<section className="account-settings"> <main className="account-settings">
<header className="account-settings__header"> <header className="account-settings__header">
<h1 className="account-settings__title">Account Settings</h1> <h1 className="account-settings__title">Account Settings</h1>
</header> </header>
@ -67,7 +67,7 @@ class AccountView extends React.Component {
</Tabs> </Tabs>
} }
{ !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> } { !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
</section> </main>
</div> </div>
); );
} }

4
client/modules/User/pages/DashboardView.jsx
View file

@ -117,7 +117,7 @@ class DashboardView extends React.Component {
<div className="dashboard"> <div className="dashboard">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<section className="dashboard-header"> <main className="dashboard-header">
<div className="dashboard-header__header"> <div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2> <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
<div className="dashboard-header__nav"> <div className="dashboard-header__nav">
@ -133,7 +133,7 @@ class DashboardView extends React.Component {
<div className="dashboard-content"> <div className="dashboard-content">
{this.renderContent(currentTab, username)} {this.renderContent(currentTab, username)}
</div> </div>
</section> </main>
{this.isCollectionCreate() && {this.isCollectionCreate() &&
<Overlay <Overlay
title="Create collection" title="Create collection"

4
client/modules/User/pages/LoginView.jsx
View file

@ -33,7 +33,7 @@ class LoginView extends React.Component {
return ( return (
<div className="login"> <div className="login">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<div className="form-container"> <main className="form-container">
<Helmet> <Helmet>
<title>p5.js Web Editor | Login</title> <title>p5.js Web Editor | Login</title>
</Helmet> </Helmet>
@ -52,7 +52,7 @@ class LoginView extends React.Component {
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link> <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p> </p>
</div> </div>
</div> </main>
</div> </div>
); );
} }

4
client/modules/User/pages/SignupView.jsx
View file

@ -26,7 +26,7 @@ class SignupView extends React.Component {
return ( return (
<div className="signup"> <div className="signup">
<Nav layout="dashboard" /> <Nav layout="dashboard" />
<div className="form-container"> <main className="form-container">
<Helmet> <Helmet>
<title>p5.js Web Editor | Signup</title> <title>p5.js Web Editor | Signup</title>
</Helmet> </Helmet>
@ -38,7 +38,7 @@ class SignupView extends React.Component {
<Link className="form__login-button" to="/login">Log In</Link> <Link className="form__login-button" to="/login">Log In</Link>
</p> </p>
</div> </div>
</div> </main>
</div> </div>
); );
} }

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

@ -7,6 +7,12 @@
flex-direction:column; flex-direction:column;
} }
.collection {
height: 100%;
display: flex;
flex-direction: column;
}
.collection-metadata { .collection-metadata {
max-width: #{1012 / $base-font-size}rem; max-width: #{1012 / $base-font-size}rem;
width: 100%; width: 100%;