Fix a11y issue with dropdown menu in main nav #246

index.html

@@ -27,6 +27,7 @@
   <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="application-name" content="HyperPress by Logical Phase">
+  <meta name="google-site-verification" content="Zb2APosYVMt6B818VA1SO59aUzzmoR70Ug7IKZWCb8Y" />
 
   <!-- Add to homescreen for Safari on iOS -->
   <meta name="apple-mobile-web-app-capable" content="yes">

package.json

@@ -27,6 +27,7 @@
     "@power-elements/lazy-image": "2.2.0",
     "date-fns": "2.10.0",
     "lit-element": "2.2.1",
+    "mega-material": "^1.0.0-alpha.2",
     "pwa-helpers": "0.9.1",
     "redux": "4.0.5",
     "redux-thunk": "2.3.0",

src/components/lp-about.js

@@ -124,7 +124,7 @@ class About extends PageViewElement {
                 <header class="grid__column is-7 is-6__large is-1__large--offset">
                   <div class="fade-in content-set">
                     <h1 class="section-header__eyebrow eyebrow">
-                      Mission Critical Web Services
+                      Mission Critical WordPress Services
                     </h1>
                     <h2 class="display3">About Logical Phase</h2>
                     <p class="headline4 why-google__intro-text">
@@ -168,7 +168,7 @@ class About extends PageViewElement {
                       class="headline3 element-align"
                       id="engaging-experiences-regardless-screen-size"
                     >
-                      Think Of Me As Your On-Call WordPress Engineer.
+                      Your On-Call WordPress Engineer.
                     </h3>
                     <p>
                       I've been involved with WordPress and managed hosting for over fourteen years. During that period, I've assembled a lot of knowledge about delivering web pages generated using WordPress. I founded what one client called the "Ferrari of managed WordPress hosting" services. I've created more than three dozen web sites and web applications, the latest you're looking at right now.

src/components/lp-app.js

@@ -3,7 +3,8 @@ import { HP_HOST } from './config';
 import { LitElement, html, css } from 'lit-element';
 import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings';
 
-import { menuIcon } from './lp-icons.js';
+import { menuIcon, Twitter, Facebook, Linkedin, Blogger, Github } from './lp-icons.js';
+
 import './snack-bar.js';
 import './search-imput-decorator';
 import './speech-mic.js';
@@ -134,9 +135,9 @@ class App extends connect(store)(LitElement) {
 
         .cta-header:focus-within {
           background-color: var(--app-reverse-text-color);
-          -webkit-box-shadow: 0 0 5px rgba(164, 52, 183, 0.5);
-          -moz-box-shadow: 0 0 5px rgba(164, 52, 183, 0.5);
-          box-shadow: 0 0 5px rgba(164, 52, 183, 0.5);
+          -webkit-box-shadow: 0 0 5px rgba(28, 64, 26, 0.9);
+          -moz-box-shadow: 0 0 5px rgba(28, 64, 26, 0.9);
+          box-shadow: 0 0 5px rgba(28, 64, 26, 0.9);
         }
 
         .search-btn {
@@ -145,10 +146,10 @@ class App extends connect(store)(LitElement) {
           fill: var(--app-primary-icon-color);
           cursor: pointer;
           width: 34px;
-          height: 34px;
+          height: 33px;
           position: absolute;
           top: 24px;
-          padding: 5px;
+          padding: 4px 5px 4px 5px;
         }
 
         .search-btn:hover {
@@ -379,6 +380,7 @@ class App extends connect(store)(LitElement) {
         @media (min-width: 460px) {
           #dropdownMenuButton {
             margin-right: 3px;
+            padding-top: 13px;
           }
 
           .toolbar-list {
@@ -399,6 +401,45 @@ class App extends connect(store)(LitElement) {
             border: none;
           }
 
+          .small-print .social-icon {
+            padding-left: 0px;
+          }
+
+          .get-social {
+            font-size: 16px;
+            font-weight: 400;
+          }
+          a.social-icon {
+            margin-right: 0px;
+            margin-left: 8px;
+          }
+          .social-icon svg {
+            border:1px solid var(--app-primary-text-thin-color);
+            border-radius: 5px;
+            padding: 3px;
+            margin-top: 8px;
+          }
+          .social-icon {
+            fill: var(--app-primary-text-thin-color);
+            padding-left: 0;
+            cursor: pointer;
+          }
+          .gplus-icon:hover {
+            fill: #db4437;
+          }
+          .blogger-icon:hover {
+            fill: #fb8f3d;
+          }
+          .twitter-icon:hover {
+            fill: #1da1f2;
+          }
+          .facebook-icon:hover {
+            fill: #3b5998;
+          }
+          .linkedin-icon:hover {
+            fill: #007bb5;
+          }
+
           input[type='search']::placeholder {
             font-size: 14px;
           }
@@ -499,23 +540,22 @@ class App extends connect(store)(LitElement) {
 
   render() {
     const {
-      appTitle,
       _page,
       _offline,
       _drawerOpened,
       _snackbarOpened,
-      _searchAction,
       _searchTerms,
     } = this;
 
     const hideInput = !_page;
     // True to make the search input aligns at the top inside the header instead of inside the main content.
     const inputAtTop = 'ontouchstart' in window || !_page;
     const searchTerms = _page ? '' : _searchTerms;
+    const appTitle = "Digital Experience Solutions by Logical Phase";
 
     updateMetadata({
-      title: `Digital Experience Solutions by Logical`,
-      description: `Combining powerful digital cloud technologies that keep you ahead of the competition`,
+      title: `Digital Experience Solutions by Logical Phase`,
+      description: `Combining powerful cloud technologies that keep you ahead of the competition`,
       image: `https://storage.googleapis.com/logicalphase.com/assets/9a6ed0c3-bg-homepage-container.jpg`,
     });
 
@@ -524,10 +564,11 @@ class App extends connect(store)(LitElement) {
 
     return html`
       <!-- Header -->
+      <header class="header-wrapper">
       <app-header-layout id="appheaderlayout" has-scrolling-region>
         <app-header slot="header" condenses reveals effects="waterfall">
           <app-toolbar class="masthead">
-            <a href="/" alt="${appTitle} home">
+            <a href="/">
               <img
                 rel="dns-prefetch"
                 class="brand-site-logo"
@@ -570,9 +611,13 @@ class App extends connect(store)(LitElement) {
               <div class="main-navigation">
                 <a ?selected="${_page === 'home'}" href="/">Home</a>
                 <a ?selected="${_page === 'about'}" href="/about">About</a>
-                <a
+                <button
                   id="dropdownMenuButton"
                   class="toolbar-platform-chooser__button"
+                  role="menu"
+                  aria-haspopup="true"
+                  aria-owns="dropdownListElement"
+                  aria-controls="dropdownListElement"
                   @click="${this._toggleDropdownMenu}"
                 >
                   <span class="toolbar-platform-chooser__label">Solutions</span>
@@ -586,19 +631,35 @@ class App extends connect(store)(LitElement) {
                     <title>Open drop down menu</title>
                     <path d="M7 10l5 5 5-5z"></path>
                   </svg>
-                </a>
+                </button>
                 <a ?selected="${_page === 'blog'}" href="/blog">Blog</a>
                 <a ?selected="${_page === 'contact'}" href="/contact">Contact</a>
-                <a ?selected="${_page === 'support'}" href="/support" class="login-nav-item"
-                  >Support</a
-                >
+                <div class="slide-icons slide-left login-nav-item">
+                  <span class="get-social">Get social</span>
+                  <a
+                    class="social-icon twitter-icon"
+                    href="https://twitter.com/logicalphase/"
+                    >${Twitter}</a
+                  >
+                  <a
+                    class="social-icon linkedin-icon"
+                    href="https://www.linkedin.com/in/john-t-teague/"
+                    >${Linkedin}</a
+                  >
+                  <a
+                    class="social-icon github-icon"
+                    href="https://github.com/logicalphase"
+                    >${Github}</a
+                  >
+                </div>
               </div>
               <div
                 id="dropdownListElement"
                 class="main-navigation dropdown-menu hide"
                 data-target="slide-content"
+                role="group"
+                aria-labelledby="dropdownMenuButton"
                 aria-hidden="true"
-
               >
                 <a
                   class="dropdown-item submenu"
@@ -632,6 +693,7 @@ class App extends connect(store)(LitElement) {
           </app-toolbar>
         </app-header>
       </app-header-layout>
+    </header>
 
       <!-- Drawer content -->
       <app-drawer
@@ -662,6 +724,7 @@ class App extends connect(store)(LitElement) {
                 class="search-btn"
                 title="Search"
                 @click="${() => this._getValueFromSearchFieldDrawer()}"
+                tabindex="-1"
               >
                 ${SearchIcon}
               </button>
@@ -703,22 +766,22 @@ class App extends connect(store)(LitElement) {
 
       <!-- Footer content -->
       <footer title="footer-links" class="footer-linkboxes nocontent footer-linkboxes-all-backup">
-        <nav aria-label="Footer Links" class="full-site-width"></nav>
-      </footer>
-      <footer title="footer-navigation" class="utility-footer">
-        <nav aria-label="Policy Links" class="utility-footer-nav nav full-site-width">
-          <div class="utility-footer-nav-left">
-            <span class="footer-links">
-              <a class="utility-footer-link gc-analytics-event" href="/terms">Site Terms</a>
-              <a class="utility-footer-link gc-analytics-event" href="/privacy">Privacy</a>
-            </span>
-          </div>
-          <div class="utility-footer-nav-right">
-            <span class="footer-links">
-              <span class="utility-footer-link gc-analytics-event">Copyright © 2019 Logical Phase. All Rights Reserved</span>
-            </span>
-          </div>
-        </nav>
+        <nav aria-label="footer" class="full-site-width"></nav>
+        <div title="footer-navigation" class="utility-footer">
+          <nav aria-label="policy" class="utility-footer-nav nav full-site-width">
+            <div class="utility-footer-nav-left">
+              <span class="footer-links">
+                <a class="utility-footer-link gc-analytics-event" href="/terms">Site Terms</a>
+                <a class="utility-footer-link gc-analytics-event" href="/privacy">Privacy</a>
+              </span>
+            </div>
+            <div class="utility-footer-nav-right">
+              <span class="footer-links">
+                <span class="utility-footer-link gc-analytics-event">Copyright © 2019 Logical Phase. All Rights Reserved</span>
+              </span>
+            </div>
+          </nav>
+        </div>
       </footer>
 
       <snack-bar ?active="${_snackbarOpened}">

src/components/lp-blog.js

@@ -187,7 +187,7 @@ class Blog extends connect(store)(PageViewElement) {
             background: var(--app-reverse-text-color) url('/images/header/design-header-opt.svg')
               no-repeat;
             background-size: 240px;
-            background-position: 90% 30px;
+            background-position: 88% 30px;
           }
           .hero .content-set {
             margin: 50px 0 20px 0;
@@ -254,7 +254,7 @@ class Blog extends connect(store)(PageViewElement) {
                 <header class="grid__column is-7 is-6__large is-1__large--offset">
                   <div class="fade-in content-set">
                     <h1 class="section-header__eyebrow eyebrow">Resources for WordPress</h1>
-                    <h2 class="display3">Logical Learning Center</h2>
+                    <h2 class="display3">Logical Blog</h2>
                     <p class="headline5 why-hyperpress__intro-text">
                       My cumulative knowledge center focused on WordPress site performance, security, and cloud hosting.
                     </p>

src/components/lp-home.js

@@ -329,9 +329,9 @@ class Home extends PageViewElement {
               <div class="grid__column is-7 is-6__large is-1__large--offset">
                 <header class="grid__column is-7 is-6__large is-1__large--offset">
                   <div class="content-set">
-                    <h1 class="section-header__eyebrow eyebrow">I make WordPress extraordinary</h1>
+                    <h1 class="section-header__eyebrow eyebrow">Sustainable WordPress Services</h1>
                     <h2 class="display3">
-                      Mission Critical WordPress Solutions for Incredible Brands.
+                      Unbeatable Cloud Solutions Powered by Renewable Energy.
                     </h2>
                     <p class="headline4 why-google__intro-text">
                       Hyperfast. Functionally superior. Fiercely defended.
@@ -567,6 +567,7 @@ class Home extends PageViewElement {
                       xml:space="preserve"
                       loading="lazy"
                     >
+                      <title>Graph showing increase in objectives.</title>
                       <g id="graph-8">
                         <polygon
                           style="fill:#1C401A;"
@@ -925,7 +926,7 @@ class Home extends PageViewElement {
                   height="120"
                   width="302"
                   loading="lazy"
-                  alt="Univercity of California at Berkeley"
+                  alt="University of California at Berkeley"
                 />
               </picture>
               <picture>

src/components/lp-icons.js

@@ -104,6 +104,14 @@ export const Linkedin = html`
     />
   </svg>
 `;
+export const Github = html`
+  <svg height="22" width="22" viewBox="0 0 24 24">
+    <title id="iconGithub" lang="en">Github</title>
+    <path 
+      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    />
+  </svg>
+`;
 export const Mail = html`
   <svg height="22" width="22" viewBox="0 0 24 24">
     <title id="iconEMail" lang="en">Email</title>

src/components/lp-social.js

@@ -100,7 +100,7 @@ class Social extends LitElement {
           >
           <span
             class="social-icon blogger-icon"
-            .link=${`https://www.facebook.com/sharer.php?u=https://${WP_HOST}/article/${slug}/`}
+            .link=${`https://www.blogger.com/blog-this.g?u=https://${WP_HOST}/article/${slug}/`}
             @click=${e => this._getDataHref(e)}
             >${Blogger}</span
           >

src/components/speech-mic.js

@@ -90,7 +90,7 @@ class SpeechMic extends LitElement {
       <div class="ring1"></div>
       <div class="ring2"></div>
       <button title="Search by voice" @click="${() => this.toggle()}">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#4285F4" d="M12 15c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v7c0 1.66 1.34 3 3 3z"/><path fill="#34A853" d="M11 18.92h2V22h-2z"/><path fill="#F4B400" d="M7 12H5c0 1.93.78 3.68 2.05 4.95l1.41-1.41C7.56 14.63 7 13.38 7 12z"/><path fill="#EA4335" d="M12 17c-1.38 0-2.63-.56-3.54-1.47l-1.41 1.41A6.99 6.99 0 0 0 12.01 19c3.87 0 6.98-3.14 6.98-7h-2c0 2.76-2.23 5-4.99 5z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><title>Voice search microphone.</title><path fill="none" d="M0 0h24v24H0z"/><path fill="#4285F4" d="M12 15c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v7c0 1.66 1.34 3 3 3z"/><path fill="#34A853" d="M11 18.92h2V22h-2z"/><path fill="#F4B400" d="M7 12H5c0 1.93.78 3.68 2.05 4.95l1.41-1.41C7.56 14.63 7 13.38 7 12z"/><path fill="#EA4335" d="M12 17c-1.38 0-2.63-.56-3.54-1.47l-1.41 1.41A6.99 6.99 0 0 0 12.01 19c3.87 0 6.98-3.14 6.98-7h-2c0 2.76-2.23 5-4.99 5z"/></svg>
      </button>
     `;
   }