a11y: fix status messages, focus-not-obscured, and journey nav labels (#61379)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: docs-bot

src/frame/components/ui/ScrollButton/ScrollButton.tsx

@@ -54,6 +54,8 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
     return () => window.removeEventListener('resize', updateDocumentSize)
   }, [])
 
+  const isVisible = show && isTallEnough
+
   const onClick = () => {
     document?.getElementById('github-logo')?.focus()
     document?.getElementById('main-content')?.scrollIntoView()
@@ -62,10 +64,12 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   return (
     <div
       role="tooltip"
-      className={cx(className, transition200, show && isTallEnough ? opacity100 : opacity0)}
+      className={cx(className, transition200, isVisible ? opacity100 : opacity0)}
+      aria-hidden={!isVisible}
     >
       <button
         onClick={onClick}
+        tabIndex={isVisible ? 0 : -1}
         className={cx(
           'ghd-scroll-to-top', // for data tracking, see events.ts
           'tooltipped tooltipped-n tooltipped-no-delay btn circle border-1',

src/journeys/components/JourneyTrackNav.tsx

@@ -18,8 +18,14 @@ export function JourneyTrackNav({ context }: Props) {
       <span className="f5 d-flex flex-column">
         {prevGuide && (
           <>
-            <span className="color-fg-default">{t('prev_article')}</span>
-            <Link href={prevGuide.href} className="text-bold color-fg">
+            <span className="color-fg-default" aria-hidden="true">
+              {t('prev_article')}
+            </span>
+            <Link
+              href={prevGuide.href}
+              className="text-bold color-fg"
+              aria-label={`${t('prev_article')}: ${prevGuide.title}`}
+            >
               {prevGuide.title}
             </Link>
           </>
@@ -29,15 +35,27 @@ export function JourneyTrackNav({ context }: Props) {
       <span className="f5 d-flex flex-column flex-items-end">
         {nextGuide ? (
           <>
-            <span className="color-fg-default">{t('next_article')}</span>
-            <Link href={nextGuide.href} className="text-bold color-fg text-right">
+            <span className="color-fg-default" aria-hidden="true">
+              {t('next_article')}
+            </span>
+            <Link
+              href={nextGuide.href}
+              className="text-bold color-fg text-right"
+              aria-label={`${t('next_article')}: ${nextGuide.title}`}
+            >
               {nextGuide.title}
             </Link>
           </>
         ) : nextTrackFirstGuide ? (
           <>
-            <span className="color-fg-default">{t('next_article')}</span>
-            <Link href={nextTrackFirstGuide.href} className="text-bold color-fg text-right">
+            <span className="color-fg-default" aria-hidden="true">
+              {t('next_article')}
+            </span>
+            <Link
+              href={nextTrackFirstGuide.href}
+              className="text-bold color-fg text-right"
+              aria-label={`${t('next_article')}: ${nextTrackFirstGuide.trackTitle}`}
+            >
               {nextTrackFirstGuide.trackTitle}
             </Link>
           </>

src/landings/components/shared/LandingArticleGridWithFilter.tsx

@@ -294,7 +294,11 @@ export const ArticleGrid = ({
           />
         ))}
         {filteredResults.length === 0 && (
-          <div className={styles.noArticlesContainer} data-testid="no-articles-message">
+          <div
+            role="status"
+            className={styles.noArticlesContainer}
+            data-testid="no-articles-message"
+          >
             <p className={styles.noArticlesText}>{t('article_grid.no_articles_found')}</p>
           </div>
         )}