SONAR-16731 [891638] Keyboard focus is lost - sortOrderButton

3 files changed, 20 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
index 10fbf7ee53a..3c2bfbeea08 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
@@ -45,6 +45,8 @@ export interface Option {
 }
 
 export default class ProjectsSortingSelect extends React.PureComponent<Props> {
+  sortOrderButtonNode: HTMLElement | null = null;
+
   getSorting = () => {
     const options = this.getOptions();
     const { sortDesc, sortValue } = parseSorting(this.props.selectedSort);
@@ -65,6 +67,9 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
   handleDescToggle = () => {
     const { sortDesc, sortValue } = parseSorting(this.props.selectedSort);
     this.props.onChange(sortValue, !sortDesc);
+    if (this.sortOrderButtonNode) {
+      this.sortOrderButtonNode.focus();
+    }
   };
 
   handleSortChange = (option: Option) => {
@@ -113,7 +118,10 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
             }
             className="js-projects-sorting-invert spacer-left"
             color={colors.gray52}
-            onClick={this.handleDescToggle}>
+            onClick={this.handleDescToggle}
+            innerRef={sortButtonRef => {
+              this.sortOrderButtonNode = sortButtonRef;
+            }}>
             {sortDesc ? <SortDescIcon className="" /> : <SortAscIcon className="" />}
           </ButtonIcon>
         </Tooltip>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
index 9284c590be5..f22439481bb 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
@@ -79,6 +79,14 @@ it('reverses sorting', () => {
   const wrapper = shallowRender({ selectedSort: '-size', onChange });
   click(wrapper.find('ButtonIcon'));
   expect(onChange).toBeCalledWith('size', false);
+
+  const node = document.createElement('div');
+  node.focus = jest.fn();
+  wrapper.instance().sortOrderButtonNode = node;
+
+  click(wrapper.find('ButtonIcon'));
+
+  expect(node.focus).toBeCalled();
 });
 
 function shallowRender(overrides: Partial<ProjectsSortingSelect['props']> = {}) {
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
index 68b9f9d26f6..4d9e9165547 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
@@ -77,6 +77,7 @@ exports[`should handle the descending sort direction 1`] = `
       aria-label="projects.sort_descending"
       className="js-projects-sorting-invert spacer-left"
       color="#525252"
+      innerRef={[Function]}
       onClick={[Function]}
     >
       <SortDescIcon
@@ -171,6 +172,7 @@ exports[`should render correctly for leak view 1`] = `
       aria-label="projects.sort_ascending"
       className="js-projects-sorting-invert spacer-left"
       color="#525252"
+      innerRef={[Function]}
       onClick={[Function]}
     >
       <SortAscIcon
@@ -265,6 +267,7 @@ exports[`should render correctly for overall view 1`] = `
       aria-label="projects.sort_ascending"
       className="js-projects-sorting-invert spacer-left"
       color="#525252"
+      innerRef={[Function]}
       onClick={[Function]}
     >
       <SortAscIcon