From a666199017b76137ad2e1dc0e2ea77c3f78b121b Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Fri, 13 Sep 2024 16:34:43 +0100
Subject: [PATCH 1/6] Add solutions and instructions to accessible crossword
 page

---
 .../accessibleCrosswordContent.scala.html     | 55 ++++++++++++++++++-
 .../crosswords/crosswordMetaHeader.scala.html |  8 ---
 .../bootstraps/enhanced/crosswords.js         |  2 +
 .../accessible-crossword-solutions.js         | 14 +++++
 .../module/crosswords/_accessible.scss        | 12 ++++
 5 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 static/src/javascripts/projects/common/modules/crosswords/accessible-crossword-solutions.js

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index 5e14e02d630..a29accfbf93 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -8,7 +8,12 @@
 
         <div class="content__main tonal__main tonal__main--tone-news">
             <div class="gs-container">
-                <div class="js-content-main-column">
+                <div class="js-content-main-column content__main-column">
+                    <section>
+                        <h2>Puzzle description</h2>
+                        <p>Note: We've recently added solutions to this page below.</p>
+                        <p>This page provides a text-only description of the puzzle, via three lists. 'Blanks' specifies the location of cells which aren't in any clue. 'Across' and 'Down' list the clues in the format: "(starting square) clue text (answer length).</p>
+                        <p>Cells are specified via row number (top to bottom) and column letter (left to right)</p>
                     <div class="crossword__container crossword__container--accessible">
                         <div class="crossword__accessible-row-data-wrapper">
                             <div class="crossword__accessible-data">
@@ -28,6 +33,54 @@ <h3 class="crossword__clues-header">Down</h3>
                             </div>
                         </div>
                     </div>
+                    </section>
+                    <section>
+                        <h2>Solutions</h2>
+                        <div class="crossword__accessible-solutions-disclosure" data-component="crossword-solutions-disclosure">
+                            <button data-component="crossword-solutions-disclosure-trigger" aria-expanded="false" aria-controls="solution-panel" class="button button--medium button--primary button--show-more collection__show-more js-show-more-button modern-visible">
+                                <svg width="12" height="8" aria-hidden="true" viewBox="-2 -2 14 12">
+                                    <g fill="none" transform="rotate(-90 6 4)">
+                                        <path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
+                                        <path d="M-6-8h24v24h-24z" />
+                                    </g>
+                                </svg>
+                                <span data-component="crossword-solutions-disclosure-trigger-label">Reveal solutions</span>
+                            </button>
+                            <div data-component="crossword-solutions-disclosure-panel" hidden>
+                                <h3 class="crossword__clues-header">Across solutions</h3>
+                                <table aria-label="Across solutions">
+                                    <thead>
+                                        <tr>
+                                            <th>Starting position</th>
+                                            <th>Clue</th>
+                                            <th>Solution</th>
+                                        </tr>
+                                    </thead>
+                                    @for(entry <- crosswordPage.crossword.acrossEntries) {
+                                        <tr>
+                                            <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
+                                        </tr>
+                                    }
+                                </table>
+                                <h3 class="crossword__clues-header">Down solutions</h3>
+                                <table aria-label="Down solutions">
+                                    <thead>
+                                        <tr>
+                                            <th>Starting position</th>
+                                            <th>Clue</th>
+                                            <th>Solution</th>
+                                        </tr>
+                                    </thead>
+                                    @for(entry <- crosswordPage.crossword.downEntries) {
+                                        <tr>
+                                            <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
+                                        </tr>
+                                    }
+                                </table>
+
+                            </div>
+                        </div>
+                    </section>
                 </div>
             </div>
         </div>
diff --git a/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html b/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
index a86f7701c4b..fe3beb5db2d 100644
--- a/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
+++ b/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
@@ -35,14 +35,6 @@ <h1 itemprop="headline" class="content__headline js-score">@Html(crosswordPage.i
                 </div>
             }
 
