Skip to content

Commit

Permalink
Merge pull request #27483 from guardian/pf/accessible-crossword-solut…
Browse files Browse the repository at this point in the history 
…ions

Add solutions and instructions to accessible crossword page
  • Loading branch information
@bryophyta
bryophyta authored Oct 14, 2024
2 parents 143b18b + 82e956c commit e14bbfb
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 11 deletions.
70 changes: 68 additions & 2 deletions applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
@(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">
@crosswordMetaHeader(crosswordPage, false)
@crosswordMetaHeader(crosswordPage, gridVisible = false)

<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:</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">
Expand All @@ -28,6 +39,61 @@ <h3 class="crossword__clues-header">Down</h3>
</div>
</div>
</div>
</section>
<section>
<h2>Solutions</h2>
@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 id="solution-panel" 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>
} 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>
</div>
Expand Down
18 changes: 9 additions & 9 deletions applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand All @@ -33,15 +33,15 @@ <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-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="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">
Expand Down
2 changes: 2 additions & 0 deletions static/src/javascripts/bootstraps/enhanced/crosswords.js
View file
Original file line number Diff line number Diff line change
@@ -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();
};
14 changes: 14 additions & 0 deletions static/src/javascripts/projects/common/modules/crosswords/accessible-crossword-solutions.js
View file
Original file line number Diff line number Diff line change
@@ -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;
});
}
21 changes: 21 additions & 0 deletions static/src/stylesheets/module/crosswords/_accessible.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,30 @@
}
}

.crossword__accessible-instructions-list li {
list-style-position: outside;
}

.crossword__accessible-data--header {
@include fs-header(2);
border-top: 1px solid $highlight-main;
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);
}

.button--show-more:focus {
outline: 5px solid #0077B6;
outline-offset: 3px;
}

0 comments on commit e14bbfb

Please sign in to comment.