Revert "temporarily revert my docs accessibility fixes (#9975)" (#9976)

This reverts commit 7e3400c.
microsoft · Apr 17, 2024 · 3c86ce9 · 3c86ce9
1 parent e381259
commit 3c86ce9
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 79 deletions.
diff --git a/docfiles/docs.html b/docfiles/docs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="@locale@" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
 	xmlns:fb="http://www.facebook.com/2008/fbml">
 
 <head>
@@ -36,7 +36,7 @@
 
 				<!-- @include header.html -->
 
-				<div class="main ui container fluid mainbody">
+				<div class="main ui container fluid mainbody" role="main">
 					<button id="printbtn" class="circular ui icon right floated button hideprint hidemobile"
 						title="Print" aria-label="Print">
 						<i class="icon print"></i>

diff --git a/docfiles/tocheader.html b/docfiles/tocheader.html
@@ -1,26 +1,18 @@
-<div id="top-bar" class="ui fixed accent borderless @tocclass@ main menu hideprint docs" role="menubar">
-    <div>
+<div class="docs-top-bar @tocclass@" role="banner">
+    <div id="top-bar" class="menu-bar" role="menubar">
         @sidebarToggle@
-        <div class="item" role="menuitem">
-            <div class="header-org-logo">
-                <img src="/static/logo/Microsoft_logo_rgb_W-white_D.png" alt="Microsoft">
-            </div>
-            <div class="header-org-logo-sm">
-                <img src="/static/logo/Microsoft_logo_rgb_W-white_D-square.png" alt="Microsoft">
-            </div>
-            <div class="header-title"><span>@orgtitle@</span></div>
+        <div class="logo-group" role="menuitem">
+            <img class="desktop-only" src="/static/logo/Microsoft_logo_rgb_W-white_D.png" alt="Microsoft">
+            <img class="desktop-hidden" src="/static/logo/Microsoft_logo_rgb_W-white_D-square.png" alt="Microsoft">
+            <div class="header-title desktop-only"><span>@orgtitle@</span></div>
         </div>
     </div>
-    <div>
-        <div class="item">
-            <form id="tocsearch1" class="search" role="form" method="get" action="https://www.bing.com/search">
-                <div class="ui fluid icon input">
-                    <input type="hidden" name="q1" value="site:@homeurl@" />
-                    @searchBar1@
-                </div>
-            </form>
+    <form id="tocsearch1" class="search" method="get" action="https://www.bing.com/search" role="search">
+        <div class="ui fluid icon input">
+            <input type="hidden" name="q1" value="site:@homeurl@" />
+            @searchBar1@
         </div>
-    </div>
+    </form>
 </div>
 
 <div id="side-menu" class="ui vertical accent @tocclass@ sidebar menu left hideprint docs" role="menubar">

diff --git a/gulpfile.js b/gulpfile.js
@@ -757,6 +757,13 @@ exports.webapp = gulp.series(
     browserifyAssetEditor
 )
 
+exports.pxtrunner = gulp.series(
+    gulp.parallel(reactCommon, pxtblocks, pxteditor, pxtservices),
+    pxtrunner,
+    browserifyEmbed,
+    pxtembed,
+);
+
 exports.skillmapTest = testSkillmap;
 exports.updatestrings = updatestrings;
 exports.lint = lint

diff --git a/pxtblocks/codecardRenderer.ts b/pxtblocks/codecardRenderer.ts
@@ -3,6 +3,7 @@ import { render } from "./render";
 export interface CodeCardRenderOptions {
     hideHeader?: boolean;
     shortName?: boolean;
+    role?: string;
 }
 
 export function renderCodeCard(card: pxt.CodeCard, options: CodeCardRenderOptions = {}): HTMLElement {
@@ -22,8 +23,13 @@ export function renderCodeCard(card: pxt.CodeCard, options: CodeCardRenderOption
     const style = card.style || "card";
     let r = div(null, 'ui ' + style + ' ' + (card.color || '') + (link ? ' link' : ''), link ? "a" : "div");
 
-    r.setAttribute("role", "option");
-    r.setAttribute("aria-selected", "true");
+    if (options.role) {
+        r.setAttribute("role", options.role);
+    }
+
+    if (options.role === "option") {
+        r.setAttribute("aria-selected", "true");
+    }
 
     if (link) {
         const rAsLink = r as HTMLAnchorElement;

diff --git a/pxtrunner/renderer.ts b/pxtrunner/renderer.ts
@@ -871,25 +871,30 @@ function renderApisAsync(options: ClientRenderOptions, replaceParent: boolean):
                     return l.name.localeCompare(r.name);
                 })
 
-                const ul = $('<div />').addClass('ui divided items');
-                ul.attr("role", "listbox");
+                const ul = document.createElement("div");
+                ul.className = "ui divided items";
+                ul.setAttribute("role", "list");
                 csymbols.forEach(symbol => addSymbolCardItem(ul, symbol, "item"));
                 if (replaceParent) c = c.parent();
                 c.replaceWith(ul)
             })
         });
 }
 