-            <div class="hide-from-leftcol crossword__clues-header">
-                <a href="https://app.adjust.com/16xt6hai" data-link-name="crossword-mobile-link">Download the Guardian app</a> for a better puzzles experience
-            </div>
-
-            <div class="hide-until-leftcol crossword__clues-header">
-                <a href="https://app.adjust.com/16xt6hai" data-link-name="crossword-desktop-link">Download the Guardian app</a> for a better puzzles experience
-            </div>
-
             <div class="meta__extras meta__extras--crossword">
                 <div class="meta__social" data-component="share">
                 @fragments.social(crosswordPage.item.sharelinks.pageShares, "top")
diff --git a/static/src/javascripts/bootstraps/enhanced/crosswords.js b/static/src/javascripts/bootstraps/enhanced/crosswords.js
index c6f6ed84507..7588f9b3a5e 100644
--- a/static/src/javascripts/bootstraps/enhanced/crosswords.js
+++ b/static/src/javascripts/bootstraps/enhanced/crosswords.js
@@ -1,9 +1,11 @@
 import { initCrosswords } from 'common/modules/crosswords/main';
 import { initCrosswordDiscussion } from 'common/modules/crosswords/comments';
 import { initSeries } from 'common/modules/crosswords/series';
+import {initAccessibleCrosswordSolutionsDisclosure} from "common/modules/crosswords/accessible-crossword-solutions";
 
 export const init = () => {
     initCrosswords();
     initCrosswordDiscussion();
+    initAccessibleCrosswordSolutionsDisclosure()
     initSeries();
 };
diff --git a/static/src/javascripts/projects/common/modules/crosswords/accessible-crossword-solutions.js b/static/src/javascripts/projects/common/modules/crosswords/accessible-crossword-solutions.js
new file mode 100644
index 00000000000..a18cf5c6302
--- /dev/null
+++ b/static/src/javascripts/projects/common/modules/crosswords/accessible-crossword-solutions.js
@@ -0,0 +1,14 @@
+export const initAccessibleCrosswordSolutionsDisclosure = () => {
+        var disclosureComponent = document.querySelector('[data-component="crossword-solutions-disclosure"]');
+        var trigger = disclosureComponent.querySelector('[data-component="crossword-solutions-disclosure-trigger"]');
+        var panel = disclosureComponent.querySelector('[data-component="crossword-solutions-disclosure-panel"]');
+        var label = trigger.querySelector('[data-component="crossword-solutions-disclosure-trigger-label"]');
+
+
+        trigger.addEventListener('click', function() {
+            var wasAlreadyExpanded = trigger.getAttribute('aria-expanded') === 'true';
+            trigger.setAttribute('aria-expanded', !wasAlreadyExpanded);
+            label.textContent = wasAlreadyExpanded ? 'Reveal solutions' : 'Hide solutions'
+            panel.hidden = wasAlreadyExpanded;
+        });
+}
diff --git a/static/src/stylesheets/module/crosswords/_accessible.scss b/static/src/stylesheets/module/crosswords/_accessible.scss
index 5b9af4e1188..1e86ba71342 100644
--- a/static/src/stylesheets/module/crosswords/_accessible.scss
+++ b/static/src/stylesheets/module/crosswords/_accessible.scss
@@ -34,3 +34,15 @@
     border-bottom: 1px dotted $brightness-86;
     padding-bottom: $gs-baseline * .75;
 }
+
+.crossword__accessible-solutions-disclosure {
+    padding-bottom: 1rem;
+
+    & h3 {
+        margin-top: 1rem;
+    }
+}
+
+.crossword__accessible-solutions-disclosure > button[aria-expanded="true"] > svg {
+    transform: rotate(90deg);
+}

From 908a0095d12f6ad4d583662e0ff6e21fc4173c50 Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Wed, 25 Sep 2024 07:33:13 +0100
Subject: [PATCH 2/6] Focus styling for disclosure button

---
 .../crosswords/accessibleCrosswordContent.scala.html         | 2 +-
 static/src/stylesheets/module/crosswords/_accessible.scss    | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index a29accfbf93..9fdc48b8b2e 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -37,7 +37,7 @@ <h3 class="crossword__clues-header">Down</h3>
                     <section>
                         <h2>Solutions</h2>
                         <div class="crossword__accessible-solutions-disclosure" data-component="crossword-solutions-disclosure">
