diff --git a/myuw-profile.html b/myuw-profile.html index 821b7a4f6ae06b808e88b71b825f55b789d66945..55da9d95a5d962083dddc8c30407d022af9ecb50 100644 --- a/myuw-profile.html +++ b/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