From 9c3afd66c49c8a9c324eca4113d54d51dd1c4bf5 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 16 Jun 2020 15:16:16 -0700
Subject: [PATCH] add aria-labels for content

---
 .../components/color-swatch/color-swatch.styles.ts |  2 +-
 .../color-swatch/color-swatch.template.ts          |  2 +-
 .../app/components/fast-frame/fast-frame.styles.ts |  6 +++---
 .../components/fast-frame/fast-frame.template.ts   | 14 +++++++-------
 sites/fast-website/src/public/index.html           |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
index 3b10166772d..04840eb9d9d 100644
--- a/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
+++ b/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
@@ -44,7 +44,7 @@ ${display("inline-flex")} :host {
     cursor: pointer;
 }
 
-.label__hidden {
+.label-hidden {
     display: none;
 }
 
diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
index f54067a5777..87f0f2e05c5 100644
--- a/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
+++ b/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
@@ -23,7 +23,7 @@ export const ColorSwatchTemplate = html<ColorSwatch>`
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
-                    : "label label__hidden"}"
+                    : "label label-hidden"}"
         >
             <slot ${slotted("defaultSlottedNodes")}></slot>
         </label>
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
index 22df525072e..91796999448 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
@@ -301,7 +301,7 @@ export const FastFrameStyles = css`
             border-radius: calc(var(--corner-radius) * 1px);
         }
 
-        .preview__expanded {
+        .preview-expanded {
             transition: right .5s ease-in-out;
             right: -10%;
         }    
@@ -317,7 +317,7 @@ export const FastFrameStyles = css`
             visibility: visible;
         }
         
-        .tab-panel__expanded {
+        .tab-panel-expanded {
             opacity: 0;
             transition: opacity .5s ease-in-out;
         }
@@ -335,7 +335,7 @@ export const FastFrameStyles = css`
             border-radius: calc(var(--corner-radius) * 1px);
         }
 
-        .preview__expanded {
+        .preview-expanded {
             right: -5%;
         }    
 
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
index 3ad4b9f3760..e86583ec1ba 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -20,7 +20,7 @@ export const FastFrameTemplate = html<FastFrame>`
                 <fast-tab id="swatches-tab" title="Styles">${SwatchesIcon}</fast-tab>
                 <fast-tab id="density-tab" title="Density">${ScreenIcon}</fast-tab>
                 <fast-tab-panel id="contrast-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Dark Mode</h4>
                         <h2>Pre-built for both light and dark modes</h2>
@@ -42,7 +42,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="palette-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Colors</h4>
                         <h2>Pre-existing color you can customize</h2>
@@ -124,7 +124,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="swatches-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Styles</h4>
                         <h2>Adjust style settings on the fly</h2>
@@ -182,7 +182,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="density-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Density</h4>
                         <h2>Quickly change and modify your layout</h2>
@@ -268,7 +268,7 @@ export const FastFrameTemplate = html<FastFrame>`
                 </fast-tab-panel>
             </fast-tabs>
             <fast-design-system-provider
-                class="${x => (x.expanded ? "preview preview__expanded" : "preview")}"
+                class="${x => (x.expanded ? "preview preview-expanded" : "preview")}"
                 base-layer-luminance="${x =>
                     x.darkMode
                         ? StandardLuminance.DarkMode
@@ -318,10 +318,10 @@ export const FastFrameTemplate = html<FastFrame>`
                             <span class="sample-control-icon"></span>
                             <span class="sample-control-text">Label</span>
                             <div class="sample-control-actions">
-                                <fast-button appearance="stealth"
+                                <fast-button appearance="stealth" aria-label="Example 'share' button"
                                     >${ShareIcon}</fast-button
                                 >
-                                <fast-button appearance="stealth"
+                                <fast-button appearance="stealth" aria-label="Example 'more' button"
                                     >${ContextIcon}</fast-button
                                 >
                             </div>
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
index c9d0bf8fb9a..e9aac217729 100644
--- a/sites/fast-website/src/public/index.html
+++ b/sites/fast-website/src/public/index.html
@@ -15,7 +15,7 @@
       <div class="wrapper">
         <header class="header">
           <site-navigation>
-            <fast-anchor class="logo" slot="start" appearance="lightweight" href="/">
+            <fast-anchor class="logo" slot="start" appearance="lightweight" href="/" aria-label="Home">
               <%= require("svg/icon-brand.svg") %>
               FAST
             </fast-anchor>
@@ -110,7 +110,7 @@ <h2 class="section-heading">Join the community</h2>
                 <li><p>&copy; 2020 Microsoft</p></li>
               </ul>
             </site-navigation>
-            <fast-anchor class="logo" appearance="lightweight" href="/">
+            <fast-anchor class="logo" appearance="lightweight" href="/" aria-label="Home">
               <%= require("svg/icon-brand.svg") %>
             </fast-anchor>
           </footer>