SONAR-16731 [891638] Keyboard focus is lost - show more button

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 1d4c87869776c8d0a22d0d1bb4f07b2485c2862c..81670150f14941315e4d562283e3e6c6f3f2e549 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -42,6 +42,7 @@ export default function ListFooter(props: ListFooterProps) {
     accessibleLoadMoreLabel,
     className,
     count,
+    loadMore,
     loading,
     needReload,
     total,
@@ -49,6 +50,18 @@ export default function ListFooter(props: ListFooterProps) {
     ready = true
   } = props;
 
+  const rootNode = React.useRef<HTMLDivElement>(null);
+
+  const onLoadMore = React.useCallback(() => {
+    if (loadMore) {
+      loadMore();
+    }
+
+    if (rootNode.current) {
+      rootNode.current.focus();
+    }
+  }, [loadMore, rootNode]);
+
   let hasMore = false;
   if (total !== undefined) {
     hasMore = total > count;
@@ -70,15 +83,21 @@ export default function ListFooter(props: ListFooterProps) {
         className="spacer-left"
         disabled={loading}
         data-test="show-more"
-        onClick={props.loadMore}>
+        onClick={onLoadMore}>
         {translate('show_more')}
       </Button>
     );
   }
 
   return (
-    <footer
-      className={classNames('spacer-top note text-center', { 'new-loading': !ready }, className)}>
+    <div
+      tabIndex={-1}
+      ref={rootNode}
+      className={classNames(
+        'list-footer spacer-top note text-center',
+        { 'new-loading': !ready },
+        className
+      )}>
       {total !== undefined
         ? translateWithParameters(
             'x_of_y_shown',
@@ -88,6 +107,6 @@ export default function ListFooter(props: ListFooterProps) {
         : translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
       {button}
       {loading && <DeferredSpinner className="text-bottom spacer-left position-absolute" />}
-    </footer>
+    </div>
   );
 }

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
index 1ef2198b48790ac907e36d156e8e11b2ee60f8a6..0ee8385503fa383a92a748adb6e1cc0d99834ffa 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
@@ -1,73 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: default 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.3.5
   <Button
     className="spacer-left"
     data-test="show-more"
-    onClick={[MockFunction]}
+    onClick={[Function]}
   >
     show_more
   </Button>
-</footer>
+</div>
 `;
 
 exports[`should render correctly: empty if everything is loaded 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.5.5
-</footer>
+</div>
 `;
 
 exports[`should render correctly: empty if no loadMore nor reload props 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.3.5
-</footer>
+</div>
 `;
 
 exports[`should render correctly: force show load more button if count % pageSize is 0, and total is undefined 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_show.60
   <Button
     className="spacer-left"
     data-test="show-more"
-    onClick={[MockFunction]}
+    onClick={[Function]}
   >
     show_more
   </Button>
-</footer>
+</div>
 `;
 
 exports[`should render correctly: loading 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.3.5
   <Button
     className="spacer-left"
     data-test="show-more"
     disabled={true}
-    onClick={[MockFunction]}
+    onClick={[Function]}
   >
     show_more
   </Button>
   <DeferredSpinner
     className="text-bottom spacer-left position-absolute"
   />
-</footer>
+</div>
 `;
 
 exports[`should render correctly: reload 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.3.5
   <Button
@@ -77,12 +83,13 @@ exports[`should render correctly: reload 1`] = `
   >
     reload
   </Button>
-</footer>
+</div>
 `;
 
 exports[`should render correctly: reload, loading 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_of_y_shown.3.5
   <Button
@@ -96,13 +103,14 @@ exports[`should render correctly: reload, loading 1`] = `
   <DeferredSpinner
     className="text-bottom spacer-left position-absolute"
   />
-</footer>
+</div>
 `;
 
 exports[`should render correctly: total undefined 1`] = `
-<footer
-  className="spacer-top note text-center"
+<div
+  className="list-footer spacer-top note text-center"
+  tabIndex={-1}
 >
   x_show.3
-</footer>
+</div>
 `;