Merge pull request #303 from Shinsina/accessability-adjustments-monorail

Accessability Adjustments Round 1 Monorail
parameter1 · May 18, 2022 · 2645721 · 2645721
2 parents f054420 + b092acb
commit 2645721
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 17 deletions.
diff --git a/packages/marko-web-theme-default/components/site-footer/container.marko b/packages/marko-web-theme-default/components/site-footer/container.marko
@@ -5,6 +5,7 @@ $ const blockName = input.blockName || "site-footer";
   name="container"
   tag=input.tag
   modifiers=input.modifiers
+  attrs=input.attrs
 >
   <${input.renderBody} />
 </marko-web-element>
diff --git a/packages/marko-web-theme-default/components/site-menu/section.marko b/packages/marko-web-theme-default/components/site-menu/section.marko
@@ -9,6 +9,7 @@ $ const items = getAsArray(input, "items");
     name="section"
     tag=input.tag
     modifiers=input.modifiers
+    attrs=input.attrs
   >
     <if(input.label)>
       <default-theme-site-menu-header block-name=blockName>

diff --git a/packages/marko-web-theme-default/scss/_variables.scss b/packages/marko-web-theme-default/scss/_variables.scss
@@ -203,19 +203,19 @@ $theme-media-footer-line-height:  $line-height-sm !default;
 $theme-media-footer-padding-x:    0 !default;
 $theme-media-footer-padding-y:    .5rem !default;
 
-$theme-media-caption-color:       #464646 !default;
+$theme-media-caption-color:       #474747 !default;
 $theme-media-caption-font-size:   $theme-media-footer-font-size !default;
 $theme-media-caption-font-weight: 400 !default;
 $theme-media-caption-line-height: $theme-media-footer-line-height !default;
 
-$theme-media-credit-color:        #777 !default;
+$theme-media-credit-color:        #5c5b5b !default;
 $theme-media-credit-font-size:    12px !default;
 $theme-media-credit-font-style:   initial !default;
 $theme-media-credit-font-weight:  400 !default;
 $theme-media-credit-line-height:  $theme-media-footer-line-height !default;
 
 // Embedded Media
-$theme-embedded-media-color:        $gray-600 !default;
+$theme-embedded-media-color:        $gray-700 !default;
 $theme-embedded-media-font-family:  $theme-font-family-sans-serif !default;
 $theme-embedded-media-font-size:    $font-size-base !default;
 $theme-embedded-media-line-height:  $line-height-sm !default;

diff --git a/packages/marko-web-theme-monorail/browser/newsletter-toggle-button.vue b/packages/marko-web-theme-monorail/browser/newsletter-toggle-button.vue
@@ -2,6 +2,7 @@
   <button
     class="site-navbar__newsletter-toggler"
     type="button"
+    aria-label="Newsletter Menu Toggle"
     @click="toggle"
   >
     <icon-mail :modifiers="['lg']" />

diff --git a/packages/marko-web-theme-monorail/components/blocks/callout-cards.marko b/packages/marko-web-theme-monorail/components/blocks/callout-cards.marko
@@ -3,7 +3,7 @@ import { getAsArray } from "@parameter1/base-cms-object-path";
 $ const blockName = "callout-cards";
 $ const slots = getAsArray(input, "slots");
 
-<marko-web-block name=blockName>
+<marko-web-block name=blockName attrs={ role: "region", "aria-label": "Callout Cards" }>
   <marko-web-element block-name=blockName name="row">
     <marko-web-element block-name=blockName name="col">
       <${slots[0].renderBody} />

diff --git a/packages/marko-web-theme-monorail/components/blocks/related-stories.marko b/packages/marko-web-theme-monorail/components/blocks/related-stories.marko
@@ -42,7 +42,7 @@ $ const blockName = "related-stories";
     >
       $ nodes.push(...related);
       <if(nodes.length)>
-        <marko-web-block name=blockName>
+        <marko-web-block name=blockName attrs={ role: "region", "aria-label": "Related Stories" }>
           <marko-web-element block-name=blockName name="header">
             ${title}
           </marko-web-element>

diff --git a/packages/marko-web-theme-monorail/components/blocks/top-stories.marko b/packages/marko-web-theme-monorail/components/blocks/top-stories.marko
@@ -27,7 +27,7 @@ $ const queryName = (queryParams.optionName) ? "website-optioned-content" : "web
     };
     $ const cardNodes = nodes.slice(1);
 
-    <marko-web-block name=blockName>
+    <marko-web-block name=blockName attrs={ role: "region", "aria-label": "Top Stories" }>
       <if(withHeader)>
         <marko-web-element block-name=blockName name="header">
           ${i18n("Top Stories")}

diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/content-page.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/content-page.marko
@@ -3,4 +3,5 @@
   section=input.section
   display-self=input.displaySelf
   modifiers=["content-page"]
