Merge pull request #6 from bbc/add_a11y

Adds the a11y plugin from https://github.com/marcysutton/reveal-a11y Also ups reveal.js version to 4.0.1
bbc · May 26, 2020 · 3a1d022 · 3a1d022
2 parents 9993106 + c2b6204
commit 3a1d022
Show file tree

Hide file tree

Showing 15 changed files with 417 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,59 @@ Include this:
 		<link rel="stylesheet" href="dist/theme/bbc.css">
 ```
 
+## Using accessibility helper
+
+Include CSS file in the `<head>` of `index.html`:
+
+```html
+<link rel="stylesheet" href="plugin/accessibility/helper.css">
+```
+
+1. Include JavaScript file as dependency in `index.html`:
+
+```javascript
+<script>
+// More info https://github.com/hakimel/reveal.js#configuration
+Reveal.initialize({
+  dependencies: [
+                  { src: 'plugin/accessibility/helper.js', async: true, condition: function() { 
+                    return !!document.body.classList; 
+                  } 
+              }]
+});
+</script>
+```
+
+### Features
+
+#### Hidden offscreen slides
+
+This plugin adds CSS to "really hide" offscreen slides using `display: none;` on an element wrapping each slide. This technique was used to avoid issues with transitions and `display: none`. For this to work, the styles must be loaded in HTML as a `<link>` tag (as opposed to injecting dynamically with JavaScript).
+
+#### Dynamically labeled slide sections
+
+HTML `<section>` elements commonly used for slides will act as landmarks in screen readers. To make them easier to identify, this plugin dynamically adds an `aria-label` property with a value of "Slide 1", as an example. For nested slides, it will add "Slide 1, child 1" with numbers relative to that slide.
+
+Purpose: uniquely labeled sections are more useful in assistive technology than `<section>` soup.
+
+Before (your code):
+```html
+<section>Reveal.js</section>
+<section>
+	<section>It might be dated</section>
+	<section>But it's still useful</section>
+</section>
+```
+
+After (dynamically rendered code):
+```html
+<section aria-label="Slide 1">Reveal.js</section>
+<section aria-label="Slide 2">
+	<section aria-label="Slide 2, child 1">It might be dated</section>
+	<section aria-label="Slide 2, child 2">But it's still useful</section>
+</section>
+```
+
 # Reveal.js
 
 ## Documentation

diff --git a/css/layout.scss b/css/layout.scss
@@ -34,16 +34,24 @@
 
 .reveal .r-vstack {
 	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
 .reveal .r-hstack {
 	flex-direction: row;
-}
-
-.reveal .items-center {
 	align-items: center;
+	justify-content: center;
 }
 
-.reveal .justify-center {
-	justify-content: center;
-}
+// Naming based on tailwindcss
+.reveal .items-stretch { align-items: stretch; }
+.reveal .items-start { align-items: flex-start; }
+.reveal .items-center { align-items: center; }
+.reveal .items-end { align-items: flex-end; }
+
+.reveal .justify-between { justify-content: space-between; }
+.reveal .justify-around { justify-content: space-around; }
+.reveal .justify-start { justify-content: flex-start; }
+.reveal .justify-center { justify-content: center; }
+.reveal .justify-end { justify-content: flex-end; }
diff --git a/dist/reveal.css b/dist/reveal.css
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/examples/layout-helpers.html b/examples/layout-helpers.html
@@ -24,6 +24,8 @@ <h2>Layout Helper Examples</h2>
 					<ul>
 						<li><a href="#/stretch">Stretch</a></li>
 						<li><a href="#/stack">Stack</a></li>
+						<li><a href="#/hstack">HStack</a></li>
+						<li><a href="#/vstack">VStack</a></li>
 					</ul>
 				</section>
 
@@ -74,6 +76,27 @@ <h2>Stack Example</h2>
 					</div>
 				</section>
 
+				<section id="hstack">
+					<h2>HStack</h2>
+					<p>Stacks multiple elements horizontally.</p>
+					<pre><code class="html" data-trim data-line-numbers>
+					  <div class="r-hstack">
+					    &lt;img width="450" height="300" src="..."&gt;
+					    &lt;img width="300" height="450" src="..."&gt;
+					    &lt;img width="400" height="400" src="..."&gt;
+					  </div>
+					</code></pre>
+				</section>
+
+				<section data-auto-animate>
+					<h2>HStack Example</h2>
+					<div class="r-hstack">
+						<p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
+						<p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
+						<p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
+					</div>
+				</section>
+
 			</div>
 
 		</div>

diff --git a/gulpfile.js b/gulpfile.js
@@ -25,7 +25,7 @@ const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
 
 const banner = `/*!
-* reveal.js ${pkg.version} (${new Date().toDateString()})
+* reveal.js ${pkg.version}
 * ${pkg.homepage}
 * MIT licensed
 *

diff --git a/index.html b/index.html
@@ -8,8 +8,8 @@
 
 
 		<link rel="stylesheet" href="dist/reset.css">
-		<link rel="stylesheet" href="dist/reveal.css">
-		<link rel="stylesheet" href="dist/theme/bbc.css">
+		<link rel="stylesheet" href="css/reveal.css">
+		<link rel="stylesheet" href="css/theme/bbc.css" id="theme">
 
 		<!-- Theme used for syntax highlighted code -->
 		<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">

diff --git a/js/controllers/autoanimate.js b/js/controllers/autoanimate.js
@@ -1,6 +1,9 @@
 import { queryAll, extend, createStyleSheet } from '../utils/util.js'
 import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'
 
+// Counter used to generate unique IDs for auto-animated elements
+let autoAnimateCounter = 0;
+
 /**
  * Automatically animates matching elements across
  * slides with the [data-auto-animate] attribute.
@@ -11,9 +14,6 @@ export default class AutoAnimate {
 
 		this.Reveal = Reveal;
 
-		// Counter used to generate unique IDs for auto-animated elements
-		this.autoAnimateCounter = 0;
-
 	}
 
 	/**
@@ -45,7 +45,7 @@ export default class AutoAnimate {
 
 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
-				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ );
+				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
 			} );
 
 			// Animate unmatched elements, if enabled
@@ -63,7 +63,7 @@ export default class AutoAnimate {
 					// If there is a duration or delay set specifically for this
 					// element our unmatched elements should adhere to those
 					if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
-						id = 'unmatched-' + this.autoAnimateCounter++;
+						id = 'unmatched-' + autoAnimateCounter++;
 						css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
 					}
 

diff --git a/js/controllers/notes.js b/js/controllers/notes.js
@@ -54,7 +54,7 @@ export default class Notes {
 	 */
 	updateVisibility() {
 
-		if( this.Reveal.getConfig().showNotes && this.hasNotes() ) {
+		if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
 			this.Reveal.getRevealElement().classList.add( 'show-notes' );
 		}
 		else {

diff --git a/js/controllers/print.js b/js/controllers/print.js
@@ -91,7 +91,7 @@ export default class Print {
 				if( config.showNotes ) {
 
 					// Are there notes for this slide?
-					let notes = getSlideNotes( slide );
+					let notes = this.Reveal.getSlideNotes( slide );
 					if( notes ) {
 
 						let notesSpacing = 8;

diff --git a/js/reveal.js b/js/reveal.js
@@ -26,7 +26,7 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '4.0.0';
+export const VERSION = '4.0.1';
 
 /**
  * reveal.js

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",

diff --git a/plugin/accessibility/helper.css b/plugin/accessibility/helper.css
@@ -0,0 +1,52 @@
+
+/* Include in your HTML file along with accessibility-helper.js
+  or copy contents to your theme css */
+
+/*********************************************
+ * AccessibilityHelper Plugin
+ *
+ * MIT licensed
+ *
+ * 2014 Marcy Sutton, http://marcysutton.com
+ *********************************************/
+.reveal .slides>section>.accessibilityWrapper,
+.reveal .slides>section>section>.accessibilityWrapper {
+  display: none;
+  visibility: hidden;
+}
+
+.reveal .slides section.present > .accessibilityWrapper {
+  display: block;
+  visibility: visible;
+  outline: none;
+}
+.reveal .slides.staticPage > section {
+  display: block !important;
+}
+.reveal #global-skip-link {
+  display: block;
+  font-size: 0.6em;
+  left: -50000px;
+  padding: 5px 10px;
+  position: fixed;
+  white-space: nowrap;
+}
+.reveal ul#table-of-contents {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+}
+.reveal ul#table-of-contents li {
+  margin: 0;
+  padding: 0;
+}
+.reveal ul#table-of-contents li a {
+  display: block;
+  font-size: 0.6em;
+  left: -50000px;
+  padding: 5px 10px;
+  position: absolute;
+  white-space: nowrap;
+}