Make link color meet contrast ratio requirements (microsoft#11037)

* make docs link color darker

* darken the pxt-link variable color

* aria-hidden for uninteractable logos, give buttons in headerbar role menuitem

* make the MakeCode Arcade logo a button when interactable in the editor for a skillmap

* remove posinset from skillmap infopanel activity action buttons

* remove posinset from skillmap infopanel reward action buttons

* bring role presentation back to the left header

* make it aria hidden when not interactable

Author: srietkerk

react-common/styles/theming/base-theme.less

@@ -67,7 +67,7 @@
     --pxt-neutral-alpha50: rgba(0, 0, 0, 0.5);
     --pxt-neutral-alpha80: rgba(0, 0, 0, 0.8);
 
-    --pxt-link: #3977B4;
+    --pxt-link: #3671AB;
     --pxt-link-hover: #204467;
     --pxt-focus-border: #0078D4;
 

skillmap/src/App.css

@@ -92,12 +92,14 @@ code {
     font-size: 1.5rem;
     user-select: none;
     display: flex;
+    align-items: center;
+    height: 100%;
 }
 
-.header .brand:before {
+.header .header-logo:after {
     position: relative;
     height: 1.5rem;
-    border-left: 2px solid var(--pxt-header-foreground);
+    border-right: 2px solid var(--pxt-header-foreground);
     content: " ";
 }
 
@@ -107,11 +109,15 @@ code {
     color: var(--pxt-header-background);
 }
 
-.ui.item.logo .name {
+.ui.item.logo span.name {
     margin-left: 1rem;
     margin-bottom: 1px;
 }
 
+.ui.item.logo button.name,button.name-short {
+    margin-left: 0 !important;
+}
+
 .header-logo img {
     height: 1.4rem;
     margin: 0 1rem;

skillmap/src/components/ActivityActions.tsx

@@ -98,18 +98,11 @@ export class ActivityActionsImpl extends React.Component<ActivityActionsProps> {
         if (status === "locked") return <div />
         const showSignIn = pxt.auth.hasIdentity() && !signedIn;
 
-        let numberOfActions = 1;
-        if (activityStarted) numberOfActions += 2;
-        if (completedHeaderId) numberOfActions += 1;
-        if (showSignIn) numberOfActions += 1;
-
         // Apply "grid" class when there are four actions (for a completed activity)
         return <div className={`actions ${completedHeaderId ? "grid" : ""}`}>
             <Button
                 className="tertiary"
                 tabIndex={-1}
-                ariaPosInSet={1}
-                ariaSetSize={numberOfActions}
                 title={this.getActivityActionText()}
                 label={this.getActivityActionText()}
                 onClick={this.handleActionButtonClick}
@@ -118,17 +111,13 @@ export class ActivityActionsImpl extends React.Component<ActivityActionsProps> {
                 <Button
                     className="primary inverted"
                     tabIndex={-1}
-                    ariaPosInSet={2}
-                    ariaSetSize={numberOfActions}
                     title={lf("Restart")}
                     label={lf("Restart")}
                     onClick={this.handleRestartButtonClick}
                 />
                 <Button
                     className="primary inverted"
                     tabIndex={-1}
-                    ariaPosInSet={3}
-                    ariaSetSize={numberOfActions}
                     title={lf("Share")}
                     label={lf("Share")}
                     onClick={this.handleShareButtonClick}
@@ -137,8 +126,6 @@ export class ActivityActionsImpl extends React.Component<ActivityActionsProps> {
             {completedHeaderId &&
                 <Button
                     tabIndex={-1}
-                    ariaPosInSet={activityStarted ? 4 : 2}
-                    ariaSetSize={numberOfActions}
                     className="primary inverted"
                     title={lf("Save to My Projects")}
                     label={lf("Save to My Projects")}
@@ -148,8 +135,6 @@ export class ActivityActionsImpl extends React.Component<ActivityActionsProps> {
             {showSignIn &&
                 <Button
                     tabIndex={-1}
-                    ariaPosInSet={numberOfActions}
-                    ariaSetSize={numberOfActions}
                     className="primary inverted"
                     onClick={dispatchShowLoginModal}
                     label={lf("Sign in to Save")}

skillmap/src/components/HeaderBar.tsx

@@ -106,7 +106,7 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
 
     protected getOrganizationLogo(targetTheme: pxt.AppTheme) {
         const logoUrl = targetTheme.organizationWideLogo;
-        return <div className="header-logo">
+        return <div className="header-logo" aria-hidden="true">
             {logoUrl
                 ? <img src={isLocal() ? `./assets/${logoUrl}`: logoUrl} alt={lf("{0} Logo", targetTheme.organization)}/>
                 : <span className="name">{targetTheme.organization}</span>}
@@ -115,10 +115,23 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
 
     protected getTargetLogo(targetTheme: pxt.AppTheme) {
         const { activityOpen } = this.props;
-        return <div className={`ui item logo brand ${!activityOpen ? "noclick" : ""}`}>
+        const isInteractive = activityOpen && targetTheme.useTextLogo;
+
+        return <div className={`ui item logo brand ${!activityOpen ? "noclick" : ""}`} aria-hidden={!isInteractive}>
             {targetTheme.useTextLogo
-                ? [<span className="name" key="org-name" onClick={this.onBackClicked}>{targetTheme.organizationText}</span>,
-                   <span className="name-short" key="org-name-short" onClick={this.onBackClicked}>{targetTheme.organizationShortText || targetTheme.organizationText}</span>]
+                ? (activityOpen
+                    ? [<Button className="name menu-button" key="org-name"
+                              onClick={this.onBackClicked}
+                              title={lf("MakeCode logo, return to activity selection")}
+                              ariaLabel={lf("MakeCode logo, return to activity selection")}
+                              label={targetTheme.organizationText} />,
+                       <Button className="name-short menu-button" key="org-name-short"
+                              onClick={this.onBackClicked}
+                              title={lf("MakeCode logo, return to activity selection")}
+                              ariaLabel={lf("MakeCode logo, return to activity selection")}
+                              label={targetTheme.organizationShortText || targetTheme.organizationText} />]
+                    : [<span className="name" key="org-name">{targetTheme.organizationText}</span>,
+                       <span className="name-short" key="org-name-short">{targetTheme.organizationShortText || targetTheme.organizationText}</span>])
                 : (targetTheme.logo || targetTheme.portraitLogo
                     ? <img className="logo" src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)}/>
                     : <span className="name"> {targetTheme.boardName}</span>)
@@ -169,7 +182,7 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
         return <div className="user-menu">
             {signedIn
             ?  <MenuDropdown id="profile-dropdown" items={items} label={avatarElem || initialsElem} title={lf("Profile Settings")}/>
-             : <Button className="menu-button" rightIcon="xicon cloud-user" title={lf("Sign In")} label={lf("Sign In")} onClick={ () => {
+             : <Button className="menu-button" role="menuitem" rightIcon="xicon cloud-user" title={lf("Sign In")} label={lf("Sign In")} onClick={ () => {
                 pxt.tickEvent(`skillmap.usermenu.signin`);
                 this.props.dispatchShowLoginModal();
             }}/>}
@@ -192,8 +205,8 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
 
             <div className="spacer" />
             <div className="header-right">
-                { activityOpen && <Button className="menu-button" leftIcon="fas fa-arrow-left large" title={lf("Return to activity selection")} onClick={this.onBackClicked}/> }
-                <Button className="menu-button" leftIcon="fas fa-home large" title={lf("Return to the editor homepage")} onClick={this.onHomeClicked}/>
+                { activityOpen && <Button className="menu-button" role="menuitem" leftIcon="fas fa-arrow-left large" title={lf("Return to activity selection")} onClick={this.onBackClicked}/> }
+                <Button className="menu-button" role="menuitem" leftIcon="fas fa-home large" title={lf("Return to the editor homepage")} onClick={this.onHomeClicked}/>
                 { helpItems?.length > 0 && <MenuDropdown id="skillmap-help" title={lf("Help menu")} icon="fas fa-question-circle large" items={helpItems}  />}
                 { settingItems?.length > 0 && <MenuDropdown id="settings-help" title={lf("Settings menu")} icon="fas fa-cog large" items={settingItems}  />}
                 { hasIdentity && this.getUserMenu() }

skillmap/src/components/RewardActions.tsx

@@ -53,17 +53,13 @@ export class RewardActionsImpl extends React.Component<RewardActionsProps> {
             <div className="actions">
                 <Button
                     tabIndex={-1}
-                    ariaPosInSet={1}
-                    ariaSetSize={showSignIn ? 3 : 2}
                     className="primary inverted"
                     title={lf("Claim Reward")}
                     label={lf("Claim Reward")}
                     onClick={this.handleActionButtonClick}
                 />
                 <Button
                     tabIndex={-1}
-                    ariaPosInSet={2}
-                    ariaSetSize={showSignIn ? 3 : 2}
                     className="primary inverted"
                     title={lf("Play your game")}
                     label={lf("Play your game")}
@@ -72,8 +68,6 @@ export class RewardActionsImpl extends React.Component<RewardActionsProps> {
                 {showSignIn &&
                     <Button
                         tabIndex={-1}
-                        ariaPosInSet={3}
-                        ariaSetSize={3}
                         className="tertiary"
                         onClick={dispatchShowLoginModal}
                         label={lf("Sign in to Save")}

theme/docs.less

@@ -13,7 +13,7 @@
 @docsHeadingColor: @docsTextColor;
 
 /* Link color */
-@docsLinkColor: #3977b4;
+@docsLinkColor: #3671ab;
 
 /* Code segment */
 @docsSegmentBackgroundColor: #f7f7f7;