-                            <button data-component="crossword-solutions-disclosure-trigger" aria-expanded="false" aria-controls="solution-panel" class="button button--medium button--primary button--show-more collection__show-more js-show-more-button modern-visible">
+                            <button data-component="crossword-solutions-disclosure-trigger" aria-expanded="false" aria-controls="solution-panel" class="button button--medium button--primary button--show-more collection__show-more modern-visible">
                                 <svg width="12" height="8" aria-hidden="true" viewBox="-2 -2 14 12">
                                     <g fill="none" transform="rotate(-90 6 4)">
                                         <path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
diff --git a/static/src/stylesheets/module/crosswords/_accessible.scss b/static/src/stylesheets/module/crosswords/_accessible.scss
index 1e86ba71342..dd1c73a173a 100644
--- a/static/src/stylesheets/module/crosswords/_accessible.scss
+++ b/static/src/stylesheets/module/crosswords/_accessible.scss
@@ -46,3 +46,8 @@
 .crossword__accessible-solutions-disclosure > button[aria-expanded="true"] > svg {
     transform: rotate(90deg);
 }
+
+.button--show-more:focus {
+    outline: 5px solid #0077B6;
+    outline-offset: 3px;
+}

From 4026a5244d29a5b5357ede0e2ace90abbcd3f6b3 Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Fri, 27 Sep 2024 16:33:46 +0100
Subject: [PATCH 3/6] Show message if solutions aren't available

---
 .../accessibleCrosswordContent.scala.html     | 94 ++++++++++---------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index 9fdc48b8b2e..5ff29298511 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -1,6 +1,7 @@
 @(crosswordPage: crosswords.AccessibleCrosswordPage)(implicit request: RequestHeader, context: model.ApplicationContext)
 
 @import views.html.fragments.crosswords._
+@import model.GUDateTimeFormatNew
 
 <div class="l-side-margins">
     <article id="crossword" class="content content--article tonal tonal--tone-news" role="main">
@@ -12,7 +13,7 @@
                     <section>
                         <h2>Puzzle description</h2>
                         <p>Note: We've recently added solutions to this page below.</p>
-                        <p>This page provides a text-only description of the puzzle, via three lists. 'Blanks' specifies the location of cells which aren't in any clue. 'Across' and 'Down' list the clues in the format: "(starting square) clue text (answer length).</p>
+                        <p>This page provides a text-only description of the puzzle, via three lists. 'Blanks' specifies the location of cells which aren't in any clue. 'Across' and 'Down' list the clues in the format: "(starting square) clue text (answer length)".</p>
                         <p>Cells are specified via row number (top to bottom) and column letter (left to right)</p>
                     <div class="crossword__container crossword__container--accessible">
                         <div class="crossword__accessible-row-data-wrapper">
@@ -36,50 +37,57 @@ <h3 class="crossword__clues-header">Down</h3>
                     </section>
                     <section>
                         <h2>Solutions</h2>
