From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Wed, 10 Aug 2022 12:30:51 +0000 (+0200)
Subject: SONAR-16703 [891726] Function cannot be performed by keyboard alone
X-Git-Tag: 9.6.0.59041~5
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=05b382991b08931bac6c3120d8c7e1b9f892027b;p=sonarqube.git

SONAR-16703 [891726] Function cannot be performed by keyboard alone
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Menu.css b/server/sonar-web/src/main/js/app/components/nav/component/Menu.css
index 5e891d30649..2602439afa4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/Menu.css
+++ b/server/sonar-web/src/main/js/app/components/nav/component/Menu.css
@@ -17,17 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.navbar-tabs > li > a.menu-button {
-  color: var(--darkBlue);
+.navbar-tabs > li > .menu-button {
+  color: var(--darkBlue) !important;
 }
 
-.navbar-tabs > li > a.menu-button:hover {
-  color: var(--blue);
-  border-bottom-color: transparent;
+.navbar-tabs > li > .menu-button:hover {
+  color: var(--blue) !important;
+  border-bottom-color: transparent !important;
 }
 
-.navbar-tabs > li > a.disabled-link,
-.navbar-tabs > li > a.disabled-link:hover {
+.navbar-tabs > li > .disabled-link,
+.navbar-tabs > li > .disabled-link:hover {
   color: var(--gray71);
   cursor: default;
   border-bottom-color: transparent;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
index 48cef3e1470..a01609d78a8 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx
@@ -20,6 +20,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
+import { ButtonLink } from '../../../../components/controls/buttons';
 import Dropdown from '../../../../components/controls/Dropdown';
 import Tooltip from '../../../../components/controls/Tooltip';
 import BulletListIcon from '../../../../components/icons/BulletListIcon';
@@ -65,15 +66,15 @@ interface Props {
 type Query = BranchParameters & { id: string };
 
 export class Menu extends React.PureComponent<Props> {
-  projectInfoLink = React.createRef<HTMLAnchorElement>();
+  projectInfoLink: HTMLElement | null = null;
 
   componentDidUpdate(prevProps: Props) {
     if (
       prevProps.projectInfoDisplayed &&
       !this.props.projectInfoDisplayed &&
-      this.projectInfoLink.current
+      this.projectInfoLink
     ) {
-      this.projectInfoLink.current.focus();
+      this.projectInfoLink.focus();
     }
   }
 
@@ -302,19 +303,17 @@ export class Menu extends React.PureComponent<Props> {
         overlay={<ul className="menu">{adminLinks}</ul>}
         tagName="li">
         {({ onToggleClick, open }) => (
-          <a
+          <ButtonLink
             aria-expanded={open}
             aria-haspopup="menu"
-            role="button"
             className={classNames('dropdown-toggle', { active: isSettingsActive || open })}
-            href="#"
             id="component-navigation-admin"
             onClick={onToggleClick}>
             {hasMessage('layout.settings', component.qualifier)
               ? translate('layout.settings', component.qualifier)
               : translate('layout.settings')}
             <DropdownIcon className="little-spacer-left" />
-          </a>
+          </ButtonLink>
         )}
       </Dropdown>
     );
@@ -360,20 +359,15 @@ export class Menu extends React.PureComponent<Props> {
     return (
       (isProject || isApplication) && (
         <li>
-          <a
+          <ButtonLink
             className="menu-button"
-            onClick={(e: React.SyntheticEvent<HTMLAnchorElement>) => {
-              e.preventDefault();
-              e.currentTarget.blur();
-              this.props.onToggleProjectInfo();
-            }}
-            href="#"
-            role="button"
-            tabIndex={0}
-            ref={this.projectInfoLink}>
+            onClick={this.props.onToggleProjectInfo}
+            innerRef={node => {
+              this.projectInfoLink = node;
+            }}>
             <BulletListIcon className="little-spacer-right" />
             {label}
-          </a>
+          </ButtonLink>
         </li>
       )
     );
@@ -610,17 +604,15 @@ export class Menu extends React.PureComponent<Props> {
         }
         tagName="li">
         {({ onToggleClick, open }) => (
-          <a
+          <ButtonLink
             aria-expanded={open}
             aria-haspopup="menu"
-            role="button"
             className={classNames('dropdown-toggle', { active: open })}
-            href="#"
             id="component-navigation-more"
             onClick={onToggleClick}>
             {translate('more')}
             <DropdownIcon className="little-spacer-left" />
-          </a>
+          </ButtonLink>
         )}
       </Dropdown>
     );
diff --git a/server/sonar-web/src/main/js/components/ui/NavBarTabs.css b/server/sonar-web/src/main/js/components/ui/NavBarTabs.css
index 49bceb0df47..91e00f53a16 100644
--- a/server/sonar-web/src/main/js/components/ui/NavBarTabs.css
+++ b/server/sonar-web/src/main/js/components/ui/NavBarTabs.css
@@ -29,7 +29,8 @@
   margin-left: 20px;
 }
 
-.navbar-tabs > li > a {
+.navbar-tabs > li > a,
+.navbar-tabs > li > button.button-link {
   display: block;
   height: var(--controlHeight);
   line-height: 16px;
@@ -42,6 +43,9 @@
 
 .navbar-tabs > li > a.active,
 .navbar-tabs > li > a:hover,
-.navbar-tabs > li > a:focus {
+.navbar-tabs > li > a:focus,
+.navbar-tabs > li > button.button-link.active,
+.navbar-tabs > li > button.button-link:hover,
+.navbar-tabs > li > button.button-link:focus {
   border-bottom-color: var(--blue);
 }