From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Mon, 23 Dec 2019 12:16:49 +0000 (+0100)
Subject: SONAR-12878 Improve tag list accessibility
X-Git-Tag: 8.2.0.32929~242
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=dbd57ddfa8ca3eab4814b66c49ca3552727cbc61;p=sonarqube.git

SONAR-12878 Improve tag list accessibility
---

diff --git a/server/sonar-web/src/main/js/components/tags/TagsList.tsx b/server/sonar-web/src/main/js/components/tags/TagsList.tsx
index 239e409f667..188e0819892 100644
--- a/server/sonar-web/src/main/js/components/tags/TagsList.tsx
+++ b/server/sonar-web/src/main/js/components/tags/TagsList.tsx
@@ -21,6 +21,7 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
 import TagsIcon from 'sonar-ui-common/components/icons/TagsIcon';
+import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import './TagsList.css';
 
 interface Props {
@@ -31,9 +32,13 @@ interface Props {
 
 export default function TagsList({ allowUpdate = false, className, tags }: Props) {
   return (
-    <span className={classNames('tags-list', className)} title={tags.join(', ')}>
+    <span
+      aria-label={translateWithParameters('tags_list_x', tags.join(', '))}
+      className={classNames('tags-list', className)}>
       <TagsIcon className="text-middle" />
-      <span className="text-ellipsis text-middle">{tags.join(', ')}</span>
+      <span aria-hidden={true} className="text-ellipsis text-middle" title={tags.join(', ')}>
+        {tags.join(', ')}
+      </span>
       {allowUpdate && <DropdownIcon className="text-middle" />}
     </span>
   );
diff --git a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap
index 4a09b986130..88c20d726e1 100644
--- a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap
@@ -2,14 +2,16 @@
 
 exports[`should render with a caret on the right if update is allowed 1`] = `
 <span
+  aria-label="tags_list_x.foo, bar"
   className="tags-list"
-  title="foo, bar"
 >
   <TagsIcon
     className="text-middle"
   />
   <span
+    aria-hidden={true}
     className="text-ellipsis text-middle"
+    title="foo, bar"
   >
     foo, bar
   </span>
@@ -21,14 +23,16 @@ exports[`should render with a caret on the right if update is allowed 1`] = `
 
 exports[`should render with a list of tag 1`] = `
 <span
+  aria-label="tags_list_x.foo, bar"
   className="tags-list"
-  title="foo, bar"
 >
   <TagsIcon
     className="text-middle"
   />
   <span
+    aria-hidden={true}
     className="text-ellipsis text-middle"
+    title="foo, bar"
   >
     foo, bar
   </span>
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 87966fac4a9..331c0984a35 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -181,6 +181,7 @@ status=Status
 support=Support
 table=Table
 tags=Tags
+tags_list_x=Tags list: {0}
 technical_debt=Technical Debt
 template=Template
 title=Title