From 004271316762e1a412f13a4d7ea16b89912fadc0 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 8 Apr 2024 14:25:34 -0700
Subject: [PATCH 1/8] add aria-label to editor toggle, change the dropdown
 language selector to an option role rather than menuitem

---
 webapp/src/container.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 0d57cff4bf0a..a20e9b96a181 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>}

From dab7b3499918571a89549e2b47557eb00e754681 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 8 Apr 2024 14:27:28 -0700
Subject: [PATCH 2/8] add role=menuitem to organization logo

---
 webapp/src/headerbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/headerbar.tsx b/webapp/src/headerbar.tsx
index 9e739264cb45..fe6141300fac 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>}

From 5e5cb468fa831f3d27f312cdbd981a989c3fed04 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 8 Apr 2024 14:48:47 -0700
Subject: [PATCH 3/8] give editor selector div the role menuitem

---
 webapp/src/headerbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/headerbar.tsx b/webapp/src/headerbar.tsx
index fe6141300fac..d873f3d8e90c 100644
--- a/webapp/src/headerbar.tsx
+++ b/webapp/src/headerbar.tsx
@@ -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>
                 }

From 408a555eb2bc2926a7db463224690fb64814221c Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 8 Apr 2024 17:21:09 -0700
Subject: [PATCH 4/8] 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

---
 webapp/src/identity.tsx | 4 ++--
 webapp/src/sui.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

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/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}

From 71a871fc706e67995e942cfa34b063594d2e925f Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 9 Apr 2024 12:04:37 -0700
Subject: [PATCH 5/8] remove button role from outer div for projects header

---
 webapp/src/projects.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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")}

From 61e0e19435d9f0c9a958acc10603ff44d68634b9 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 9 Apr 2024 12:09:38 -0700
Subject: [PATCH 6/8] remove menu role from projectnamearea, give explicit role
 of button to save project button

---
 webapp/src/editortoolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/editortoolbar.tsx b/webapp/src/editortoolbar.tsx
index bd654a948dcd..89e8ede05ce5 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;
@@ -431,7 +431,7 @@ 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}`} />}

From 88f0293d6debe4f51095a09cf9e7b2650dbd86a5 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Wed, 10 Apr 2024 09:35:51 -0700
Subject: [PATCH 7/8] change other toolbar menus to menubars

---
 webapp/src/editortoolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/editortoolbar.tsx b/webapp/src/editortoolbar.tsx
index 89e8ede05ce5..c713797d7a58 100644
--- a/webapp/src/editortoolbar.tsx
+++ b/webapp/src/editortoolbar.tsx
@@ -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' />}
@@ -438,7 +438,7 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
                         <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() &&

From 8e230ab03992ea74997e0eb0027f0561897ea2d0 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Wed, 10 Apr 2024 11:18:07 -0700
Subject: [PATCH 8/8] fixed capitalization on editortoggle aria label

---
 webapp/src/container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index a20e9b96a181..f4a2a216e180 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -525,7 +525,7 @@ export class EditorSelector extends data.Component<IEditorSelectorProps, {}> {
         }
 
         return (
-            <div id="editortoggle" className={`ui grid padded ${(pyOnly || tsOnly) ? "one-language" : ""}`} role="listbox" aria-orientation="horizontal" aria-label={lf("editor toggle")}>
+            <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}