Fix various docs/homepage accessibility bugs (#9974)

* make sure docs links are underlined * add shortcut for compiling pxtrunner * add title to embedded docs simulator frames * hardcode html lang for docs pages * give carousel arrows discernible focus outlines * add landmarks to docs page
microsoft · Apr 16, 2024 · d13b8a3 · d13b8a3
1 parent 948b36f
commit d13b8a3
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 8 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,4 +1,4 @@
-<div class="docs-top-bar @tocclass@">
+<div class="docs-top-bar @tocclass@" role="banner">
     <div id="top-bar" class="menu-bar" role="menubar">
         @sidebarToggle@
         <div class="logo-group" role="menuitem">
@@ -7,7 +7,7 @@
             <div class="header-title desktop-only"><span>@orgtitle@</span></div>
         </div>
     </div>
-    <form id="tocsearch1" class="search" method="get" action="https://www.bing.com/search">
+    <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@

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/pxtrunner/renderer.ts b/pxtrunner/renderer.ts
@@ -1304,11 +1304,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
@@ -88,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;

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;

diff --git a/webapp/public/docs.html b/webapp/public/docs.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="@locale@" data-framework="typescript">
+<html lang="en" data-framework="typescript">
 
 <head>
     <meta charset="utf-8">