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 239e409f66736d4201320402ca220f8eeb5ba0d9..188e08198920d37d78eda4df501d4da5f31573fd 100644 (file)
--- 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 4a09b986130cc5de1e4428a32541901cbe994ad4..88c20d726e1315fe3c7d46d4b3aff624aa614419 100644 (file)
--- 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 87966fac4a97ea7c274c50ed9ed49095d6de9dd4..331c0984a358186a9ba7c6c0ed77a6b688deff6a 100644 (file)
--- 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