Skip to content

[UEPR-336] Implement Semantic Layout in the Editor #394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kbangelov wants to merge 9 commits into
base: develop
Choose a base branch
from
+160 −79
Open

[UEPR-336] Implement Semantic Layout in the Editor #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
825c232
chore: added role, ariaLabel tags
kbangelov Dec 9, 2025
10919d2
fix: all 3 landmarks fixed
kbangelov Dec 10, 2025
b032c9b
chore: added some more landmarks in editor page
kbangelov Dec 10, 2025
45d5ac7
chore: added roledescription since it won't overwrite role
kbangelov Dec 10, 2025
c077f9e
chore: improved aria-labels and roles
kbangelov Dec 11, 2025
48a10bd
chore: removed unnecessary components wrapping
kbangelov Dec 11, 2025
0a13513
chore: moved prop to match alphabetical order
kbangelov Dec 12, 2025
585924e
chore: improved accessibility
kbangelov Dec 12, 2025
846f837
chore: added tablist as a region
kbangelov Dec 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions packages/scratch-gui/src/components/asset-panel/asset-panel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@ import React from 'react';
import Box from '../box/box.jsx';
import Selector from './selector.jsx';
import styles from './asset-panel.css';
import PropTypes from 'prop-types';

const AssetPanel = props => (
<Box className={styles.wrapper}>
const AssetPanel = props => {
const {ariaLabel, ariaRole, ...restProps} = props;

return (<Box
aria-label={ariaLabel}
role={ariaRole}
className={styles.wrapper}
>
<Selector
className={styles.selector}
{...props}
{...restProps}
/>
<Box className={styles.detailArea}>
{props.children}
</Box>
</Box>
);
</Box>);
};

AssetPanel.propTypes = {
ariaLabel: PropTypes.string,
ariaRole: PropTypes.string,
...Selector.propTypes
};

Expand Down
10 changes: 9 additions & 1 deletion packages/scratch-gui/src/components/backpack/backpack.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ const labelMap = defineMessages({
});

