"Latest" title improvements (#2820)

from [slack](https://owid.slack.com/archives/C04TUH5UJA1/p1697036254239379) - rename "Featured work" -> "Featured" (http://staging-site-latest-posts-title) - rename "Our latest work" -> "Latest" (http://staging-site-latest-posts-title/latest) - add subtitle (~~pending [decision on spacing](https://owid.slack.com/archives/C04TUH5UJA1/p1697955514767439?thread_ts=1697036254.239379&cid=C04TUH5UJA1)~~) ![Screenshot 2023-10-21 at 19.20.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/0SFFiIjKuUK6UPYHVe6u/0720255e-33c4-498f-a399-18c18278eb8a.png) - accessibility improvements - fixes #1971
owid · Oct 24, 2023 · b1cf2a2 · b1cf2a2
2 parents ae3a8f7 + 0760cc7
commit b1cf2a2
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 53 deletions.
diff --git a/packages/@ourworldindata/components/src/styles/util.scss b/packages/@ourworldindata/components/src/styles/util.scss
@@ -65,3 +65,15 @@
         display: none !important;
     }
 }
+
+// only show for screen readers
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
diff --git a/site/BlogIndexPage.tsx b/site/BlogIndexPage.tsx
@@ -13,7 +13,7 @@ export const BlogIndexPage = (props: {
 }) => {
     const { posts, pageNum, numPages, baseUrl } = props
     const pageNums = range(1, numPages + 1)
-    const pageTitle = "Our latest work"
+    const pageTitle = "Latest"
 
     return (
         <html>
@@ -30,7 +30,14 @@ export const BlogIndexPage = (props: {
 
                 <main className="wrapper">
                     <div className="site-content">
-                        <h2>{pageTitle}</h2>
+                        <h2 className="heading-latest">
+                            {pageTitle}
+                            <span className="sr-only">:</span>
+                            <span className="heading-latest__subtitle">
+                                Our latest articles, updates and announcements
+                            </span>
+                        </h2>
+
                         <ul className="posts">
                             {posts.map((post) => (
                                 <li key={post.slug} className="post">
@@ -40,11 +47,8 @@ export const BlogIndexPage = (props: {
                         </ul>
                         <nav
                             className="navigation pagination"
-                            role="navigation"
+                            aria-label="Posts"
                         >
-                            <h2 className="screen-reader-text">
-                                Posts navigation
-                            </h2>
                             <div className="nav-link">
                                 {pageNums.map((num) => (
                                     <a

diff --git a/site/FrontPage.tsx b/site/FrontPage.tsx
@@ -134,9 +134,7 @@ export const FrontPage = (props: {
                         <div className="owid-row">
                             <div className="owid-col flex-row">
                                 <div className="homepage-posts--explainers">
-                                    <div className="header">
-                                        <h2>Featured work</h2>
-                                    </div>
+                                    <h2 className="heading-latest">Featured</h2>
                                     <ul>
                                         {featuredWork.map((post) => (
                                             <li key={post.slug}>

diff --git a/site/css/homepage.scss b/site/css/homepage.scss
@@ -159,10 +159,6 @@
 .homepage-posts {
     background-color: $blue-10;
 
-    h2 {
-        @include posts-heading;
-    }
-
     .see-all {
         display: flex;
         justify-content: center;
@@ -196,6 +192,25 @@
     }
 }
 
+.heading-latest {
+    font-family: $serif-font-stack;
+    font-size: 1.75rem;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0 0 2 * $vertical-spacing;
+}
+
+.heading-latest__subtitle {
+    display: block;
+    margin-top: 8px;
+    @include body-2-regular;
+    color: $blue-60;
+
+    @include md-up {
+        @include body-1-regular;
+    }
+}
+
 .homepage-posts--explainers {
     flex: 1;
     padding: 1.5rem 0 1.75rem;

diff --git a/site/css/mixins.scss b/site/css/mixins.scss
@@ -238,14 +238,6 @@
     margin-left: calc(50% - 50vw);
 }
 
-@mixin posts-heading {
-    font-family: $serif-font-stack;
-    font-size: 1.75rem;
-    font-weight: bold;
-    line-height: 1.2;
-    margin: 0 0 2 * $vertical-spacing;
-}
-
 @mixin posts-list {
     margin-bottom: $vertical-spacing * 2;
     list-style-type: none;

diff --git a/site/owid.scss b/site/owid.scss
@@ -134,36 +134,12 @@
 /* Blog posts and blog index page (on /blog)
 --------------------------------------------- */
 
-header.blog-header h1 {
-    text-align: center;
-    font-family: $serif-font-stack;
-    font-weight: 400;
-    background: $oxford-blue;
-    color: white;
-    margin: auto;
-    margin-bottom: 1rem;
-    font-size: 1.8rem;
-    line-height: 1;
-    padding: 1.25rem 0;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-}
-
-header.blog-header h1 > a {
-    color: white;
-}
-
-body.blog h2 {
-    @include posts-heading;
-}
-
 body.blog ul.posts {
     @include posts-list;
 }
 
-@include md-up {
-    body.blog main {
-        margin-top: 40px;
-    }
+body.blog main {
+    margin-top: 40px;
 }
 
 h1.entry-title > a {
@@ -198,12 +174,6 @@ h1.entry-title > a:hover {
     background: #f04848;
 }
 
-@media only screen {
-    .screen-reader-text {
-        display: none;
-    }
-}
-
 main {
     min-height: 500px;
 }