Merge pull request #2222 from rhamilto/masthead-dropdown-fixes

Fix bug where masthead dropdowns have incorrect aria-label
openshift · Jul 31, 2019 · 0956923 · 0956923
2 parents 5f2a1af + 9bc47c2
commit 0956923
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/frontend/public/components/_masthead.scss b/frontend/public/components/_masthead.scss
@@ -4,14 +4,17 @@
 
 .co-username {
   font-size: $pf-header-icon-fontsize; // for cases where there is no user menu
-  max-width: 190px !important; // PF4 does not limit username length (upstream bug)
+  max-width: 140px !important; // PF4 does not limit username length (upstream bug)
   overflow-x: hidden;
   padding: 0 8px; // so sizing is consistent with .pf-c-dropdown__toggle
   text-overflow: ellipsis;
-  @media(min-width: 820px) {
+  @media(min-width: 855px) {
     max-width: 225px !important;
   }
   @media(min-width: $screen-md-min) {
+    max-width: 275px !important;
+  }
+  @media(min-width: $screen-lg-min) {
     max-width: 300px !important;
   }
 }

diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
@@ -397,6 +397,7 @@ class MastheadToolbar_ extends React.Component {
 
       return (
         <ApplicationLauncher
+          aria-label="Utility menu"
           className="co-app-launcher"
           onSelect={this._onKebabDropdownSelect}
           onToggle={this._onKebabDropdownToggle}
@@ -422,8 +423,9 @@ class MastheadToolbar_ extends React.Component {
 
     return (
       <ApplicationLauncher
+        aria-label="User menu"
         data-test="user-dropdown"
-        className="co-app-launcher"
+        className="co-app-launcher co-user-menu"
         onSelect={this._onUserDropdownSelect}
         onToggle={this._onUserDropdownToggle}
         isOpen={isUserDropdownOpen}
@@ -472,6 +474,7 @@ class MastheadToolbar_ extends React.Component {
             </ToolbarItem>}
             <ToolbarItem>
               <ApplicationLauncher
+                aria-label="Help menu"
                 className="co-app-launcher"
                 data-test="help-dropdown-toggle"
                 onSelect={this._onHelpDropdownSelect}
@@ -487,7 +490,7 @@ class MastheadToolbar_ extends React.Component {
           <ToolbarGroup>
             {/* mobile -- (system status button) */}
             <SystemStatusButton statuspageData={statuspageData} className="visible-xs-block" />
-            {/* mobile -- kebab dropdown [(cluster manager |) documentation, about (| logout)] */}
+            {/* mobile -- kebab dropdown [(application launcher |) documentation, about (| logout)] */}
             <ToolbarItem className="visible-xs-block">{this._renderMenu(true)}</ToolbarItem>
             {/* desktop -- (user dropdown [logout]) */}
             <ToolbarItem className="hidden-xs">{this._renderMenu(false)}</ToolbarItem>

diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
@@ -106,6 +106,11 @@ kbd {
     padding-top: 8px !important;
   }
 }
+// Temp fix to adjust user menu dropdown toggle padding until it can be converted back to a standard dropdown
+.co-user-menu .pf-c-app-launcher__toggle {
+  padding-left: 0;
+  padding-right: 0;
+}
 
 .pf-c-button--align-right {
   margin-left: auto !important;