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

3 files changed, 20 insertions, 18 deletions

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 10865ee16c7..45a812d5425 100644
--- 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 58041c11898..7368291c8c7 100644
--- 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 f24dedb7531..22815684de0 100644
--- 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>
 `;