-function addCardItem(ul: JQuery, card: pxt.CodeCard) {
+function addCardItem(ul: Element, card: pxt.CodeCard) {
     if (!card) return;
     const mC = /^\/(v\d+)/.exec(card.url);
     const mP = /^\/(v\d+)/.exec(window.location.pathname);
     const inEditor = /#doc/i.test(window.location.href);
     if (card.url && !mC && mP && !inEditor) card.url = `/${mP[1]}/${card.url}`;
-    ul.append(renderCodeCard(card, { hideHeader: true, shortName: true }));
+
+    const listItem = document.createElement("div");
+    listItem.setAttribute("role", "listitem");
+    listItem.append(renderCodeCard(card, { hideHeader: true, shortName: true }));
+    ul.append(listItem);
 }
 
-function addSymbolCardItem(ul: JQuery, symbol: pxtc.SymbolInfo, cardStyle?: string) {
+function addSymbolCardItem(ul: Element, symbol: pxtc.SymbolInfo, cardStyle?: string) {
     const attributes = symbol.attributes;
     const block = !attributes.blockHidden && Blockly.Blocks[attributes.blockId];
     const card = block?.codeCard;
@@ -916,8 +921,9 @@ function renderLinksAsync(options: ClientRenderOptions, cls: string, replacePare
         if (!cjs) return;
         const file = cjs.getSourceFile(pxt.MAIN_TS);
         const stmts = file.statements.slice(0);
-        const ul = $('<div />').addClass('ui cards');
-        ul.attr("role", "listbox");
+        const ul = document.createElement("div");
+        ul.setAttribute("role", "list");
+        ul.className = "card-list";
         stmts.forEach(stmt => {
             const kind = stmt.kind;
             const info = decompileCallInfo(stmt);
@@ -1053,17 +1059,21 @@ function fillCodeCardAsync(c: JQuery, cards: pxt.CodeCard[], options: CodeCardRe
         c.replaceWith(cc);
     } else {
         let cd = document.createElement("div")
-        cd.className = "ui cards";
-        cd.setAttribute("role", "listbox")
+        cd.className = "card-list";
+        cd.setAttribute("role", "list")
         cards.forEach(card => {
             // patch card url with version if necessary, we don't do this in the editor because that goes through the backend and passes the targetVersion then
             const mC = /^\/(v\d+)/.exec(card.url);
             const mP = /^\/(v\d+)/.exec(window.location.pathname);
             const inEditor = /#doc/i.test(window.location.href);
             if (card.url && !mC && mP && !inEditor) card.url = `/${mP[1]}${card.url}`;
             const cardEl = renderCodeCard(card, options);
-            cd.appendChild(cardEl)
-            // automitcally display package icon for approved packages
+
+            const outer = document.createElement("div");
+            outer.setAttribute("role", "listitem");
+            outer.appendChild(cardEl);
+            cd.appendChild(outer)
+            // automatically display package icon for approved packages
             if (card.cardType == "package") {
                 const repoId = pxt.github.parseRepoId((card.url || "").replace(/^\/pkg\//, ''));
                 if (repoId) {
@@ -1077,13 +1087,13 @@ function fillCodeCardAsync(c: JQuery, cards: pxt.CodeCard[], options: CodeCardRe
                                     // update card info
                                     card.imageUrl = pxt.github.mkRepoIconUrl(repoId);
                                     // inject
-                                    cd.insertBefore(renderCodeCard(card, options), cardEl);
+                                    outer.insertBefore(renderCodeCard(card, options), cardEl);
                                     cardEl.remove();
                                     break;
                             }
                         })
                         .catch(e => {
-                            // swallow
+                            // ignore
                             pxt.reportException(e);
                             pxt.debug(`failed to load repo ${card.url}`)
                         })
@@ -1290,11 +1300,23 @@ function renderSims(options: ClientRenderOptions) {
         let $c = $(c);
         let padding = '81.97%';
         if (pxt.appTarget.simulator) padding = (100 / pxt.appTarget.simulator.aspectRatio) + '%';
-        let $sim = $(`<div class="ui card"><div class="ui content">
+        const simTitle = lf("MakeCode {0} Simulator", pxt.appTarget.appTheme?.boardName || pxt.appTarget.name);
+
+        let $sim = $(`
+            <div class="ui card">
+                <div class="ui content">
                     <div style="position:relative;height:0;padding-bottom:${padding};overflow:hidden;">
-                    <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen="allowfullscreen" frameborder="0" sandbox="allow-popups allow-forms allow-scripts allow-same-origin"></iframe>
+                        <iframe
+                            style="position:absolute;top:0;left:0;width:100%;height:100%;"
+                            allowfullscreen="allowfullscreen"
+                            frameborder="0"
+                            sandbox="allow-popups allow-forms allow-scripts allow-same-origin"
+                            title="${pxt.U.htmlEscape(simTitle)}"
+                        ></iframe>
                     </div>
-                    </div></div>`)
+                </div>
+            </div>
+        `);
         const deps = options.package ? "&deps=" + encodeURIComponent(options.package) : "";
 
         const url = getRunUrl(options) + "#nofooter=1" + deps;

diff --git a/theme/docs.less b/theme/docs.less
@@ -1,3 +1,5 @@
+@import "./docs/tocheader.less";
+
 /*******************************
              Docs
 *******************************/
@@ -30,7 +32,6 @@
 
 #docs .footer,
 #docs .topbar,
-.ui.menu.fixed.docs,
 #docs {
     top: auto;
     background: hsl(@docsHue, 25%, 85%);
@@ -87,6 +88,12 @@
     a {
         color: @docsLinkColor;
     }
+
+    // links within paragraphs should be underlined for accessibility
+    p a {
+        text-decoration: underline;
+    }
+
     span.block {
         display: inline-block;
         vertical-align: middle;
@@ -188,6 +195,17 @@
         }
     }
 
+    .card-list {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 1.5rem;
+        column-gap: 1rem;
+
+        div .ui.card {
+            height: 100%;
+        }
+    }
+
     /* Breadcrumb */
     .ui.breadcrumb .divider {
         color: black;
@@ -452,44 +470,6 @@
     color: @docsLinkColor;
 }
 
-#top-bar {
-    .header-org-logo img,
-    .header-org-logo-sm img {
-        height: 1.4rem;
-    }
-
-    .header-org-logo-sm {
-        display: none;
-    }
-
-    .header-title:before {
-        content: "";
-        position: relative;
-        height: 1.5rem;
-        border-left: 2px solid #fff;
-        margin: 0.75rem;
-    }
-
-    .header-title span {
-        margin: 0.5rem;
-        font-size: 18px;
-        font-weight: 700;
-    }
-}
-
-@media only screen and (max-width: 767px) {
-    #top-bar {
-        .header-org-logo,
-        .header-title {
-            display: none;
-        }
-
-        .header-org-logo-sm {
-            display: block;
-        }
-    }
-}
-
 .replaceDocsAvatar() when not (@docsAvatarImage = none) {
     #docs {
         .avatar .avatar-image {

diff --git a/theme/docs/tocheader.less b/theme/docs/tocheader.less
@@ -0,0 +1,88 @@
+.docs-top-bar {
+    height: 3.5rem;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    position: fixed;
+    top: 0;
+    z-index: 99999;
+
+    background: hsl(@docsHue, 25%, 85%);
+    &.inverted {
+        background: hsl(@docsHue, 15%, 20%);
+    }
+
+    .menu-bar {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+
+        height: 100%;
+        align-items: center;
+    }
+
+    .logo-group {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        align-items: center;
+
+        padding-left: 1rem;
+        padding-right: 1rem;
+
+        img {
+            height: 1.4rem;
+        }
+    }
+
+    .header-title {
+        display: flex;
+        align-items: center;
+        padding-left: 0.5rem;
+
+        span {
+            color: white;
+            margin: 0.5rem;
+            font-size: 18px;
+            font-weight: 700;
+        }
+    }
+
+    .header-title::before {
+        content: "";
+        position: relative;
+        height: 1.5rem;
+        border-left: 2px solid #fff;
+        margin: 0.75rem;
+    }
+
+    .launch.item.icon {
+        width: 3.5rem;
+        height: 3.5rem;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        line-height: 1;
+
+        cursor: pointer;
+
+        &:hover {
+            background: hsla(0,0%,100%,.1);
+            text-decoration: none;
+        }
+    }
+
+    .search {
+        display: flex;
+        align-items: center;
+        margin-right: 1rem;
+
+        div.input {
+            min-width: 14em;
+            height: 2.5em;
+        }
+    }
+}
diff --git a/theme/home.less b/theme/home.less
@@ -502,6 +502,10 @@
     }
 }
 
+.carouselarrow:focus {
+    outline: solid 3px @primaryColor;
+}
+
 .carouselarrow .icon {
     top: 40%;
     position: absolute;