-                        <div class="crossword__accessible-solutions-disclosure" data-component="crossword-solutions-disclosure">
-                            <button data-component="crossword-solutions-disclosure-trigger" aria-expanded="false" aria-controls="solution-panel" class="button button--medium button--primary button--show-more collection__show-more modern-visible">
-                                <svg width="12" height="8" aria-hidden="true" viewBox="-2 -2 14 12">
-                                    <g fill="none" transform="rotate(-90 6 4)">
-                                        <path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
-                                        <path d="M-6-8h24v24h-24z" />
-                                    </g>
-                                </svg>
-                                <span data-component="crossword-solutions-disclosure-trigger-label">Reveal solutions</span>
-                            </button>
-                            <div data-component="crossword-solutions-disclosure-panel" hidden>
-                                <h3 class="crossword__clues-header">Across solutions</h3>
-                                <table aria-label="Across solutions">
-                                    <thead>
-                                        <tr>
-                                            <th>Starting position</th>
-                                            <th>Clue</th>
-                                            <th>Solution</th>
-                                        </tr>
-                                    </thead>
-                                    @for(entry <- crosswordPage.crossword.acrossEntries) {
-                                        <tr>
-                                            <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
-                                        </tr>
-                                    }
-                                </table>
-                                <h3 class="crossword__clues-header">Down solutions</h3>
-                                <table aria-label="Down solutions">
-                                    <thead>
-                                        <tr>
-                                            <th>Starting position</th>
-                                            <th>Clue</th>
-                                            <th>Solution</th>
-                                        </tr>
-                                    </thead>
-                                    @for(entry <- crosswordPage.crossword.downEntries) {
-                                        <tr>
-                                            <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
-                                        </tr>
-                                    }
-                                </table>
+                        @if(crosswordPage.crossword.solutionAvailable) {
+                            <div class="crossword__accessible-solutions-disclosure" data-component="crossword-solutions-disclosure">
+                                <button data-component="crossword-solutions-disclosure-trigger" aria-expanded="false" aria-controls="solution-panel" class="button button--medium button--primary button--show-more collection__show-more modern-visible">
+                                    <svg width="12" height="8" aria-hidden="true" viewBox="-2 -2 14 12">
+                                        <g fill="none" transform="rotate(-90 6 4)">
+                                            <path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
+                                            <path d="M-6-8h24v24h-24z" />
+                                        </g>
+                                    </svg>
+                                    <span data-component="crossword-solutions-disclosure-trigger-label">Reveal solutions</span>
+                                </button>
+                                <div data-component="crossword-solutions-disclosure-panel" hidden>
+                                    <h3 class="crossword__clues-header">Across solutions</h3>
+                                    <table aria-label="Across solutions">
+                                        <thead>
+                                            <tr>
+                                                <th>Starting position</th>
+                                                <th>Clue</th>
+                                                <th>Solution</th>
+                                            </tr>
+                                        </thead>
+                                        @for(entry <- crosswordPage.crossword.acrossEntries) {
+                                            <tr>
+                                                <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
+                                            </tr>
+                                        }
+                                    </table>
+                                    <h3 class="crossword__clues-header">Down solutions</h3>
+                                    <table aria-label="Down solutions">
+                                        <thead>
+                                            <tr>
+                                                <th>Starting position</th>
+                                                <th>Clue</th>
+                                                <th>Solution</th>
+                                            </tr>
+                                        </thead>
+                                        @for(entry <- crosswordPage.crossword.downEntries) {
+                                            <tr>
+                                                <td>@entry.startPosition</td><td>@Html(entry.clue)</td><td>@Html(entry.solution)</td>
+                                            </tr>
+                                        }
+                                    </table>
 
+                                </div>
                             </div>
-                        </div>
+                        } else {
+                            <p>
+                                Sorry, solutions are not available for this puzzle yet.
+                                @crosswordPage.crossword.dateSolutionAvailable.map(solutionDate => s" They should be available from ${GUDateTimeFormatNew.formatDateForDisplay(solutionDate, request)}.")
+                            </p>
+                        }
                     </section>
                 </div>
             </div>

From 87bcae72b7268493604abdb3d2cf9539187959a4 Mon Sep 17 00:00:00 2001
From: Pete F <37048459+bryophyta@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:56:09 +0100
Subject: [PATCH 4/6] Update
 applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html

Co-authored-by: Simon Adcock <simonadcock2@gmail.com>
---
 .../fragments/crosswords/accessibleCrosswordContent.scala.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index 5ff29298511..98658792c55 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -48,7 +48,7 @@ <h2>Solutions</h2>
                                     </svg>
                                     <span data-component="crossword-solutions-disclosure-trigger-label">Reveal solutions</span>
                                 </button>
-                                <div data-component="crossword-solutions-disclosure-panel" hidden>
+                                <div id="solution-panel" data-component="crossword-solutions-disclosure-panel" hidden>
                                     <h3 class="crossword__clues-header">Across solutions</h3>
                                     <table aria-label="Across solutions">
                                         <thead>

From 0e73fb10cbe67f66d19442cae9dd230bbfa24df9 Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Mon, 14 Oct 2024 12:40:05 +0100
Subject: [PATCH 5/6] Show app ad only in visual crossword page; rename
 variable to fix typo

---
 .../crosswords/accessibleCrosswordContent.scala.html | 11 ++++++++---
 .../crosswords/crosswordMetaHeader.scala.html        | 12 ++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index 98658792c55..0529e7e60d1 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -5,7 +5,7 @@
 
 <div class="l-side-margins">
     <article id="crossword" class="content content--article tonal tonal--tone-news" role="main">
