SAK-44823 - Add title and aria tag to profile dropdown (sakaiproject#…

…8982) * SAK-44823 - Add title and aria tag to profile dropdown * SAK-44823 - Add role=menuitem * SAK-44823 - From Adrian * Updates * SAK-44823 - Testing with Shawn and Chris * SAK-44823 - Switch the toggle in to JavaScript libraries * SAK-44823 - Change which tag gets "aria-expanded" * SAK-44823 - Remove redundant aria-title
bot2012 · Feb 16, 2021 · fa77c69 · fa77c69
1 parent 8e68aad
commit fa77c69
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.more.sites.js b/library/src/morpheus-master/js/src/sakai.morpheus.more.sites.js
@@ -56,6 +56,7 @@ var dhtml_view_sites = function(){
 
     if (modal.hasClass('outscreen') ) {
       $PBJQ('body').toggleClass('active-more-sites');
+      $PBJQ('#viewAllSites').attr('aria-expanded', 'true');
 
       // Align with the bottom of the main header in desktop mode
       var allSitesButton = $PBJQ('.view-all-sites-btn:visible');
@@ -102,6 +103,7 @@ var dhtml_view_sites = function(){
     else {
       // hide the dropdown
       $PBJQ('body').toggleClass('active-more-sites');
+      $PBJQ('#viewAllSites').attr('aria-expanded', 'false');
       $PBJQ('#selectSiteModal').toggleClass('outscreen'); //hide the box
 
       // Restore the button's zIndex so it doesn't hover over other overlays

diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js b/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js
@@ -29,10 +29,11 @@ function toggleUserNav(event) {
 
     // ESC key also closes it
     $PBJQ(document).on('keyup.usernav',userNavEscHandler);
-
+    $PBJQ('.Mrphs-userNav__drop-btn').attr('aria-expanded', 'true');
   } else {
     $PBJQ('.user-dropdown-overlay').remove();
     $PBJQ(document).off('keyup',userNavEscHandler);    
+    $PBJQ('.Mrphs-userNav__drop-btn').attr('aria-expanded', 'false');
   }
 }
 

diff --git a/portal/portal-impl/impl/src/bundle/sitenav.properties b/portal/portal-impl/impl/src/bundle/sitenav.properties
@@ -64,6 +64,7 @@ sit_themeSwitcher = Dark Theme
 sit_themeSwitcherOff = Off
 sit_themeSwitcherOn = On
 sit_profile = Profile
+sit_profile_drop_down=profile menu. Includes option to log out.
 sit_calendar = Calendar
 sit_preferences = Preferences
 sit_connections = My Connections

diff --git a/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/includeLoginNav.vm b/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/includeLoginNav.vm
@@ -16,7 +16,7 @@
 
             #if (${useBullhornAlerts})
             <div class="Mrphs-sitesNav__menuitem portal-bullhorns-buttons">
-                <a id="Mrphs-bullhorn" href="javascript:void(0);" title="${rloader.sit_academic_bullhorn_title}" aria-haspopup="true">
+                <a id="Mrphs-bullhorn" href="javascript:void(0);" title="${rloader.sit_academic_bullhorn_title}" aria-haspopup="true" aria-expanded="false">
                     <span class="icon-sakai--alerts"></span>
                 </a>
             </div>
@@ -60,7 +60,7 @@
 
         #if (${userIsLoggedIn})
             <div class="Mrphs-sitesNav__menuitem view-all-sites-btn">
-                <a href="javascript:void(0);" title="${rloader.sit_allsites}" aria-haspopup="true">
+                <a href="javascript:void(0);" id="viewAllSites" title="${rloader.sit_allsites}" aria-haspopup="true" aria-expanded="false">
                     <i class="fa fa-th all-sites-icon" aria-hidden="true"></i> <span class="all-sites-label">${rloader.sit_worksites}</span>
                 </a>
             </div>
@@ -78,16 +78,24 @@
 
                                     #if (${tabsSites.mrphs_profileToolUrl})
 
+                                        ## https://www.w3.org/WAI/tutorials/menus/flyout/
+                                        ## https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/
+                                        ## https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/links/link-behavior/
                                         <div id="loginUser" class="has-avatar Mrphs-userNav__submenuitem--userlink #if (${site.isCurrentSite}) current-site #end">
-                                            <a href="javascript:void(0);" role="button" aria-haspopup="true" class="Mrphs-userNav__drop-btn Mrphs-userNav__submenuitem--username">
+                                            <a href="javascript:void(0);"
+						title="${loginUserFirstName} ${rloader.sit_profile_drop_down}"
+						aria-haspopup="true" aria-expanded="false" class="Mrphs-userNav__drop-btn Mrphs-userNav__submenuitem--username">
                                                 <span class="Mrphs-userNav__submenuitem--profilepicture" style="background-image:url(/direct/profile/${loginUserId}/image/thumb)"></span>
                                                 <span class="textlink">${loginUserFirstName}</span>
                                             </a>
                                         </div>
 
                                     #else
 
-                                        <a id="loginUser" href="javascript:void(0);" class="Mrphs-userNav__drop-btn no-avatar Mrphs-userNav__submenuitem--userlink #if (${site.isCurrentSite}) current-site #end">
+                                        <a id="loginUser" href="javascript:void(0);"
+					title="${loginUserFirstName} ${rloader.sit_profile_drop_down}"
+					aria-haspopup="true" aria-expanded="false"
+					class="Mrphs-userNav__drop-btn no-avatar Mrphs-userNav__submenuitem--userlink #if (${site.isCurrentSite}) current-site #end">
                                             <span class="Mrphs-userNav__submenuitem--username">${loginUserFirstName}</span>
                                             <span class="Mrphs-userNav__submenuitem--userid">${loginUserDispId}</span>
                                         </a>