+  aria-label="Content Section Breadcrumbs"
 />
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/index.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/index.marko
@@ -4,9 +4,10 @@ $ const items = getAsArray(input, "items");
 $ const modifiers = getAsArray(input, "modifiers");
 $ const blockName = "breadcrumbs";
 $ const classes = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`)];
+$ const ariaLabel = input.ariaLabel || "breadcrumb";
 
 <if(items.length)>
-  <nav class=classes aria-label="breadcrumb">
+  <nav class=classes aria-label=ariaLabel>
     <ol class="breadcrumb">
       <for|item| of=items>
         <if(item.renderBody)>

diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/marko.json b/packages/marko-web-theme-monorail/components/breadcrumbs/marko.json
@@ -2,7 +2,8 @@
   "<theme-breadcrumbs>": {
     "template": "./index.marko",
     "@items <item>[]": {},
-    "@modifiers": "array"
+    "@modifiers": "array",
+    "@aria-label": "string"
   },
   "<theme-breadcrumbs-with-home>": {
     "template": "./with-home.marko",
@@ -25,6 +26,7 @@
     "@home-alias": "string",
     "@display-self": "boolean",
     "@display-home": "boolean",
-    "@modifiers": "array"
+    "@modifiers": "array",
+    "@aria-label": "string"
   }
 }
diff --git a/packages/marko-web-theme-monorail/components/breadcrumbs/website-section.marko b/packages/marko-web-theme-monorail/components/breadcrumbs/website-section.marko
@@ -8,7 +8,7 @@ $ const homeAlias = input.homeAlias || "home";
 $ const displaySelf = defaultValue(input.displaySelf, true);
 $ const displayHome = defaultValue(input.displayHome, true);
 
-<theme-breadcrumbs modifiers=input.modifiers>
+<theme-breadcrumbs modifiers=input.modifiers aria-label=input.ariaLabel>
   <if(displayHome)>
     <@item>
       <marko-web-link href="/" title=homeTitle>${homeTitle}</marko-web-link>

diff --git a/packages/marko-web-theme-monorail/components/site-footer.marko b/packages/marko-web-theme-monorail/components/site-footer.marko
@@ -14,7 +14,7 @@ $ const tagline = site.get("tagline");
   modifiers=input.modifiers
   attrs=input.attrs
 >
-  <default-theme-site-footer-container block-name=blockName modifiers=["secondary"]>
+  <default-theme-site-footer-container block-name=blockName modifiers=["secondary"] attrs={ "aria-label": "Footer Secondary Navigation" }>
     <marko-web-element block-name=blockName name="inner-container">
 
       <default-theme-site-navbar-brand block-name=blockName title=`${config.website("name")} Homepage`>
@@ -32,7 +32,7 @@ $ const tagline = site.get("tagline");
       </if>
 
       <div class="row">
-        <marko-web-element block-name=blockName name="section">
+        <marko-web-element block-name=blockName name="section" attrs={ "aria-label": "Newsletter Sign-Up Form Footer"}>
           $ const newsletterBlock = "site-footer-newsletter";
           <if(newsletterConfig.action)>
             <marko-web-block name=newsletterBlock>
@@ -64,10 +64,10 @@ $ const tagline = site.get("tagline");
             </marko-web-block>
           </if>
         </marko-web-element>
-        <marko-web-element block-name=blockName name="section">
+        <marko-web-element block-name=blockName name="section" attrs={ "aria-label": "Social Media Links" }>
           <theme-social-follow dark=false modifiers=["site-footer"] />
         </marko-web-element>
-        <marko-web-element block-name=blockName name="section">
+        <marko-web-element block-name=blockName name="section" attrs={ "aria-label": "Footer Site Section Navigation"}>
 
           <div class="row">
             $ const navBlockName = "site-footer-nav";
@@ -81,6 +81,7 @@ $ const tagline = site.get("tagline");
                   items=topics
                   reg-enabled=false
                   has-user=false
+                  attrs={ "aria-label": "Site Footer Navigation Topics Section" }
                 />
               </if>
             </marko-web-block>
@@ -94,6 +95,7 @@ $ const tagline = site.get("tagline");
                   items=more
                   reg-enabled=false
                   has-user=false
+                  attrs={ "aria-label": "Site Footer Navigation More Section" }
                 />
               </if>
             </marko-web-block>
@@ -104,7 +106,7 @@ $ const tagline = site.get("tagline");
 
     </marko-web-element>
   </default-theme-site-footer-container>
-  <default-theme-site-footer-container block-name=blockName modifiers=["primary"]>
+  <default-theme-site-footer-container block-name=blockName modifiers=["primary"] attrs={ "aria-label": "Primary Secondary Navigation" }>
     <marko-web-element block-name=blockName name="inner-container">
       $ const corporateSrc = site.get("logos.corporate.src");
       $ const corporateSrcset = site.getAsArray("logos.corporate.srcset");
@@ -121,7 +123,7 @@ $ const tagline = site.get("tagline");
       </if>
 
       $ const footerItems = site.getAsArray("navigation.footer.items");
-      <theme-breadcrumbs modifiers=["site-footer"]>
+      <theme-breadcrumbs modifiers=["site-footer"] aria-label="Site Footer Breadcrumbs">
         <for|item| of=getNavItems({ items: footerItems, hasUser: input.hasUser, regEnabled: input.regEnabled })>
           <@item>
             $ const obj = asObject(item);

diff --git a/packages/marko-web-theme-monorail/scss/_variables.scss b/packages/marko-web-theme-monorail/scss/_variables.scss
@@ -268,7 +268,7 @@ $theme-page-body-line-height-sm: $theme-page-body-line-height;
 $theme-media-footer-font-size: 16px;
 
 $theme-media-footer-line-height: get-line-height($theme-media-footer-font-size, 22px);
-$theme-media-caption-color: #6c6972;
+$theme-media-caption-color: #474747;
 $theme-media-credit-font-size: 14px !default;
 
 // Headings