add more aria controls

myuw-profile.html

@@ -111,6 +111,10 @@
         visibility: visible;
     }
 
+    #myuw-profile-nav:focus {
+        outline: none;
+    }
+
     #myuw-profile-nav p {
         padding: 0;
         margin: 0;
@@ -119,7 +123,7 @@
     #myuw-profile-nav a,
     #myuw-profile-nav p,
     ::slotted(a),
-    ::slotted(p){
+    ::slotted(p) {
         transition: all .3s ease;
         position: relative;
         font-size: 15px;
@@ -130,6 +134,7 @@
         background-color: #f5f5f5;
         border-bottom: 1px solid #e5e5e5;
         user-select: none;
+        outline: none;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
@@ -146,23 +151,27 @@
         justify-content: flex-start;
     }
 
-    #myuw-profile-nav a:first-child,
-    #myuw-profile-nav p:first-child {
+    #myuw-profile-nav li:first-child a,
+    #myuw-profile-nav li:first-child p {
         font-weight: 600;
         text-transform: capitalize;
         background-color: rgb(255,255,255);
         border-bottom: none;
     }
 
-    #myuw-profile-nav a:first-child:hover,
-    #myuw-profile-nav p:first-child:hover {
+    #myuw-profile-nav li:first-child a:hover,
+    #myuw-profile-nav li:first-child p:hover {
         background-color: rgb(255,255,255);
     }
 
     #myuw-profile-nav a:hover,
+    #myuw-profile-nav a:focus,
     #myuw-profile-nav p:hover,
+    #myuw-profile-nav p:focus,
     ::slotted(a:hover),
-    ::slotted(p:hover)  {
+    ::slotted(a:focus),
+    ::slotted(p:hover),
+    ::slotted(p:focus)  {
         background-color: #ececec;
     }
     </style>
@@ -170,16 +179,28 @@
     <a href="#" id="myuw-profile-login" class="hidden">Login</a>
 
     <div id="myuw-profile-wrapper" class="hidden">
-            <button id="myuw-profile-circle" aria-label="show profile menu">
-                <p id="myuw-profile-circle-initial">B</p>
-            </button>
-
-            <div id="myuw-profile-nav" class="aria-hidden">
+        <button id="myuw-profile-circle" 
+            aria-label="profile menu" 
+            aria-haspopup="true" 
+            aria-controls="myuw-profile-nav" 
+            aria-expanded="false">
+            <p id="myuw-profile-circle-initial">B</p>
+        </button>
+
+        <ul id="myuw-profile-nav" 
+            role="menu" 
+            tabindex="-1" 
+            aria-labelledby="myuw-profile-circle">
+            <li role="menuitem">
                 <p id="myuw-profile-nav-user">Bucky</p>
+            </li>
+            <li role="menuitem">
                 <slot name="nav-item"></slot>
-                <a href="#">Settings</a>
+            </li>
+            <li role="menuitem">
                 <a id="myuw-profile-logout" href="#">Logout</a>
-            </div>
+            </li>
+        </ul>
     </div>
 </template>
 <script>
@@ -264,7 +285,8 @@ class MyUWProfile extends HTMLElement {
             let nav = this.shadowRoot.getElementById('myuw-profile-nav');
 
             if (nav.classList.contains('visible')) {
-                nav.classList.remove('visible')
+                nav.classList.remove('visible');
+                this.shadowRoot.getElementById('myuw-profile-circle').setAttribute('aria-expanded', 'false');
             }
         });
 
@@ -288,8 +310,19 @@ class MyUWProfile extends HTMLElement {
             and the menu will never open.
         */
         this.shadowRoot.getElementById('myuw-profile-circle').addEventListener('click', e => {
+            let nav = this.shadowRoot.getElementById('myuw-profile-nav');
+            let menuButton = this.shadowRoot.getElementById('myuw-profile-circle');
             e.stopPropagation();
-            this.shadowRoot.getElementById('myuw-profile-nav').classList.toggle('visible');
+            nav.classList.toggle('visible');
+
+            // Focus the menu upon opening, blur on close
+            if (nav.classList.contains('visible')) {
+                nav.focus();
+                menuButton.setAttribute('aria-expanded', 'true');
+            } else {
+                nav.blur();
+                menuButton.setAttribute('aria-expanded', 'false');
+            }
         });
 
         // Update the component to use the new attributes
@@ -333,7 +366,7 @@ class MyUWProfile extends HTMLElement {
         If not, the login button will show.
     */
     componentReady() {
-        if(this.user){
+        if (this.user) {
             // Add user's name to first menu item
             this.shadowRoot.getElementById('myuw-profile-nav-user').innerHTML = this.user.firstName;
             // Change the letter in the profile circle