SONAR-18870 Add labels for qualifier and visibility filters in project management page

2 files changed, 12 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
index 344f574b8bb..0e5e903e1a6 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
@@ -139,7 +139,7 @@ export class Search extends React.PureComponent<Props, State> {
   };
 
   renderQualifierOption = (option: LabelValueSelectOption) => (
-    <div>
+    <div className="display-flex-center">
       <QualifierIcon className="little-spacer-right" qualifier={option.value} />
       {option.label}
     </div>
@@ -162,6 +162,7 @@ export class Search extends React.PureComponent<Props, State> {
           SingleValue: this.singleValueRenderer,
         }}
         options={this.getQualifierOptions()}
+        aria-label={translate('projects_management.filter_by_component')}
         value={options.find((option) => option.value === this.props.qualifiers)}
       />
     );
@@ -181,6 +182,7 @@ export class Search extends React.PureComponent<Props, State> {
         onChange={this.handleVisibilityChange}
         options={options}
         isSearchable={false}
+        aria-label={translate('projects_management.filter_by_visibility')}
         value={options.find((option) => option.value === (this.props.visibility || 'all'))}
       />
     );
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
index 5e41b9c325f..e505f08023c 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
@@ -45,6 +45,7 @@ exports[`render qualifiers filter 1`] = `
       />
     </div>
     <Select
+      aria-label="projects_management.filter_by_component"
       className="input-medium it__project-qualifier-select"
       components={
         {
@@ -86,6 +87,7 @@ exports[`render qualifiers filter 1`] = `
       placeholder="last_analysis_before"
     />
     <Select
+      aria-label="projects_management.filter_by_visibility"
       className="input-small"
       isDisabled={false}
       isSearchable={false}
@@ -189,6 +191,7 @@ exports[`renders 1`] = `
       placeholder="last_analysis_before"
     />
     <Select
+      aria-label="projects_management.filter_by_visibility"
       className="input-small"
       isDisabled={false}
       isSearchable={false}
@@ -278,7 +281,9 @@ exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = `
     }
   }
 >
-  <div>
+  <div
+    className="display-flex-center"
+  >
     <QualifierIcon
       className="little-spacer-right"
       qualifier="val"
@@ -297,7 +302,9 @@ exports[`renders optionrenderer and singlevaluerenderer: single value renderer 1
     }
   }
 >
-  <div>
+  <div
+    className="display-flex-center"
+  >
     <QualifierIcon
       className="little-spacer-right"
       qualifier="val"