Home screen keyboard focus (microsoft#10446)

* Addresses the lack of contrast on some of focus-visible highlights on the home screen, as well as making the carousel buttons a single tab stop, which brings it closer to the WAI-ARIA recommendations for tabbed carousels.

* Use the focus border color on the home screen

Author: glastonbridge

theme/home.less

@@ -90,16 +90,39 @@
 
         .action {
             margin: 1rem 0;
+            a:focus-visible, button:focus-visible {
+                outline-width: 4px !important;
+                outline-style: solid;
+                outline-color: var(--pxt-neutral-stencil3);
+            }
         }
 
-        .dots button {
-            transition: background-color 0.5s;
-            border: 2px solid @heroBannerDotOutlineColor;
-            margin-right: 1.25rem;
+        .dots {
+            align-self: flex-start;
+            border-radius: 50px;
+            line-height: 0;
+            margin-top: 8px;
+
+            &:focus-visible {
+                outline-width: 3px !important;
+                outline-style: solid;
+                outline-color: white;
+                outline-offset: 4px;
+            }
+
+            button {
+                transition: background-color 0.5s;
+                border: 2px solid @heroBannerDotOutlineColor;
+                margin-right: 1.25rem;
+
+                &.active {
+                    border-color: @heroBannerDotOutlineAtiveColor;
+                    background-color: transparent;
+                }
 
-            &.active {
-                border-color: @heroBannerDotOutlineAtiveColor;
-                background-color: transparent;
+                &:last-child {
+                    margin-right: 0px;
+                }
             }
         }
 
@@ -152,6 +175,12 @@
                     &:hover, &:focus {
                         border-color: var(--pxt-primary-background);
                     }
+                    &:focus-visible {
+                        outline-width: @homeCardBorderSize !important;
+                        outline-style: solid;
+                        outline-color: var(--pxt-focus-border);
+                        outline-offset: 2px;
+                    }
                 }
             }
         }
@@ -173,6 +202,12 @@
     .import-dialog-btn {
         position: relative;
         z-index: 1; /* Move up so it's above the carousel container that has an offset margin */
+        &:focus-visible {
+            outline-width: @homeCardBorderSize !important;
+            outline-style: solid;
+            outline-color: var(--pxt-focus-border);
+            outline-offset: 2px;
+        }
     }
     /* Footer, Privary, Terms of Use */
     .homefooter {
@@ -350,8 +385,7 @@
                 transform: translateX(-50%) translateY(-50%);
                 pointer-events: none;
             }
-            .card-action:hover,
-            .card-action:focus-within {
+            .card-action:hover {
                 cursor: pointer;
                 border-color: @white;
                 .ui.button {
@@ -449,7 +483,9 @@
     }
     .ui.card:focus {
         border: 2px solid transparent;
-        outline: @homeCardBorderSize solid var(--pxt-primary-background) !important;
+        outline-width: @homeCardBorderSize !important;
+        outline-style: solid;
+        outline-color: var(--pxt-focus-border);
     }
 }
 

webapp/src/projects.tsx

@@ -350,6 +350,7 @@ class HeroBanner extends data.Component<ISettingsProps, HeroBannerState> {
 
     protected handleRefreshCard = (backwards?: boolean) => {
         pxt.debug(`next hero carousel`);
+
         if (this.prevGalleries?.length) {
             const cardIndex = this.state.cardIndex;
             const nextOffset = backwards ? this.prevGalleries.length - 1 : 1;
@@ -527,6 +528,8 @@ class HeroBanner extends data.Component<ISettingsProps, HeroBannerState> {
         return <div className="ui segment getting-started-segment hero"
             style={{ backgroundImage: encodedBkgd }}
             onKeyDown={this.onKeyDown}
+            role="region"
+            aria-label={lf("Banner")}
             onPointerDown={this.onPointerDown} onTouchStart={this.onTouchstart}
             onPointerUp={this.onPointerUp} onTouchEnd={this.onTouchEnd}
         >
@@ -549,9 +552,9 @@ class HeroBanner extends data.Component<ISettingsProps, HeroBannerState> {
                         this.handleCardClick
                     )}
                 </div>}
-                {isGallery && <div key="cards" className="dots">
+                {isGallery && <div key="cards" className="dots" tabIndex={0} role="group" aria-label={lf("Carousel controls")}>
                     {cards.map((card, i) => <button key={"dot" + i} className={`ui button empty circular label  clear ${i === cardIndex && "active"}`}
-                        onClick={handleSetCard(i)} aria-label={lf("View {0} hero image", card.title || card.name)} title={lf("View {0} hero image", card.title || card.name)}>
+                        onClick={handleSetCard(i)} aria-label={lf("View {0} hero image", card.title || card.name)} tabIndex={-1} title={lf("View {0} hero image", card.title || card.name)}>
                     </button>)}
                 </div>}
             </div>