From dd781e00469ab81373a3d36b769e76886233bc6e Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>
Date: Wed, 10 Apr 2024 13:36:41 -0700
Subject: [PATCH] Accessibility insights fixes (#9955)

* add aria-label to editor toggle, change the dropdown language selector to an option role rather than menuitem

* add role=menuitem to organization logo

* give editor selector div the role menuitem

* cloud sync status component is only visual. do not include an aria label on sui items that do not have a role or has a nullish role

* remove button role from outer div for projects header

* remove menu role from projectnamearea, give explicit role of button to save project button

* change other toolbar menus to menubars

* fixed capitalization on editortoggle aria label
---
 webapp/src/container.tsx     | 4 ++--
 webapp/src/editortoolbar.tsx | 8 ++++----
 webapp/src/headerbar.tsx     | 4 ++--
 webapp/src/identity.tsx      | 4 ++--
 webapp/src/projects.tsx      | 2 +-
 webapp/src/sui.tsx           | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 0d57cff4bf0a..f4a2a216e180 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -525,12 +525,12 @@ export class EditorSelector extends data.Component<IEditorSelectorProps, {}> {
         }
 
         return (
-            <div id="editortoggle" className={`ui grid padded ${(pyOnly || tsOnly) ? "one-language" : ""}`} role="listbox" aria-orientation="horizontal">
+            <div id="editortoggle" className={`ui grid padded ${(pyOnly || tsOnly) ? "one-language" : ""}`} role="listbox" aria-orientation="horizontal" aria-label={lf("Editor toggle")}>
                 {showSandbox && <SandboxMenuItem parent={parent} />}
                 {showBlocks && <BlocksMenuItem parent={parent} />}
                 {textLanguage}
                 {secondTextLanguage}
-                {showDropdown && <sui.DropdownMenu id="editordropdown" role="menuitem" icon="chevron down" rightIcon title={lf("Select code editor language")} className={`item button attached right ${dropdownActive ? "active" : ""}`}>
+                {showDropdown && <sui.DropdownMenu id="editordropdown" role="option" icon="chevron down" rightIcon title={lf("Select code editor language")} className={`item button attached right ${dropdownActive ? "active" : ""}`}>
                     <JavascriptMenuItem parent={parent} />
                     <PythonMenuItem parent={parent} />
                 </sui.DropdownMenu>}
diff --git a/webapp/src/editortoolbar.tsx b/webapp/src/editortoolbar.tsx
index bd654a948dcd..c713797d7a58 100644
--- a/webapp/src/editortoolbar.tsx
+++ b/webapp/src/editortoolbar.tsx
@@ -153,7 +153,7 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
             readOnly={projectNameReadOnly}
         />)
         if (showSave) {
-            saveInput.push(<EditorToolbarButton icon='save' className={`right attached editortools-btn save-editortools-btn ${saveButtonClasses}`} title={lf("Save")} ariaLabel={lf("Save the project")} onButtonClick={this.saveFile} view={this.getViewString(View.Computer)} key={`save${View.Computer}`} />)
+            saveInput.push(<EditorToolbarButton role="button" icon='save' className={`right attached editortools-btn save-editortools-btn ${saveButtonClasses}`} title={lf("Save")} ariaLabel={lf("Save the project")} onButtonClick={this.saveFile} view={this.getViewString(View.Computer)} key={`save${View.Computer}`} />)
         }
 
         return saveInput;
@@ -416,7 +416,7 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
         }
 
         return <div id="editortools" className="ui" role="region" aria-label={lf("Editor toolbar")}>
-            <div id="downloadArea" role="menu" className="ui column items">{headless &&
+            <div id="downloadArea" role="menubar" className="ui column items">{headless &&
                 <div className="ui item">
                     <div className="ui icon large buttons">
                         {compileBtn && <EditorToolbarButton icon={downloadIcon} className={`primary large download-button mobile tablet hide ${downloadButtonClasses}`} title={compileTooltip} onButtonClick={this.compile} view='computer' />}
@@ -431,14 +431,14 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
                 </div>}
             </div>
             {(showProjectRename || showGithub || identity.CloudSaveStatus.wouldRender(header.id)) &&
-                <div id="projectNameArea" role="menu" className="ui column items">
+                <div id="projectNameArea" className="ui column items">
                     <div className={`ui right ${showSave ? "labeled" : ""} input projectname-input projectname-computer`}>
                         {showProjectRename && this.getSaveInput(showSave, "fileNameInput2", projectName, showProjectRenameReadonly)}
                         {showGithub && <githubbutton.GithubButton parent={this.props.parent} key={`githubbtn${computer}`} />}
                         <identity.CloudSaveStatus headerId={header.id} />
                     </div>
                 </div>}
-            <div id="editorToolbarArea" role="menu" className="ui column items">
+            <div id="editorToolbarArea" role="menubar" className="ui column items">
                 {showUndoRedo && <div className="ui icon buttons">{this.getUndoRedo(computer)}</div>}
                 {showZoomControls && <div className="ui icon buttons mobile hide">{this.getZoomControl(computer)}</div>}
                 {targetTheme.bigRunButton && !pxt.shell.isTimeMachineEmbed() &&
diff --git a/webapp/src/headerbar.tsx b/webapp/src/headerbar.tsx
index 9e739264cb45..d873f3d8e90c 100644
--- a/webapp/src/headerbar.tsx
+++ b/webapp/src/headerbar.tsx
@@ -105,7 +105,7 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
         if (view === "time-machine") {
             return <></>;
         }
-        return <div className="ui item logo organization">
+        return <div className="ui item logo organization" role="menuitem">
             {targetTheme.organizationWideLogo || targetTheme.organizationLogo
                 ? <img className={`ui logo ${view !== "home" ? "mobile hide" : ""}`} src={targetTheme.organizationWideLogo || targetTheme.organizationLogo} alt={lf("{0} Logo", targetTheme.organization)} />
                 : <span className="name">{targetTheme.organization}</span>}
@@ -178,7 +178,7 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
                             break;
                     }
                 } else {
-                    return <div className="ui item link editor-menuitem">
+                    return <div className="ui item link editor-menuitem" role="menuitem">
                         <container.EditorSelector parent={this.props.parent} sandbox={view === "sandbox"} python={targetTheme.python} languageRestriction={languageRestriction} headless={pxt.appTarget.simulator?.headless} />
                     </div>
                 }
diff --git a/webapp/src/identity.tsx b/webapp/src/identity.tsx
index 22f3d4ad2195..8c1d047c6ac0 100644
--- a/webapp/src/identity.tsx
+++ b/webapp/src/identity.tsx
@@ -189,8 +189,8 @@ export class CloudSaveStatus extends data.Component<CloudSaveStatusProps, {}> {
         const syncing = preparing || cloudStatus.value === "syncing";
 
         return (<div className="cloudstatusarea">
-            {!syncing && <sui.Item className={"ui tiny cloudicon xicon " + cloudStatus.icon} title={cloudStatus.tooltip} tabIndex={-1}></sui.Item>}
-            {syncing && <sui.Item className={"ui tiny inline loader active cloudprogress" + (preparing ? " indeterminate" : "")} title={cloudStatus.tooltip} tabIndex={-1}></sui.Item>}
+            {!syncing && <sui.Item role="presentation" className={"ui tiny cloudicon xicon " + cloudStatus.icon} title={cloudStatus.tooltip} tabIndex={-1}></sui.Item>}
+            {syncing && <sui.Item role="presentation" className={"ui tiny inline loader active cloudprogress" + (preparing ? " indeterminate" : "")} title={cloudStatus.tooltip} tabIndex={-1}></sui.Item>}
             {cloudStatus.value !== "none" && cloudStatus.value !== "synced" && <span className="ui mobile hide no-select cloudtext" role="note">{cloudStatus.shortStatus}</span>}
         </div>);
     }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 29c22c1b679f..04cc1db8fc32 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -149,7 +149,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
             <div key={`mystuff_gallerysegment`} className="ui segment gallerysegment mystuff-segment" role="region" aria-label={lf("My Projects")}>
                 <div className="ui heading">
                     <div className="column" style={{ zIndex: 1 }}
-                        role={scriptManager && "button"} onClick={scriptManager && this.showScriptManager} onKeyDown={scriptManager && fireClickOnEnter}
+                        onClick={scriptManager && this.showScriptManager} onKeyDown={scriptManager && fireClickOnEnter}
                     >
                         {scriptManager ? <h2 className="ui header myproject-header">
                             {lf("My Projects")}
diff --git a/webapp/src/sui.tsx b/webapp/src/sui.tsx
index 25948b0a8807..3915b0f31abc 100644
--- a/webapp/src/sui.tsx
+++ b/webapp/src/sui.tsx
@@ -500,7 +500,7 @@ export class Item extends data.Component<ItemProps, {}> {
         return (
             <div className={genericClassName("ui item link", this.props, true) + ` ${this.props.active ? 'active' : ''}`}
                 role={this.props.role}
-                aria-label={ariaLabel || title || text}
+                aria-label={(!this.props.role || this.props.role === "presentation") ? "" : ariaLabel || title || text}
                 aria-selected={this.props.active}
                 aria-hidden={ariaHidden}
                 title={title || text}