SONAR-16731 [891638] Keyboard focus is lost - clear all button

2 files changed, 34 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
index a5ba9ec507b..1d95d1ad5c6 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
@@ -53,20 +53,31 @@ export interface PageSidebarProps {
 }
 
 export default function PageSidebar(props: PageSidebarProps) {
-  const { applicationsEnabled, facets, onQueryChange, query, view } = props;
+  const { applicationsEnabled, facets, onClearAll, onQueryChange, query, view } = props;
   const isFiltered = hasFilterParams(query);
   const isLeakView = view === 'leak';
   const maxFacetValue = getMaxFacetValue(facets);
   const facetProps = { onQueryChange, maxFacetValue };
 
+  const heading = React.useRef<HTMLHeadingElement>(null);
+
+  const clearAll = React.useCallback(() => {
+    onClearAll();
+    if (heading.current) {
+      heading.current.focus();
+    }
+  }, [onClearAll, heading]);
+
   return (
     <div className="huge-spacer-bottom huge-padded-bottom">
       <FavoriteFilter />
 
       <div className="projects-facets-header clearfix">
-        {isFiltered && <ClearAll onClearAll={props.onClearAll} />}
+        {isFiltered && <ClearAll onClearAll={clearAll} />}
 
-        <h2 className="h3">{translate('filters')}</h2>
+        <h2 className="h3" tabIndex={-1} ref={heading}>
+          {translate('filters')}
+        </h2>
       </div>
       <QualityGateFilter {...facetProps} facet={getFacet(facets, 'gate')} value={query.gate} />
       {!isLeakView && (
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.tsx
index b5f1e51794c..c397641c7b7 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageSidebar-test.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import { CurrentUserContext } from '../../../../app/components/current-user/CurrentUserContext';
 import { mockCurrentUser } from '../../../../helpers/testMocks';
@@ -67,6 +68,25 @@ it('should show "new lines" instead of "size" when in `leak` view', () => {
   ).toBeInTheDocument();
 });
 
+it('should allow to clear all filters', async () => {
+  const user = userEvent.setup();
+  const onClearAll = jest.fn();
+  renderPageSidebar({
+    onClearAll,
+    applicationsEnabled: false,
+    query: { size: '3', reliability: '2' }
+  });
+
+  const clearAllButton = screen.getByRole('button', { name: 'clear_all_filters' });
+  expect(clearAllButton).toBeInTheDocument();
+
+  await user.click(clearAllButton);
+
+  expect(onClearAll).toBeCalled();
+
+  expect(screen.getByRole('heading', { level: 2, name: 'filters' })).toHaveFocus();
+});
+
 function renderPageSidebar(overrides: Partial<PageSidebarProps> = {}, currentUser?: CurrentUser) {
   return renderComponent(
     <CurrentUserContext.Provider