-        @crosswordMetaHeader(crosswordPage, false)
+        @crosswordMetaHeader(crosswordPage, gridVisible = false)
 
         <div class="content__main tonal__main tonal__main--tone-news">
             <div class="gs-container">
@@ -13,8 +13,13 @@
                     <section>
                         <h2>Puzzle description</h2>
                         <p>Note: We've recently added solutions to this page below.</p>
-                        <p>This page provides a text-only description of the puzzle, via three lists. 'Blanks' specifies the location of cells which aren't in any clue. 'Across' and 'Down' list the clues in the format: "(starting square) clue text (answer length)".</p>
-                        <p>Cells are specified via row number (top to bottom) and column letter (left to right)</p>
+                        <p>This page provides a text-only description of the puzzle:</p>
+                        <ul class="crossword__accessible-instructions-list">
+                            <li>'Blanks' specifies the location of cells which separate the clues.</li>
+                            <li>'Across' and 'Down' list the clues in the format: "(starting square) clue text (answer length)".</li>
+                            <li>Cells are specified via row number (top to bottom) and column letter (left to right).</li>
+                            <li>Solutions are available via the 'Reveal solutions' button below.</li>
+                        </ul>
                     <div class="crossword__container crossword__container--accessible">
                         <div class="crossword__accessible-row-data-wrapper">
                             <div class="crossword__accessible-data">
diff --git a/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html b/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
index fe3beb5db2d..abc6b3e2580 100644
--- a/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
+++ b/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
@@ -1,5 +1,5 @@
 @import views.html.fragments.crosswords.crosswordMeta
-@(crosswordPage: crosswords.CrosswordPageWithContent, gridVisable: Boolean = true)(implicit requestHeader: RequestHeader)
+@(crosswordPage: crosswords.CrosswordPageWithContent, gridVisible: Boolean = true)(implicit requestHeader: RequestHeader)
 @import common.LinkTo
 
 <header class="content__head content__head--crossword tonal__head tonal__head--tone-news">
@@ -20,7 +20,7 @@ <h1 itemprop="headline" class="content__headline js-score">@Html(crosswordPage.i
                 </div>
             }
 
-            @if( gridVisable ) {
+            @if( gridVisible ) {
                 <div class="crossword__links">
                     <div class="crossword__links-related">
                         <a target="_blank" href="@LinkTo(s"/crosswords/${crosswordPage.crossword.crosswordType}/${crosswordPage.crossword.number}/print")">Print</a>
@@ -33,6 +33,14 @@ <h1 itemprop="headline" class="content__headline js-score">@Html(crosswordPage.i
                     </div>
                     @crosswordMeta(crosswordPage)
                 </div>
+
+                <div class="hide-from-leftcol crossword__clues-header">
+                    <a href="https://app.adjust.com/16xt6hai" data-link-name="crossword-mobile-link">Download the Guardian app</a> for a better puzzles experience
+                </div>
+
+                <div class="hide-until-leftcol crossword__clues-header">
+                    <a href="https://app.adjust.com/16xt6hai" data-link-name="crossword-desktop-link">Download the Guardian app</a> for a better puzzles experience
+                </div>
             }
 
             <div class="meta__extras meta__extras--crossword">

From 82e956cd8e0ae963f619b9fba935dd58c1d9143b Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Mon, 14 Oct 2024 12:40:21 +0100
Subject: [PATCH 6/6] Better styling for instruction list

---
 static/src/stylesheets/module/crosswords/_accessible.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/static/src/stylesheets/module/crosswords/_accessible.scss b/static/src/stylesheets/module/crosswords/_accessible.scss
index dd1c73a173a..e3f8baed072 100644
--- a/static/src/stylesheets/module/crosswords/_accessible.scss
+++ b/static/src/stylesheets/module/crosswords/_accessible.scss
@@ -28,6 +28,10 @@
     }
 }
 
+.crossword__accessible-instructions-list li {
+    list-style-position: outside;
+}
+
 .crossword__accessible-data--header {
     @include fs-header(2);
     border-top: 1px solid $highlight-main;