SONAR-18067 Buttons have same name but different actions

3 files changed, 24 insertions, 8 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index 32f47f2fe74..fbbcb2af464 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -25,7 +25,7 @@ import DeferredSpinner from '../ui/DeferredSpinner';
 import { Button } from './buttons';
 
 export interface ListFooterProps {
-  accessibleLoadMoreLabel?: string;
+  loadMoreAriaLabel?: string;
   count: number;
   className?: string;
   loading?: boolean;
@@ -39,7 +39,7 @@ export interface ListFooterProps {
 
 export default function ListFooter(props: ListFooterProps) {
   const {
-    accessibleLoadMoreLabel,
+    loadMoreAriaLabel,
     className,
     count,
     loadMore,
@@ -79,7 +79,7 @@ export default function ListFooter(props: ListFooterProps) {
   } else if (hasMore && props.loadMore) {
     button = (
       <Button
-        aria-label={accessibleLoadMoreLabel}
+        aria-label={loadMoreAriaLabel}
         className="spacer-left"
         disabled={loading}
         data-test="show-more"
diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
index cd08ffbacf5..a87da01e050 100644
--- a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
@@ -67,6 +67,8 @@ export interface Props<S> {
   getSortedItems?: () => string[];
   stats: Dict<number> | undefined;
   values: string[];
+  showMoreAriaLabel?: string;
+  showLessAriaLabel?: string;
 }
 
 interface State<S> {
@@ -238,7 +240,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
   };
 
   renderList() {
-    const { stats } = this.props;
+    const { stats, showMoreAriaLabel, showLessAriaLabel } = this.props;
 
     if (!stats) {
       return null;
@@ -303,6 +305,8 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
           showLess={this.state.showFullList ? this.hideFullList : undefined}
           showMore={this.showFullList}
           total={sortedItems.length}
+          showMoreAriaLabel={showMoreAriaLabel}
+          showLessAriaLabel={showLessAriaLabel}
         />
         {mightHaveMoreResults && this.state.showFullList && (
           <Alert className="spacer-top" variant="warning">
@@ -328,6 +332,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
   }
 
   renderSearchResults() {
+    const { showMoreAriaLabel } = this.props;
     const { searching, searchMaxResults, searchResults, searchPaging } = this.state;
 
     if (!searching && (!searchResults || !searchResults.length)) {
@@ -356,6 +361,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
             loadMore={this.searchMore}
             ready={!searching}
             total={searchPaging.total}
+            loadMoreAriaLabel={showMoreAriaLabel}
           />
         )}
       </>
diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
index 5498906d885..0d0faead164 100644
--- a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
+++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
@@ -25,8 +25,10 @@ import { ButtonLink } from '../controls/buttons';
 interface Props {
   count: number;
   showMore: () => void;
-  showLess: (() => void) | undefined;
+  showLess?: () => void;
   total: number;
+  showMoreAriaLabel?: string;
+  showLessAriaLabel?: string;
 }
 
 export default class ListStyleFacetFooter extends React.PureComponent<Props> {
@@ -41,7 +43,7 @@ export default class ListStyleFacetFooter extends React.PureComponent<Props> {
   };
 
   render() {
-    const { count, total } = this.props;
+    const { count, total, showMoreAriaLabel, showLessAriaLabel } = this.props;
     const hasMore = total > count;
     const allShown = Boolean(total && total === count);
 
@@ -50,13 +52,21 @@ export default class ListStyleFacetFooter extends React.PureComponent<Props> {
         {translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
 
         {hasMore && (
-          <ButtonLink className="spacer-left" onClick={this.handleShowMoreClick}>
+          <ButtonLink
+            className="spacer-left"
+            aria-label={showMoreAriaLabel}
+            onClick={this.handleShowMoreClick}
+          >
             {translate('show_more')}
           </ButtonLink>
         )}
 
         {this.props.showLess && allShown && (
-          <ButtonLink className="spacer-left" onClick={this.handleShowLessClick}>
+          <ButtonLink
+            className="spacer-left"
+            aria-label={showLessAriaLabel}
+            onClick={this.handleShowLessClick}
+          >
             {translate('show_less')}
           </ButtonLink>
         )}