Skip to content

Commit 929896f

Browse files
KManolov3KManolov3
authored
Merge pull request #394 from kbangelov/task/uepr-336-implement-semantic-layout-in-the-editor
[UEPR-336] Implement Semantic Layout in the Editor
2 parents 83f2cb6 + ccdc282 commit 929896f

File tree

10 files changed

+157
-79
lines changed

10 files changed

+157
-79
lines changed

‎packages/scratch-gui/src/components/asset-panel/asset-panel.jsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,29 @@ import React from 'react';
33
import Box from '../box/box.jsx';
44
import Selector from './selector.jsx';
55
import styles from './asset-panel.css';
6+
import PropTypes from 'prop-types';
67

7-
const AssetPanel = props => (
8-
<Box className={styles.wrapper}>
8+
const AssetPanel = props => {
9+
const {ariaLabel, ariaRole, ...restProps} = props;
10+
11+
return (<Box
12+
aria-label={ariaLabel}
13+
role={ariaRole}
14+
className={styles.wrapper}
15+
>
916
<Selector
1017
className={styles.selector}
11-
{...props}
18+
{...restProps}
1219
/>
1320
<Box className={styles.detailArea}>
1421
{props.children}
1522
</Box>
16-
</Box>
17-
);
23+
</Box>);
24+
};
1825

1926
AssetPanel.propTypes = {
27+
ariaLabel: PropTypes.string,
28+
ariaRole: PropTypes.string,
2029
...Selector.propTypes
2130
};
2231

‎packages/scratch-gui/src/components/backpack/backpack.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ const labelMap = defineMessages({
4141
});
4242

