SONAR-11685 Make 'Add to favorites' link more accessible

diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css
index ee41f91b2cdc0298385159908a738702b2cfc875..df652e50de1463bba46593403baf97cdae4cd95e 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/links.css
+++ b/server/sonar-web/src/main/js/app/styles/init/links.css
@@ -53,7 +53,7 @@ a:focus {
 }
 
 .link-no-underline {
-  border-bottom: none;
+  border-bottom: none !important;
 }
 
 .link-underline {

diff --git a/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx b/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
index 10865ee16c708282a3bf8a8ab30cd870812a9a11..45a812d5425a20da1d7647aa6a6154e804e61d58 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
+++ b/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import Tooltip from './Tooltip';
+import { ButtonLink } from '../ui/buttons';
 import FavoriteIcon from '../icons-components/FavoriteIcon';
 import { translate } from '../../helpers/l10n';
 
@@ -51,8 +52,7 @@ export default class FavoriteBase extends React.PureComponent<Props, State> {
     this.mounted = false;
   }
 
-  toggleFavorite = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  toggleFavorite = () => {
     if (this.state.favorite) {
       this.removeFavorite();
     } else {
@@ -83,17 +83,19 @@ export default class FavoriteBase extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const tooltip = this.state.favorite
+    const { favorite } = this.state;
+    const tooltip = favorite
       ? translate('favorite.current', this.props.qualifier)
       : translate('favorite.check', this.props.qualifier);
+    const ariaLabel = translate('favorite.action', favorite ? 'remove' : 'add');
     return (
       <Tooltip overlay={tooltip}>
-        <a
-          className={classNames('display-inline-block', 'link-no-underline', this.props.className)}
-          href="#"
+        <ButtonLink
+          aria-label={ariaLabel}
+          className={classNames('favorite-link', 'link-no-underline', this.props.className)}
           onClick={this.toggleFavorite}>
-          <FavoriteIcon favorite={this.state.favorite} />
-        </a>
+          <FavoriteIcon favorite={favorite} />
+        </ButtonLink>
       </Tooltip>
     );
   }

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/FavoriteBase-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/FavoriteBase-test.tsx
index 58041c1189827de1051ceb7f6366d9c44212e548..7368291c8c7dc244a6338f02f7b93e6e0f44cb69 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/FavoriteBase-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/FavoriteBase-test.tsx
@@ -35,14 +35,14 @@ it('should render not favorite', () => {
 it('should add favorite', () => {
   const addFavorite = jest.fn(() => Promise.resolve());
   const favorite = renderFavoriteBase({ favorite: false, addFavorite });
-  click(favorite.find('a'));
+  click(favorite.find('ButtonLink'));
   expect(addFavorite).toBeCalled();
 });
 
 it('should remove favorite', () => {
   const removeFavorite = jest.fn(() => Promise.resolve());
   const favorite = renderFavoriteBase({ favorite: true, removeFavorite });
-  click(favorite.find('a'));
+  click(favorite.find('ButtonLink'));
   expect(removeFavorite).toBeCalled();
 });
 

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/FavoriteBase-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/FavoriteBase-test.tsx.snap
index f24dedb75319babc9a8e9a2b4152de703ef63e8a..22815684de0f6c13f2a61a7bcffd863b811d1fee 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/FavoriteBase-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/FavoriteBase-test.tsx.snap
@@ -4,15 +4,15 @@ exports[`should render favorite 1`] = `
 <Tooltip
   overlay="favorite.current.TRK"
 >
-  <a
-    className="display-inline-block link-no-underline"
-    href="#"
+  <ButtonLink
+    aria-label="favorite.action.remove"
+    className="favorite-link link-no-underline"
     onClick={[Function]}
   >
     <FavoriteIcon
       favorite={true}
     />
-  </a>
+  </ButtonLink>
 </Tooltip>
 `;
 
@@ -20,14 +20,14 @@ exports[`should render not favorite 1`] = `
 <Tooltip
   overlay="favorite.check.TRK"
 >
-  <a
-    className="display-inline-block link-no-underline"
-    href="#"
+  <ButtonLink
+    aria-label="favorite.action.add"
+    className="favorite-link link-no-underline"
     onClick={[Function]}
   >
     <FavoriteIcon
       favorite={false}
     />
-  </a>
+  </ButtonLink>
 </Tooltip>
 `;

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 4fbc0c17990ec6248d97001a58b7f8e8bfc70f6f..43371e873255f16ba911f8ed7d60646207fd18f1 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3173,6 +3173,8 @@ homepage.check=Check to make the current page your homepage
 # FAVORITE
 #
 #------------------------------------------------------------------------------
+favorite.action.add=Add project to favorites
+favorite.action.remove=Remove project from favorites
 favorite.check.TRK=Click to mark this project as favorite.
 favorite.check.VW=Click to mark this portfolio as favorite.
 favorite.check.SVW=Click to mark this sub-ortfolio as favorite.