SONAR-12878 Improve tag list accessibility

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>
   );

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>

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