Merge pull request #1430 from processing/semantic-elements
Add <main> to all pages, add semantic HTML updates
This commit is contained in:
commit
ec16905ff0
16 changed files with 403 additions and 405 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Nav renders correctly 1`] = `
|
exports[`Nav renders correctly 1`] = `
|
||||||
<nav
|
<header>
|
||||||
|
<nav
|
||||||
className="nav"
|
className="nav"
|
||||||
title="main-navigation"
|
title="main-navigation"
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
className="nav__items-left"
|
className="nav__items-left"
|
||||||
>
|
>
|
||||||
|
@ -340,5 +341,6 @@ exports[`Nav renders correctly 1`] = `
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 />
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
Loading…
Reference in a new issue