Accessibility compliance: Improve share dialog accessibility

react-common/components/controls/EditorToggle.tsx

@@ -125,7 +125,11 @@ const EditorToggleAccessibleMenu = (props: EditorToggleProps) => {
         next.push({...current});
 
         // The selected item will always be a top-level option, not in a dropdown
-        if (selected === index) next[next.length - 1].selected = true;
+        if (selected === index) {
+            next[next.length - 1].selected = true;
+        } else {
+            next[next.length - 1].selected = false;
+        }
 
         if (isDropdownItem(current)) {
             next.push(...current.items.filter(i => i.focusable))

react-common/components/share/ShareInfo.tsx

@@ -32,6 +32,19 @@ export interface ShareInfoProps {
     onClose: () => void;
 }
 
+function useWindowWidth() {
+    const [size, setSize] = React.useState(window.innerWidth);
+    React.useLayoutEffect(() => {
+      function updateSize() {
+        setSize(window.innerWidth);
+      }
+      window.addEventListener('resize', updateSize);
+      updateSize();
+      return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    return size;
+  }
+
 export const ShareInfo = (props: ShareInfoProps) => {
     const {
         projectName,
@@ -58,6 +71,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const [ kioskState, setKioskState ] = React.useState(false);
     const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn || anonymousShareByDefault);
     const [ isShowingMultiConfirmation, setIsShowingMultiConfirmation ] = React.useState(false);
+    // this is 854 because we have some dissonance between our styling and semantic ui's styling
+    const hideEmbed = useWindowWidth() <= 854;
 
     const { simScreenshot, simGif } = pxt.appTarget.appTheme;
     const showSimulator = (simScreenshot || simGif) && !!simRecorder;
@@ -323,7 +338,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
             {showSimulator && shareState !== "gifrecord" &&
                 <div className="project-share-thumbnail">
                     {thumbnailUri
-                        ? <img src={thumbnailUri} />
+                        ? <img src={thumbnailUri} alt={lf("Preview of your code running on a micro:bit")} aria-label={lf("Micro:bit simulator preview")}/>
                         : <div className="project-thumbnail-placeholder">
                              <div className="common-spinner" />
                         </div>
@@ -406,6 +421,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             <div className="common-input-attached-button">
                                 <Input
                                     ariaDescribedBy="share-input-title"
+                                    ariaLabel={lf("Your shareable project link")}
                                     handleInputRef={handleInputRef}
                                     initialValue={shareData.url}
                                     readOnly={true}
@@ -421,6 +437,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                 <div className="project-share-social">
                                     <Button className="square-button gray embed mobile-portrait-hidden"
                                         title={lf("Show embed code")}
+                                        disabled={hideEmbed}
                                         leftIcon="fas fa-code"
                                         onClick={handleEmbedClick} />
                                     <SocialButton className="square-button facebook"
@@ -462,7 +479,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                     className="menu-button project-qrcode"
                                     buttonRef={handleQRCodeButtonRef}
                                     title={lf("Show QR Code")}
-                                    label={<img className="qrcode-image" src={shareData?.qr} />}
+                                    label={<img className="qrcode-image" src={shareData?.qr} alt={lf("QR code to access your project")} aria-label={lf("Project share link QR code")}/>}
                                     onClick={handleQRCodeClick}
                                 />
                             </div>
@@ -475,7 +492,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             selected={embedOptions.findIndex(i => i.name === embedState)} />
                         <Textarea readOnly={true}
                             rows={5}
-                            initialValue={shareData?.embed[embedState]} />
+                            initialValue={shareData?.embed[embedState]}
+                            ariaLabel={lf("Embed code textarea")} />
                     </div>}
                     {kioskState &&
                         <div>
@@ -511,9 +529,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
             </div>
 
             {showQRCode &&
-                <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose}>
+                <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose} ariaLabel={lf("QR Code modal")} >
                     <div className="qrcode-modal-body">
-                        <img className="qrcode-image" src={shareData?.qr} />
+                        <img className="qrcode-image" src={shareData?.qr} alt={lf("QR code to access your project")} aria-label={lf("Project share link QR code enlarged")} />
                     </div>
                 </Modal>
             }

react-common/styles/controls/Modal.less

@@ -154,3 +154,21 @@
         border: 1px solid @highContrastTextColor;
     }
 }
+
+@media @mobileShare {
+    .common-modal-body {
+        padding-top: 0.5rem;
+        padding-bottom: 0;
+    }
+
+    .common-modal-header {
+        height: 2.5rem;
+        align-items: center;
+    }
+}
+
+@media @smallMobileShare {
+    .wide>.common-modal {
+        height: 95%;
+    }
+}

react-common/styles/react-common-breakpoints.less

@@ -1,17 +1,22 @@
 @mobileBreakpoint: 320px;
+@shareModalBreakpoint: 440px;
 @tabletBreakpoint: 768px;
 @computerBreakpoint: 992px;
 @largeMonitorBreakpoint: 1200px;
 @widescreenMonitorBreakpoint: 1920px;
 
+@smallShareScreen : (@mobileBreakpoint + 1px);
 @largestMobilePortraitScreen: (@mobileBreakpoint + 100px);
 @largestMobileScreen: (@tabletBreakpoint - 1px);
 @largestTabletScreen: (@computerBreakpoint - 1px);
+@shareScreen: (@shareModalBreakpoint + 1px);
 @largestSmallMonitor: (@largeMonitorBreakpoint - 1px);
 @largestLargeMonitor: (@widescreenMonitorBreakpoint - 1px);
 
 @portraitMobileAndBelow: ~"only screen and (max-width: @{largestMobilePortraitScreen})";
 @mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
+@mobileShare: ~"only screen and (max-width: @{shareScreen})";
+@smallMobileShare: ~"only screen and (max-width: @{smallShareScreen}) and (max-height: 438px)";
 @tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
 @computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
 @largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";

react-common/styles/react-common-variables.less

@@ -105,7 +105,7 @@
  *              EditorToggle                        *
  ****************************************************/
 
-@editorToggleBackgroundColor: rgba(52,73,94,.4);
+@editorToggleBackgroundColor: rgba(52,73,94,.8);
 @editorToggleBorderColor: rgba(52,73,94,.2);
 @editorToggleBorderWidth: 3px;
 

react-common/styles/share/share.less

@@ -150,6 +150,7 @@
     margin-top: 1rem;
     position: relative;
     margin-bottom: 2rem;
+    justify-content: space-between;
 }
 
 .project-share-social {
@@ -314,7 +315,46 @@
     }
 }
 
-@media @mobileAndBelow {
+@media only screen and (max-width: 854px) {
+    .embed.mobile-portrait-hidden {
+        display: none !important;
+    }
+}
+
+@media only screen and (max-width: 513px) {
+    .project-share-thumbnail {
+        img {
+            max-width: 15rem;
+        }
+    }
+
+    .project-share-social {
+        max-width: 12rem;
+    }
+
+    .project-share-content {
+        margin-left: 1rem;
+    }
+
+    .project-share-actions {
+        margin: 0.5rem 0;
+    }
+
+    .common-button.menu-button.project-qrcode {
+        padding: 0 0.25rem;
+    }
+
+    .project-share-data .common-input-attached-button .common-input-wrapper .common-input-group {
+        height: 2.5rem;
+    }
+
+    .project-share-data .common-input-attached-button .common-button {
+        height: 2.5rem;
+        padding: 0.5rem 1rem 0.95rem 0.1rem;
+    }
+}
+
+@media @mobileShare {
     .project-share-info, .gif-recorder-content {
         flex-direction: column;
     }