a11y: add title text for view all links (github#24193)

* Add optional 'view all' title text in the context * Use viewAllTitleText in ArticleList * Set viewAllTitleText for sections with 'view all' links
maied12 · Jan 11, 2022 · d31d6a5 · d31d6a5
1 parent 3d2a641
commit d31d6a5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/components/context/ProductLandingContext.tsx b/components/context/ProductLandingContext.tsx
@@ -51,6 +51,7 @@ export type ProductLandingContextT = {
   featuredArticles: Array<{
     label: string // Guides
     viewAllHref?: string // If provided, adds a "View All ->" to the header
+    viewAllTitleText?: string // Adds 'title' attribute text for the "View All" href
     articles: Array<FeaturedLink>
   }>
   changelogUrl?: string

diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
@@ -11,17 +11,27 @@ import { BumpLink } from 'components/ui/BumpLink'
 export type ArticleListPropsT = {
   title?: string
   viewAllHref?: string
+  viewAllTitleText?: string
   articles: Array<FeaturedLink>
 }
 
-export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT) => {
+export const ArticleList = ({
+  title,
+  viewAllHref,
+  viewAllTitleText,
+  articles,
+}: ArticleListPropsT) => {
   return (
     <>
       {title && (
         <div className="mb-4 d-flex flex-items-baseline">
           <h3 className={cx('f4 text-semibold')}>{title}</h3>
           {viewAllHref && (
-            <Link href={viewAllHref} className="ml-4">
+            <Link
+              href={viewAllHref}
+              className="ml-4"
+              {...(viewAllTitleText ? { title: viewAllTitleText } : {})}
+            >
               View all <ArrowRightIcon size={14} className="v-align-middle" />
             </Link>
           )}

diff --git a/components/landing/FeaturedArticles.tsx b/components/landing/FeaturedArticles.tsx
@@ -20,6 +20,7 @@ export const FeaturedArticles = () => {
             <ArticleList
               title={section.label}
               viewAllHref={section.viewAllHref}
+              {...(section.viewAllHref ? { viewAllTitleText: `All ${section.label}` } : {})}
               articles={section.articles}
             />
           </div>
@@ -31,6 +32,7 @@ export const FeaturedArticles = () => {
           <ArticleList
             title={t('whats_new')}
             viewAllHref={changelogUrl}
+            viewAllTitleText="All ChangeLog posts"
             articles={(whatsNewChangelog || []).map((link) => {
               return {
                 title: link.title,