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 

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
parent 2308d06f74 a0cb035dd4
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

21
client/components/Nav.jsx
View File

@ -682,21 +682,12 @@ class Nav extends React.PureComponent {
};
return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderLeftLayout(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>
<header>
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderLeftLayout(navDropdownState)}
{this.renderUserMenu(navDropdownState)}
</nav>
</header>
);
}
}

614
client/components/__test__/__snapshots__/Nav.test.jsx.snap
View File

@ -1,344 +1,346 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav renders correctly 1`] = `
<nav
className="nav"
title="main-navigation"
>
<ul
className="nav__items-left"
<header>
<nav
className="nav"
title="main-navigation"
>
<li
className="nav__item-logo"
<ul
className="nav__items-left"
>
<test-file-stub
aria-label="p5.js Logo"
className="svg__logo"
focusable="false"
role="img"
/>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
<li
className="nav__item-logo"
>
<span
className="nav__item-header"
>
File
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
aria-label="p5.js Logo"
className="svg__logo"
focusable="false"
role="img"
/>
</button>
<ul
className="nav__dropdown"
</li>
<li
className="nav__item"
>
<li
className="nav__dropdown-item"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
<span
className="nav__item-header"
>
New
</button>
</li>
<li
className="nav__dropdown-item"
File
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
<li
className="nav__dropdown-item"
>
Duplicate
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Share
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Download
</button>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Open
</a>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
<span
className="nav__item-header"
>
Edit
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Tidy Code
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⇧
+Tab
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
New
</button>
</li>
<li
className="nav__dropdown-item"
>
Find
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⌃
+F
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Duplicate
</button>
</li>
<li
className="nav__dropdown-item"
>
Find Next
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⌃
+G
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Share
</button>
</li>
<li
className="nav__dropdown-item"
>
Find Previous
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⇧
+
⌃
+G
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
Download
</button>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Open
</a>
</li>
</ul>
</li>
<li
className="nav__item"
>
<span
className="nav__item-header"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
Sketch
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
<span
className="nav__item-header"
>
Add File
</button>
</li>
<li
className="nav__dropdown-item"
Edit
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
<li
className="nav__dropdown-item"
>
Add Folder
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Run
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⌃
+Enter
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Tidy Code
<span
className="nav__keyboard-shortcut"
>
⇧
+Tab
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
Stop
<span
className="nav__keyboard-shortcut"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
⇧
+
⌃
+Enter
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
Find
<span
className="nav__keyboard-shortcut"
>
⌃
+F
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find Next
<span
className="nav__keyboard-shortcut"
>
⌃
+G
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find Previous
<span
className="nav__keyboard-shortcut"
>
⇧
+
⌃
+G
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<span
className="nav__item-header"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
Help
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
<span
className="nav__item-header"
>
Sketch
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add File
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add Folder
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Run
<span
className="nav__keyboard-shortcut"
>
⌃
+Enter
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Stop
<span
className="nav__keyboard-shortcut"
>
⇧
+
⌃
+Enter
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<li
className="nav__dropdown-item"
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOver={[Function]}
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
<span
className="nav__item-header"
>
Keyboard Shortcuts
</button>
</li>
<li
className="nav__dropdown-item"
Help
</span>
<test-file-stub
aria-hidden="true"
className="nav__item-header-triangle"
focusable="false"
/>
</button>
<ul
className="nav__dropdown"
>
<a
href="https://p5js.org/reference/"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
rel="noopener noreferrer"
target="_blank"
<li
className="nav__dropdown-item"
>
Reference
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Keyboard Shortcuts
</button>
</li>
<li
className="nav__dropdown-item"
>
About
</a>
</li>
</ul>
</li>
</ul>
</nav>
<a
href="https://p5js.org/reference/"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
rel="noopener noreferrer"
target="_blank"
>
Reference
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
About
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
`;

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

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

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

@ -86,8 +86,8 @@ class Console extends React.Component {
});
return (
<div className={consoleClass} role="main">
<div className="preview-console__header">
<section className={consoleClass} >
<header className="preview-console__header">
<h2 className="preview-console__header-title">Console</h2>
<div className="preview-console__header-buttons">
<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" />
</button>
</div>
</div>
</header>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => {
const { method, times } = consoleEvent;
@ -127,7 +127,7 @@ class Console extends React.Component {
);
})}
</div>
</div>
</section>
);
}
}

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

@ -314,10 +314,7 @@ class Editor extends React.Component {
});
return (
<section
role="main"
className={editorSectionClass}
>
<section className={editorSectionClass} >
<header className="editor__header">
<button
aria-label="Open Sketch files navigation"
@ -348,8 +345,8 @@ class Editor extends React.Component {
/>
</div>
</header>
<div ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</div>
<article ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
</article>
<EditorAccessibility
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];
return (
<nav className={sidebarClass} title="file-navigation" >
<div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<section className={sidebarClass}>
<header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<h3 className="sidebar__title">
<span>Sketch Files</span>
</h3>
@ -130,12 +130,12 @@ class Sidebar extends React.Component {
}
</ul>
</div>
</div>
</header>
<ConnectedFileNode
id={rootFile.id}
canEdit={canEditProject}
/>
</nav>
</section>
);
}
}

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

@ -414,7 +414,7 @@ class SketchList extends React.Component {
render() {
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
return (
<div className="sketches-table-container">
<article className="sketches-table-container">
<Helmet>
<title>{this.getSketchesTitle()}</title>
</Helmet>
@ -457,7 +457,7 @@ class SketchList extends React.Component {
/>
</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}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }}
/>
<div className="preview-frame-holder">
<main className="preview-frame-holder">
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
@ -48,7 +48,7 @@ class FullView extends React.Component {
expandConsole={this.ident}
clearConsole={this.ident}
/>
</div>
</main>
</div>
);
}

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

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

102
client/modules/User/components/Collection.jsx
View File

@ -227,7 +227,7 @@ class Collection extends React.Component {
// };
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__column--left">
<h2 className="collection-metadata__name">
@ -270,7 +270,7 @@ class Collection extends React.Component {
}
</div>
</div>
</div>
</header>
);
}
@ -344,54 +344,56 @@ class Collection extends React.Component {
const title = this.hasCollection() ? this.getCollectionName() : null;
return (
<section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
{this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-content">
<div className="collection-table-wrapper">
{this._renderEmptyTable()}
{this.hasCollectionItems() &&
<table className="sketches-table" summary="table containing all collections">
<thead>
<tr>
{this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('createdAt', 'Date Added')}
{this._renderFieldHeader('user', 'Owner')}
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.props.collection.items.map(item =>
(<CollectionItemRow
key={item.id}
item={item}
user={this.props.user}
username={this.getUsername()}
collection={this.props.collection}
/>))}
</tbody>
</table>
}
{
this.state.isAddingSketches && (
<Overlay
title="Add sketch"
actions={<SketchSearchbar />}
closeOverlay={this.hideAddSketches}
isFixedHeight
>
<div className="collection-add-sketch">
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</div>
</Overlay>
)
}
</div>
</div>
</section>
<main className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
<article className="collection">
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
{this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()}
<article className="collection-content">
<div className="collection-table-wrapper">
{this._renderEmptyTable()}
{this.hasCollectionItems() &&
<table className="sketches-table" summary="table containing all collections">
<thead>
<tr>
{this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('createdAt', 'Date Added')}
{this._renderFieldHeader('user', 'Owner')}
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.props.collection.items.map(item =>
(<CollectionItemRow
key={item.id}
item={item}
user={this.props.user}
username={this.getUsername()}
collection={this.props.collection}
/>))}
</tbody>
</table>
}
{
this.state.isAddingSketches && (
<Overlay
title="Add sketch"
actions={<SketchSearchbar />}
closeOverlay={this.hideAddSketches}
isFixedHeight
>
<div className="collection-add-sketch">
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</div>
</Overlay>
)
}
</div>
</article>
</article>
</main>
);
}
}

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

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

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

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

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

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

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

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

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

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