Identify sectioning content

Refs #1712, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
PREreview · May 16, 2024 · ec1d75f · ec1d75f
1 parent 91cb564
commit ec1d75f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -1932,7 +1932,7 @@ skip-link {
       inline-size: min(95vw - var(--space-s-m) * 2, 20em);
       margin-block-start: 0;
 
-      > :not(header, dl) {
+      > :not(.visually-hidden, header, dl) {
         flex-grow: 1;
       }
     }

diff --git a/src/home-page/home-page.ts b/src/home-page/home-page.ts
@@ -108,9 +108,16 @@ export const createPage = ({
               <h2 id="recent-review-requests-title">Recent review requests</h2>
               <ol class="cards" aria-labelledby="recent-review-requests-title" tabindex="0">
                 ${requests.map(
-                  request => html`
+                  (request, index) => html`
                     <li>
-                      <article>
+                      <article aria-labelledby="request-${index}-title">
+                        <h3 id="request-${index}-title" class="visually-hidden">
+                          Review request for
+                          <cite dir="${getLangDir(request.preprint.language)}" lang="${request.preprint.language}"
+                            >${request.preprint.title}</cite
+                          >
+                        </h3>
+
                         <a
                           href="${format(writeReviewMatch.formatter, {
                             id: request.preprint.id,
@@ -199,7 +206,14 @@ export const createPage = ({
                 ${prereviews.map(
                   prereview => html`
                     <li>
-                      <article>
+                      <article aria-labelledby="prereview-${prereview.id}-title">
+                        <h3 id="prereview-${prereview.id}-title" class="visually-hidden">
+                          PREreview of
+                          <cite dir="${getLangDir(prereview.preprint.language)}" lang="${prereview.preprint.language}"
+                            >${prereview.preprint.title}</cite
+                          >
+                        </h3>
+
                         <a href="${format(reviewMatch.formatter, { id: prereview.id })}">
                           ${formatList('en')(prereview.reviewers)}
                           ${prereview.club ? html`of the <b>${getClubName(prereview.club)}</b>` : ''} reviewed

diff --git a/src/review-requests-page/review-requests-page.ts b/src/review-requests-page/review-requests-page.ts
@@ -15,9 +15,16 @@ export const createPage = ({ currentPage, totalPages, reviewRequests }: ReviewRe
 
       <ol class="cards">
         ${reviewRequests.map(
-          request => html`
+          (request, index) => html`
             <li>
-              <article>
+              <article aria-labelledby="request-${index}-title">
+                <h2 id="request-${index}-title" class="visually-hidden">
+                  Review request for
+                  <cite dir="${getLangDir(request.preprint.language)}" lang="${request.preprint.language}"
+                    >${request.preprint.title}</cite
+                  >
+                </h2>
+
                 <a
                   href="${format(writeReviewMatch.formatter, {
                     id: request.preprint.id,