Keyboard Focus for Guides Page: Learning Paths (github#24483)

* remove useEffect on ref

* updating keyboard focus for guides page

Author: gracepark

components/guides/LearningTrack.module.scss

@@ -2,6 +2,10 @@
   background: linear-gradient(to top, var(--color-canvas-default), transparent);
 }
 
+.removeHoverEvents {
+  pointer-events: none;
+}
+
 /* Because of the sticky header */
 .hashAnchor {
   &:target {

components/guides/LearningTrack.tsx

@@ -108,22 +108,29 @@ export const LearningTrack = ({ track }: Props) => {
             ></ActionList>
           </div>
         )}
-        {(track?.guides?.length || 0) > numVisible ? (
+        {
           <button
-            className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-fg-accent pt-1 pb-3 col-12"
+            className={
+              'Box-footer btn-link border-top-0 position-relative text-center text-bold color-fg-accent pt-1 pb-3 col-12 ' +
+              ((track?.guides?.length || 0) <= numVisible && cx(styles.removeHoverEvents))
+            }
             onClick={showAll}
           >
-            <div
-              className={cx('position-absolute left-0 right-0 py-5', styles.fadeBottom)}
-              style={{ bottom: '50px' }}
-            ></div>
-            <span>
-              Show {(track?.guides?.length || 0) - numVisible} {t(`more_guides`)}
-            </span>
+            {(track?.guides?.length || 0) > numVisible ? (
+              <div>
+                <div
+                  className={cx('position-absolute left-0 right-0 py-5', styles.fadeBottom)}
+                  style={{ bottom: '50px' }}
+                />
+                <span>
+                  Show {(track?.guides?.length || 0) - numVisible} {t(`more_guides`)}
+                </span>
+              </div>
+            ) : (
+              <span className="color-fg-default">All guides shown</span>
+            )}
           </button>
-        ) : (
-          <div />
-        )}
+        }
       </div>
     </div>
   )