4343
const Backpack = ({
44+
ariaLabel,
45+
ariaRole,
4446
blockDragOver,
4547
containerRef,
4648
contents,
@@ -57,7 +59,11 @@ const Backpack = ({
5759
}) => {
5860
const intl = useIntl();
5961
return (
60-
<div className={styles.backpackContainer}>
62+
<div
63+
className={styles.backpackContainer}
64+
role={ariaRole}
65+
aria-label={ariaLabel}
66+
>
6167
<div
6268
className={styles.backpackHeader}
6369
onClick={onToggle}
@@ -156,6 +162,8 @@ const Backpack = ({
156162
};
157163

158164
Backpack.propTypes = {
165+
ariaLabel: PropTypes.string,
166+
ariaRole: PropTypes.string,
159167
blockDragOver: PropTypes.bool,
160168
containerRef: PropTypes.func,
161169
contents: PropTypes.arrayOf(PropTypes.shape({

‎packages/scratch-gui/src/components/gui/gui.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
b) for combined stage menu + stage + sprite/stage selectors
2929
*/
3030
flex-direction: row;
31-
height: 100%;
3231

3332
/*
3433
Stop scrollbar popping in and out from scratch-blocks border issue

‎packages/scratch-gui/src/components/gui/gui.jsx‎

Lines changed: 105 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,8 @@ const GUIComponent = props => {
253253
/>
254254
) : null}
255255
{!menuBarHidden && <MenuBar
256+
ariaRole="banner"
257+
ariaLabel="Menu topbar"
256258
accountNavOpen={accountNavOpen}
257259
authorId={authorId}
258260
authorThumbnailUrl={authorThumbnailUrl}
@@ -288,27 +290,34 @@ const GUIComponent = props => {
288290
username={username}
289291
accountMenuOptions={accountMenuOptions}
290292
/>}
291-
<Box className={boxStyles}>
292-
<Box className={styles.flexWrapper}>
293-
<Box className={styles.editorWrapper}>
294-
<Tabs
295-
forceRenderTabPanel
296-
className={tabClassNames.tabs}
297-
selectedIndex={activeTabIndex}
298-
selectedTabClassName={tabClassNames.tabSelected}
299-
selectedTabPanelClassName={tabClassNames.tabPanelSelected}
300-
onSelect={onActivateTab}
293+
<Box className={classNames(boxStyles, styles.flexWrapper)}>
294+
<Box
295+
role="main"
296+
aria-label="Editor"
297+
className={styles.editorWrapper}
298+
>
299+
<Tabs
300+
forceRenderTabPanel
301+
className={tabClassNames.tabs}
302+
selectedIndex={activeTabIndex}
303+
selectedTabClassName={tabClassNames.tabSelected}
304+
selectedTabPanelClassName={tabClassNames.tabPanelSelected}
305+
onSelect={onActivateTab}
301306

302-
// TODO: focusTabOnClick should be true for accessibility, but currently conflicts
303-
// with nudge operations in the paint editor. We'll likely need to manage focus
304-
// differently within the paint editor before we can turn this back on.
305-
// Repro steps:
306-
// 1. Click the Costumes tab
307-
// 2. Select something in the paint editor (say, the cat's face)
308-
// 3. Press the left or right arrow key
309-
// Desired behavior: the face should nudge left or right
310-
// Actual behavior: the Code or Sounds tab is now focused
311-
focusTabOnClick={false}
307+
// TODO: focusTabOnClick should be true for accessibility, but currently conflicts
308+
// with nudge operations in the paint editor. We'll likely need to manage focus
309+
// differently within the paint editor before we can turn this back on.
310+
// Repro steps:
311+
// 1. Click the Costumes tab
312+
// 2. Select something in the paint editor (say, the cat's face)
313+
// 3. Press the left or right arrow key
314+
// Desired behavior: the face should nudge left or right
315+
// Actual behavior: the Code or Sounds tab is now focused
316+
focusTabOnClick={false}
317+
>
318+
<Box
319+
role="region"
320+
aria-label="Tab List"
312321
>
313322
<TabList className={tabClassNames.tabList}>
314323
<Tab className={tabClassNames.tab}>
@@ -359,66 +368,91 @@ const GUIComponent = props => {
359368
/>
360369
</Tab>
361370
</TabList>
362-
<TabPanel className={tabClassNames.tabPanel}>
363-
<Box className={styles.blocksWrapper}>
364-
<Blocks
365-
key={`${blocksId}/${theme}`}
366-
canUseCloud={canUseCloud}
367-
grow={1}
368-
isVisible={blocksTabVisible}
369-
options={{
370-
media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
371-
}}
372-
stageSize={stageSize}
373-
theme={theme}
374-
vm={vm}
375-
showNewFeatureCallouts={showNewFeatureCallouts}
376-
username={username}
377-
/>
378-
</Box>
379-
<ExtensionsButton
380-
activeTabIndex={activeTabIndex}
381-
intl={intl}
371+
</Box>
372+
<TabPanel className={tabClassNames.tabPanel}>
373+
<Box
374+
className={styles.blocksWrapper}
375+
role="region"
376+
aria-label="Code Editor Panel"
377+
>
378+
<Blocks
379+
key={`${blocksId}/${theme}`}
380+
canUseCloud={canUseCloud}
381+
grow={1}
382+
isVisible={blocksTabVisible}
383+
options={{
384+
media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
385+
}}
386+
stageSize={stageSize}
387+
theme={theme}
388+
vm={vm}
382389
showNewFeatureCallouts={showNewFeatureCallouts}
383-
onExtensionButtonClick={onExtensionButtonClick}
384390
username={username}
385391
/>
386-
<Box className={styles.watermark}>
387-
<Watermark />
388-
</Box>
389-
</TabPanel>
390-
<TabPanel className={tabClassNames.tabPanel}>
391-
{costumesTabVisible ? <CostumeTab
392+
</Box>
393+
<ExtensionsButton
394+
activeTabIndex={activeTabIndex}
395+
intl={intl}
396+
showNewFeatureCallouts={showNewFeatureCallouts}
397+
onExtensionButtonClick={onExtensionButtonClick}
398+
username={username}
399+
/>
400+
<Box className={styles.watermark}>
401+
<Watermark />
402+
</Box>
403+
</TabPanel>
404+
<TabPanel className={tabClassNames.tabPanel}>
405+
{costumesTabVisible ? <CostumeTab
406+
ariaLabel={targetIsStage ? 'Backdrops Editor Panel' : 'Costumes Editor Panel'}
407+
ariaRole="region"
408+
vm={vm}
409+
onNewLibraryBackdropClick={onNewLibraryBackdropClick}
410+
onNewLibraryCostumeClick={onNewLibraryCostumeClick}
411+
/> : null}
412+
</TabPanel>
413+
<TabPanel className={tabClassNames.tabPanel}>
414+
{soundsTabVisible ?
415+
<SoundTab
416+
ariaLabel="Sounds Editor Panel"
417+
ariaRole="region"
392418
vm={vm}
393-
onNewLibraryBackdropClick={onNewLibraryBackdropClick}
394-
onNewLibraryCostumeClick={onNewLibraryCostumeClick}
395419
/> : null}
396-
</TabPanel>
397-
<TabPanel className={tabClassNames.tabPanel}>
398-
{soundsTabVisible ? <SoundTab vm={vm} /> : null}
399-
</TabPanel>
400-
</Tabs>
401-
{backpackVisible ? (
402-
<Backpack host={backpackHost} />
403-
) : null}
404-
</Box>
420+
</TabPanel>
421+
</Tabs>
422+
{backpackVisible ? (
423+
<Backpack
424+
host={backpackHost}
425+
ariaRole="region"
426+
ariaLabel="Backpack"
427+
/>
428+
) : null}
429+
</Box>
405430

406-
<Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
407-
<StageWrapper
408-
isFullScreen={isFullScreen}
409-
isRendererSupported={isRendererSupported}
410-
isRtl={isRtl}
431+
<Box
432+
role="complementary"
433+
aria-label="Stage and Target"
434+
className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}
435+
>
436+
<StageWrapper
437+
isFullScreen={isFullScreen}
438+
isRendererSupported={isRendererSupported}
439+
isRtl={isRtl}
440+
stageSize={stageSize}
441+
vm={vm}
442+
ariaRole="region"
443+
ariaLabel="Stage"
444+
/>
445+
<Box
446+
className={styles.targetWrapper}
447+
role="region"
448+
aria-label="Target Pane"
449+
>
450+
<TargetPane
411451
stageSize={stageSize}
412452
vm={vm}
453+
onNewSpriteClick={onNewSpriteClick}
454+
onNewBackdropClick={onNewLibraryBackdropClick}
413455
/>
414-
<Box className={styles.targetWrapper}>
415-
<TargetPane
416-
stageSize={stageSize}
417-
vm={vm}
418-
onNewSpriteClick={onNewSpriteClick}
419-
onNewBackdropClick={onNewLibraryBackdropClick}
420-
/>
421-
</Box>
422456
</Box>
423457
</Box>
424458
</Box>

‎packages/scratch-gui/src/components/menu-bar/menu-bar.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -437,6 +437,8 @@ class MenuBar extends React.Component {
437437
this.props.className,
438438
styles.menuBar
439439
)}
440+
aria-label={this.props.ariaLabel}
441+
role={this.props.ariaRole}
440442
>
441443
<div className={styles.mainMenu}>
442444
<div className={styles.fileGroup}>
@@ -896,6 +898,8 @@ class MenuBar extends React.Component {
896898
MenuBar.propTypes = {
897899
aboutMenuOpen: PropTypes.bool,
898900
accountMenuOpen: PropTypes.bool,
901+
ariaLabel: PropTypes.string,
902+
ariaRole: PropTypes.string,
899903
authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
900904
authorThumbnailUrl: PropTypes.string,
901905
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

‎packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import styles from './stage-wrapper.css';
1313

1414
const StageWrapperComponent = function (props) {
1515
const {
16+
ariaLabel,
17+
ariaRole,
1618
isFullScreen,
1719
isRtl,
1820
isRendererSupported,
@@ -30,6 +32,8 @@ const StageWrapperComponent = function (props) {
3032
{[styles.fullScreen]: isFullScreen}
3133
)}
3234
dir={isRtl ? 'rtl' : 'ltr'}
35+
role={ariaRole}
36+
aria-label={ariaLabel}
3337
>
3438
<Box className={styles.stageMenuWrapper}>
3539
<StageHeader
@@ -57,6 +61,8 @@ const StageWrapperComponent = function (props) {
5761
};
5862

5963
StageWrapperComponent.propTypes = {
64+
ariaLabel: PropTypes.string,
65+
ariaRole: PropTypes.string,
6066
isFullScreen: PropTypes.bool,
6167
isRendererSupported: PropTypes.bool.isRequired,
6268
isRtl: PropTypes.bool.isRequired,

‎packages/scratch-gui/src/containers/backpack.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,8 @@ class Backpack extends React.Component {
223223
onMouseEnter={this.handleMouseEnter}
224224
onMouseLeave={this.handleMouseLeave}
225225
onToggle={this.props.host ? this.handleToggle : null}
226+
ariaRole={this.props.ariaRole}
227+
ariaLabel={this.props.ariaLabel}
226228
/>
227229
);
228230
}
@@ -233,7 +235,9 @@ Backpack.propTypes = {
233235
host: PropTypes.string,
234236
token: PropTypes.string,
235237
username: PropTypes.string,
236-
vm: PropTypes.instanceOf(VM)
238+
vm: PropTypes.instanceOf(VM),
239+
ariaRole: PropTypes.string,
240+
ariaLabel: PropTypes.string
237241
};
238242

239243
const getTokenAndUsername = state => {

‎packages/scratch-gui/src/containers/costume-tab.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,8 @@ class CostumeTab extends React.Component {
260260
}
261261
render () {
262262
const {
263+
ariaLabel,
264+
ariaRole,
263265
dispatchUpdateRestore,
264266
intl,
265267
isRtl,
@@ -287,6 +289,8 @@ class CostumeTab extends React.Component {
287289
})) : [];
288290
return (
289291
<AssetPanel
292+
ariaLabel={ariaLabel}
293+
ariaRole={ariaRole}
290294
buttons={[
291295
{
292296
title: intl.formatMessage(addLibraryMessage),
@@ -341,6 +345,8 @@ class CostumeTab extends React.Component {
341345
}
342346

343347
CostumeTab.propTypes = {
348+
ariaLabel: PropTypes.string,
349+
ariaRole: PropTypes.string,
344350
dispatchUpdateRestore: PropTypes.func,
345351
editingTarget: PropTypes.string,
346352
intl: intlShape,

‎packages/scratch-gui/src/containers/sound-tab.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,8 @@ class SoundTab extends React.Component {
174174

175175
render () {
176176
const {
177+
ariaLabel,
178+
ariaRole,
177179
dispatchUpdateRestore,
178180
intl,
179181
isRtl,
@@ -222,6 +224,8 @@ class SoundTab extends React.Component {
222224

223225
return (
224226
<AssetPanel
227+
ariaLabel={ariaLabel}
228+
ariaRole={ariaRole}
225229
buttons={[{
226230
title: intl.formatMessage(messages.addSound),
227231
img: addSoundFromLibraryIcon,
@@ -278,6 +282,8 @@ class SoundTab extends React.Component {
278282
}
279283

280284
SoundTab.propTypes = {
285+
ariaLabel: PropTypes.string,
286+
ariaRole: PropTypes.string,
281287
dispatchUpdateRestore: PropTypes.func,
282288
editingTarget: PropTypes.string,
283289
intl: intlShape,

0 commit comments

Comments
 (0)