const Backpack = ({
ariaLabel,
ariaRole,
blockDragOver,
containerRef,
contents,
Expand All @@ -57,7 +59,11 @@ const Backpack = ({
}) => {
const intl = useIntl();
return (
<div className={styles.backpackContainer}>
<div
className={styles.backpackContainer}
role={ariaRole}
aria-label={ariaLabel}
>
<div
className={styles.backpackHeader}
onClick={onToggle}
Expand Down Expand Up @@ -156,6 +162,8 @@ const Backpack = ({
};

Backpack.propTypes = {
ariaLabel: PropTypes.string,
ariaRole: PropTypes.string,
blockDragOver: PropTypes.bool,
containerRef: PropTypes.func,
contents: PropTypes.arrayOf(PropTypes.shape({
Expand Down
1 change: 0 additions & 1 deletion packages/scratch-gui/src/components/gui/gui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
b) for combined stage menu + stage + sprite/stage selectors
*/
flex-direction: row;
height: 100%;
Copy link
Contributor

@KManolov3 KManolov3 Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine this was no longer needed because of the body-wrapper css class?

Copy link
Contributor Author

@kbangelov kbangelov Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that class being on the inside used to say "make up 100% of the body wrapper height"


/*
Stop scrollbar popping in and out from scratch-blocks border issue
Expand Down
179 changes: 108 additions & 71 deletions packages/scratch-gui/src/components/gui/gui.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,8 @@ const GUIComponent = props => {
/>
) : null}
{!menuBarHidden && <MenuBar
ariaRole="banner"
ariaLabel="Menu topbar"
accountNavOpen={accountNavOpen}
authorId={authorId}
authorThumbnailUrl={authorThumbnailUrl}
Expand Down Expand Up @@ -288,27 +290,34 @@ const GUIComponent = props => {
username={username}
accountMenuOptions={accountMenuOptions}
/>}
<Box className={boxStyles}>
<Box className={styles.flexWrapper}>
<Box className={styles.editorWrapper}>
<Tabs
forceRenderTabPanel
className={tabClassNames.tabs}
selectedIndex={activeTabIndex}
selectedTabClassName={tabClassNames.tabSelected}
selectedTabPanelClassName={tabClassNames.tabPanelSelected}
onSelect={onActivateTab}
<Box className={classNames(boxStyles, styles.flexWrapper)}>
<Box
role="main"
aria-label="Editor"
className={styles.editorWrapper}
>
<Tabs
forceRenderTabPanel
className={tabClassNames.tabs}
selectedIndex={activeTabIndex}
selectedTabClassName={tabClassNames.tabSelected}
selectedTabPanelClassName={tabClassNames.tabPanelSelected}
onSelect={onActivateTab}

// TODO: focusTabOnClick should be true for accessibility, but currently conflicts
// with nudge operations in the paint editor. We'll likely need to manage focus
// differently within the paint editor before we can turn this back on.
// Repro steps:
// 1. Click the Costumes tab
// 2. Select something in the paint editor (say, the cat's face)
// 3. Press the left or right arrow key
// Desired behavior: the face should nudge left or right
// Actual behavior: the Code or Sounds tab is now focused
focusTabOnClick={false}
// TODO: focusTabOnClick should be true for accessibility, but currently conflicts
// with nudge operations in the paint editor. We'll likely need to manage focus
// differently within the paint editor before we can turn this back on.
// Repro steps:
// 1. Click the Costumes tab
// 2. Select something in the paint editor (say, the cat's face)
// 3. Press the left or right arrow key
// Desired behavior: the face should nudge left or right
// Actual behavior: the Code or Sounds tab is now focused
focusTabOnClick={false}
>
<Box
role="region"
aria-label="Tab List"
>
<TabList className={tabClassNames.tabList}>
<Tab className={tabClassNames.tab}>
Expand Down Expand Up @@ -359,66 +368,94 @@ const GUIComponent = props => {
/>
</Tab>
</TabList>
<TabPanel className={tabClassNames.tabPanel}>
<Box className={styles.blocksWrapper}>
<Blocks
key={`${blocksId}/${theme}`}
canUseCloud={canUseCloud}
grow={1}
isVisible={blocksTabVisible}
options={{
media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
}}
stageSize={stageSize}
theme={theme}
vm={vm}
showNewFeatureCallouts={showNewFeatureCallouts}
username={username}
/>
</Box>
<ExtensionsButton
activeTabIndex={activeTabIndex}
intl={intl}
</Box>
<TabPanel
className={tabClassNames.tabPanel}
aria-label="Code Editor Panel"
>
<Box
className={styles.blocksWrapper}
role="region"
aria-label="Code Editor Panel"
>
<Blocks
key={`${blocksId}/${theme}`}
canUseCloud={canUseCloud}
grow={1}
isVisible={blocksTabVisible}
options={{
media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
}}
stageSize={stageSize}
theme={theme}
vm={vm}
showNewFeatureCallouts={showNewFeatureCallouts}
onExtensionButtonClick={onExtensionButtonClick}
username={username}
/>
<Box className={styles.watermark}>
<Watermark />
</Box>
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
{costumesTabVisible ? <CostumeTab
</Box>
<ExtensionsButton
activeTabIndex={activeTabIndex}
intl={intl}
showNewFeatureCallouts={showNewFeatureCallouts}
onExtensionButtonClick={onExtensionButtonClick}
username={username}
/>
<Box className={styles.watermark}>
<Watermark />
</Box>
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
{costumesTabVisible ? <CostumeTab
ariaLabel={targetIsStage ? 'Backdrops Editor Panel' : 'Costumes Editor Panel'}
ariaRole="region"
vm={vm}
onNewLibraryBackdropClick={onNewLibraryBackdropClick}
onNewLibraryCostumeClick={onNewLibraryCostumeClick}
/> : null}
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
{soundsTabVisible ?
<SoundTab
ariaLabel="Sounds Editor Panel"
ariaRole="region"
vm={vm}
onNewLibraryBackdropClick={onNewLibraryBackdropClick}
onNewLibraryCostumeClick={onNewLibraryCostumeClick}
/> : null}
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
{soundsTabVisible ? <SoundTab vm={vm} /> : null}
</TabPanel>
</Tabs>
{backpackVisible ? (
<Backpack host={backpackHost} />
) : null}
</Box>
</TabPanel>
</Tabs>
{backpackVisible ? (
<Backpack
host={backpackHost}
ariaRole="region"
ariaLabel="Backpack"
/>
) : null}
</Box>

<Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
<StageWrapper
isFullScreen={isFullScreen}
isRendererSupported={isRendererSupported}
isRtl={isRtl}
<Box
role="complementary"
aria-label="Stage and Target"
className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}
>
<StageWrapper
isFullScreen={isFullScreen}
isRendererSupported={isRendererSupported}
isRtl={isRtl}
stageSize={stageSize}
vm={vm}
ariaRole="region"
ariaLabel="Stage"
/>
<Box
className={styles.targetWrapper}
role="region"
aria-label="Target Pane"
>
<TargetPane
stageSize={stageSize}
vm={vm}
onNewSpriteClick={onNewSpriteClick}
onNewBackdropClick={onNewLibraryBackdropClick}
/>
<Box className={styles.targetWrapper}>
<TargetPane
stageSize={stageSize}
vm={vm}
onNewSpriteClick={onNewSpriteClick}
onNewBackdropClick={onNewLibraryBackdropClick}
/>
</Box>
</Box>
</Box>
</Box>
Expand Down
4 changes: 4 additions & 0 deletions packages/scratch-gui/src/components/menu-bar/menu-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,8 @@ class MenuBar extends React.Component {
this.props.className,
styles.menuBar
)}
aria-label={this.props.ariaLabel}
role={this.props.ariaRole}
>
<div className={styles.mainMenu}>
<div className={styles.fileGroup}>
Expand Down Expand Up @@ -896,6 +898,8 @@ class MenuBar extends React.Component {
MenuBar.propTypes = {
aboutMenuOpen: PropTypes.bool,
accountMenuOpen: PropTypes.bool,
ariaLabel: PropTypes.string,
ariaRole: PropTypes.string,
authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
authorThumbnailUrl: PropTypes.string,
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
Expand Down
6 changes: 6 additions & 0 deletions packages/scratch-gui/src/components/stage-wrapper/stage-wrapper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import styles from './stage-wrapper.css';

const StageWrapperComponent = function (props) {
const {
ariaLabel,
ariaRole,
isFullScreen,
isRtl,
isRendererSupported,
Expand All @@ -30,6 +32,8 @@ const StageWrapperComponent = function (props) {
{[styles.fullScreen]: isFullScreen}
)}
dir={isRtl ? 'rtl' : 'ltr'}
role={ariaRole}
aria-label={ariaLabel}
>
<Box className={styles.stageMenuWrapper}>
<StageHeader
Expand Down Expand Up @@ -57,6 +61,8 @@ const StageWrapperComponent = function (props) {
};

StageWrapperComponent.propTypes = {
ariaLabel: PropTypes.string,
ariaRole: PropTypes.string,
isFullScreen: PropTypes.bool,
isRendererSupported: PropTypes.bool.isRequired,
isRtl: PropTypes.bool.isRequired,
Expand Down
6 changes: 5 additions & 1 deletion packages/scratch-gui/src/containers/backpack.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,8 @@ class Backpack extends React.Component {
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onToggle={this.props.host ? this.handleToggle : null}
ariaRole={this.props.ariaRole}
ariaLabel={this.props.ariaLabel}
/>
);
}
Expand All @@ -233,7 +235,9 @@ Backpack.propTypes = {
host: PropTypes.string,
token: PropTypes.string,
username: PropTypes.string,
vm: PropTypes.instanceOf(VM)
vm: PropTypes.instanceOf(VM),
ariaRole: PropTypes.string,
ariaLabel: PropTypes.string
};

const getTokenAndUsername = state => {
Expand Down
6 changes: 6 additions & 0 deletions packages/scratch-gui/src/containers/costume-tab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,8 @@ class CostumeTab extends React.Component {
}
render () {
const {
ariaLabel,
ariaRole,
dispatchUpdateRestore,
intl,
isRtl,
Expand Down Expand Up @@ -287,6 +289,8 @@ class CostumeTab extends React.Component {
})) : [];
return (
<AssetPanel
ariaLabel={ariaLabel}
ariaRole={ariaRole}
buttons={[
{
title: intl.formatMessage(addLibraryMessage),
Expand Down Expand Up @@ -341,6 +345,8 @@ class CostumeTab extends React.Component {
}

CostumeTab.propTypes = {
ariaLabel: PropTypes.string,
ariaRole: PropTypes.string,
dispatchUpdateRestore: PropTypes.func,
editingTarget: PropTypes.string,
intl: intlShape,
Expand Down
Loading
Loading