added predicate to findnextfocusable, made alt and aria label more ge…

…neric for simulator thumbnail, got rid of important on embed button styling
microsoft · May 8, 2024 · 07001ff · 07001ff
1 parent 267701a
commit 07001ff
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/react-common/components/controls/FocusList.tsx b/react-common/components/controls/FocusList.tsx
@@ -41,9 +41,7 @@ export const FocusList = (props: FocusListProps) => {
         focusableElements = [];
 
         for (const element of focusable.values()) {
-            if (getComputedStyle(element).display !== "none") {
-                focusableElements.push(element as HTMLElement);
-            }
+            focusableElements.push(element as HTMLElement);
 
             // Remove them from the tab order, menu items are navigable using the arrow keys
             element.setAttribute("tabindex", "-1");
@@ -59,6 +57,11 @@ export const FocusList = (props: FocusListProps) => {
         }
     }
 
+    const isFocusable = (e: HTMLElement) => {
+        return e.getAttribute("data-isfocusable") === "true"
+            && getComputedStyle(e).display !== "none";
+    }
+
     const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
         if  (!focusableElements?.length) return;
 
@@ -86,31 +89,31 @@ export const FocusList = (props: FocusListProps) => {
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowDown" : "ArrowRight")) {
             if (index === focusableElements.length - 1 || target === focusList) {
-                focus(findNextFocusableElement(focusableElements, index, 0, true));
+                focus(findNextFocusableElement(focusableElements, index, 0, true, isFocusable));
             }
             else {
-                focus(findNextFocusableElement(focusableElements, index, index + 1, true));
+                focus(findNextFocusableElement(focusableElements, index, index + 1, true, isFocusable));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowUp" : "ArrowLeft")) {
             if (index === 0 || target === focusList) {
-                focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, false));
+                focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, false, isFocusable));
             }
             else {
-                focus(findNextFocusableElement(focusableElements, index, index - 1, false));
+                focus(findNextFocusableElement(focusableElements, index, index - 1, false, isFocusable));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "Home") {
-            focus(findNextFocusableElement(focusableElements, index, 0, true));
+            focus(findNextFocusableElement(focusableElements, index, 0, true, isFocusable));
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "End") {
-            focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, true));
+            focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, true, isFocusable));
             e.preventDefault();
             e.stopPropagation();
         }

diff --git a/react-common/components/share/ShareInfo.tsx b/react-common/components/share/ShareInfo.tsx
@@ -324,7 +324,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
             {showSimulator && shareState !== "gifrecord" &&
                 <div className="project-share-thumbnail">
                     {thumbnailUri
-                        ? <img src={thumbnailUri} alt={lf("Preview of your code running on a micro:bit")} aria-label={lf("Micro:bit simulator preview")}/>
+                        ? <img src={thumbnailUri} alt={lf("Preview of your code running on the simulator")} aria-label={lf("Simulator preview")}/>
                         : <div className="project-thumbnail-placeholder">
                              <div className="common-spinner" />
                         </div>

diff --git a/react-common/components/util.tsx b/react-common/components/util.tsx
@@ -93,14 +93,14 @@ export function screenToSVGCoord(ref: SVGSVGElement, coord: ClientCoordinates) {
     return screenCoord.matrixTransform(ref.getScreenCTM().inverse());
 }
 
-export function findNextFocusableElement(elements: HTMLElement[], focusedIndex: number, index: number, forward: boolean): HTMLElement {
+export function findNextFocusableElement(elements: HTMLElement[], focusedIndex: number, index: number, forward: boolean, isFocusable?: (e: HTMLElement) => boolean): HTMLElement {
     const increment = forward ? 1 : -1;
     const element = elements[index];
     // in this case, there are no focusable elements
     if (focusedIndex === index) {
         return element;
     }
-    if (getComputedStyle(element).display !== "none") {
+    if (isFocusable ? isFocusable(element) : getComputedStyle(element).display !== "none") {
         return element;
     } else {
         if (index + increment >= elements.length) {

diff --git a/react-common/styles/share/share.less b/react-common/styles/share/share.less
@@ -314,9 +314,10 @@
         padding: 0 2rem;
     }
 
-    .embed.mobile-portrait-hidden {
+    .common-button.square-button.embed.gray.mobile-portrait-hidden {
+        // important is need for color to override semantic ui's use of important
         color: #323130 !important;
-        background: #e0e1e2 !important;
+        background: #e0e1e2;
     }
 }