SONAR-16731 [891605] State: Selected state of the element is missing or incorrect

4 files changed, 57 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/filters/Filter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/Filter.tsx
index 8ed53ef69e8..e4961f26995 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/Filter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/Filter.tsx
@@ -146,7 +146,9 @@ export default class Filter extends React.PureComponent<Props> {
         type="button"
         tabIndex={0}
         key={option}
-        onClick={this.handleClick}>
+        onClick={this.handleClick}
+        role="checkbox"
+        aria-checked={this.isSelected(option) || isUnderSelectedOption}>
         <span className="facet-name">
           {this.props.renderOption(option, this.isSelected(option) || isUnderSelectedOption)}
         </span>
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
index 43d1c0ae347..e45056ac4a0 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
@@ -9,11 +9,13 @@ exports[`highlights under 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -27,11 +29,13 @@ exports[`highlights under 1`] = `
       className="search-navigator-facet-highlight-under-container"
     >
       <button
+        aria-checked={false}
         aria-label="2"
         className="facet search-navigator-facet projects-facet button-link"
         data-key={2}
         key="2"
         onClick={[Function]}
+        role="checkbox"
         tabIndex={0}
         type="button"
       >
@@ -42,11 +46,13 @@ exports[`highlights under 1`] = `
         </span>
       </button>
       <button
+        aria-checked={false}
         aria-label="3"
         className="facet search-navigator-facet projects-facet button-link"
         data-key={3}
         key="3"
         onClick={[Function]}
+        role="checkbox"
         tabIndex={0}
         type="button"
       >
@@ -70,11 +76,13 @@ exports[`hightlights under selected 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -88,11 +96,13 @@ exports[`hightlights under selected 1`] = `
       className="search-navigator-facet-highlight-under-container"
     >
       <button
+        aria-checked={true}
         aria-label="2"
         className="facet search-navigator-facet projects-facet button-link active"
         data-key={2}
         key="2"
         onClick={[Function]}
+        role="checkbox"
         tabIndex={0}
         type="button"
       >
@@ -103,11 +113,13 @@ exports[`hightlights under selected 1`] = `
         </span>
       </button>
       <button
+        aria-checked={true}
         aria-label="3"
         className="facet search-navigator-facet projects-facet button-link"
         data-key={3}
         key="3"
         onClick={[Function]}
+        role="checkbox"
         tabIndex={0}
         type="button"
       >
@@ -131,11 +143,13 @@ exports[`renders 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -146,11 +160,13 @@ exports[`renders 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="2"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={2}
       key="2"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -161,11 +177,13 @@ exports[`renders 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="3"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={3}
       key="3"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -188,11 +206,13 @@ exports[`renders facet bar chart 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="a"
       className="facet search-navigator-facet projects-facet button-link"
       data-key="a"
       key="a"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -220,11 +240,13 @@ exports[`renders facet bar chart 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="b"
       className="facet search-navigator-facet projects-facet button-link"
       data-key="b"
       key="b"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -252,11 +274,13 @@ exports[`renders facet bar chart 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="c"
       className="facet search-navigator-facet projects-facet button-link"
       data-key="c"
       key="c"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -297,11 +321,13 @@ exports[`renders header and footer 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -312,11 +338,13 @@ exports[`renders header and footer 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="2"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={2}
       key="2"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -327,11 +355,13 @@ exports[`renders header and footer 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="3"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={3}
       key="3"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -355,11 +385,13 @@ exports[`renders multiple selected 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={true}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -370,11 +402,13 @@ exports[`renders multiple selected 1`] = `
       </span>
     </button>
     <button
+      aria-checked={true}
       aria-label="2"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key={2}
       key="2"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -385,11 +419,13 @@ exports[`renders multiple selected 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="3"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={3}
       key="3"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -425,11 +461,13 @@ exports[`renders selected 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={false}
       aria-label="1"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={1}
       key="1"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -440,11 +478,13 @@ exports[`renders selected 1`] = `
       </span>
     </button>
     <button
+      aria-checked={true}
       aria-label="2"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key={2}
       key="2"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -455,11 +495,13 @@ exports[`renders selected 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="3"
       className="facet search-navigator-facet projects-facet button-link"
       data-key={3}
       key="3"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
index 5909a5b3841..c5301bbcb24 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
@@ -76,11 +76,13 @@ exports[`should render the languages facet with the selected languages 2`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={true}
       aria-label="projects.facets.label_text_x.projects.facets.languages.Java"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key="java"
       key="java"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -104,11 +106,13 @@ exports[`should render the languages facet with the selected languages 2`] = `
       </span>
     </button>
     <button
+      aria-checked={true}
       aria-label="projects.facets.label_text_x.projects.facets.languages.C#"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key="cs"
       key="cs"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -132,11 +136,13 @@ exports[`should render the languages facet with the selected languages 2`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="projects.facets.label_text_x.projects.facets.languages.JavaScript"
       className="facet search-navigator-facet projects-facet button-link"
       data-key="js"
       key="js"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
index f9f5a9b4f3e..94c5ca062ed 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
@@ -161,11 +161,13 @@ exports[`should render the tags facet with the selected tags 2`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <button
+      aria-checked={true}
       aria-label="projects.facets.label_text_x.projects.facets.tags.lang"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key="lang"
       key="lang"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -183,11 +185,13 @@ exports[`should render the tags facet with the selected tags 2`] = `
       </span>
     </button>
     <button
+      aria-checked={true}
       aria-label="projects.facets.label_text_x.projects.facets.tags.sonar"
       className="facet search-navigator-facet projects-facet button-link active"
       data-key="sonar"
       key="sonar"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >
@@ -205,11 +209,13 @@ exports[`should render the tags facet with the selected tags 2`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="projects.facets.label_text_x.projects.facets.tags.csharp"
       className="facet search-navigator-facet projects-facet button-link"
       data-key="csharp"
       key="csharp"
       onClick={[Function]}
+      role="checkbox"
       tabIndex={0}
       type="button"
     >