From 74ccfe4234a26d555ce3d7e53862cbeffc84b172 Mon Sep 17 00:00:00 2001 From: Jefferson Rabb Date: Sat, 2 Mar 2019 15:56:40 -0500 Subject: [PATCH 1/5] Replace Slideshow buttons with A tags. Hide inner text in links. Disable ESLint rule related to anchors without HREFs. --- .../extensions/slideshow/slideshow.js | 23 ++++++++++++++----- .../gutenberg/extensions/slideshow/style.scss | 4 ++++ 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/client/gutenberg/extensions/slideshow/slideshow.js b/client/gutenberg/extensions/slideshow/slideshow.js index a11a799fc1727..033361902fe95 100644 --- a/client/gutenberg/extensions/slideshow/slideshow.js +++ b/client/gutenberg/extensions/slideshow/slideshow.js @@ -105,6 +105,7 @@ class Slideshow extends Component { const { autoplay, className, delay, effect, images } = this.props; // Note: React omits the data attribute if the value is null, but NOT if it is false. // This is the reason for the unusual logic related to autoplay below. + /* eslint-disable jsx-a11y/anchor-is-valid */ return (
-
); + /* eslint-enable jsx-a11y/anchor-is-valid */ } prefersReducedMotion = () => { diff --git a/client/gutenberg/extensions/slideshow/style.scss b/client/gutenberg/extensions/slideshow/style.scss index 0fae0d76ebb10..a1fcae4e1dc10 100644 --- a/client/gutenberg/extensions/slideshow/style.scss +++ b/client/gutenberg/extensions/slideshow/style.scss @@ -49,6 +49,7 @@ object-fit: contain; } + /* Approach to hiding text in the buttons from http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */ .wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next, .wp-block-jetpack-slideshow_button-pause { @@ -60,8 +61,11 @@ border-radius: 4px; height: 48px; margin: -24px 0 0; + overflow: hidden; padding: 0; + text-indent: 100%; transition: background-color 250ms; + white-space: nowrap; width: 48px; &:focus, From b7a222c34df29e69943a78b9d9e413ff283d6198 Mon Sep 17 00:00:00 2001 From: Jefferson Rabb Date: Mon, 4 Mar 2019 11:37:32 -0500 Subject: [PATCH 2/5] Remove text from PREV/NEXT/PAUSE buttons, to avoid block invalidation after language change. --- client/gutenberg/extensions/slideshow/slideshow.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/client/gutenberg/extensions/slideshow/slideshow.js b/client/gutenberg/extensions/slideshow/slideshow.js index 033361902fe95..6543c6490c254 100644 --- a/client/gutenberg/extensions/slideshow/slideshow.js +++ b/client/gutenberg/extensions/slideshow/slideshow.js @@ -156,23 +156,17 @@ class Slideshow extends Component { className="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" ref={ this.btnPrevRef } role="button" - > - { __( 'Previous Slide' ) } - + /> - { __( 'Next Slide' ) } - + /> - { __( 'Pause Slideshow' ) } - + /> ); From df87b13d701bf9a43c4053985618502467e1a192 Mon Sep 17 00:00:00 2001 From: Jefferson Rabb Date: Mon, 4 Mar 2019 11:45:10 -0500 Subject: [PATCH 3/5] Reposition bullets element below buttons (no visible change). --- client/gutenberg/extensions/slideshow/slideshow.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/gutenberg/extensions/slideshow/slideshow.js b/client/gutenberg/extensions/slideshow/slideshow.js index 6543c6490c254..c3bc3c9153dcc 100644 --- a/client/gutenberg/extensions/slideshow/slideshow.js +++ b/client/gutenberg/extensions/slideshow/slideshow.js @@ -148,10 +148,6 @@ class Slideshow extends Component { ) ) } -
+
); From ec89684d16f902d11d9247f8902f447883cece1e Mon Sep 17 00:00:00 2001 From: Jefferson Rabb Date: Mon, 4 Mar 2019 13:12:43 -0500 Subject: [PATCH 4/5] Remove localization of text for initial autoplay Pause button state. All a11y label localization will be addressed as a later block of work. --- client/gutenberg/extensions/slideshow/slideshow.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/gutenberg/extensions/slideshow/slideshow.js b/client/gutenberg/extensions/slideshow/slideshow.js index c3bc3c9153dcc..722fbebecda4e 100644 --- a/client/gutenberg/extensions/slideshow/slideshow.js +++ b/client/gutenberg/extensions/slideshow/slideshow.js @@ -3,7 +3,6 @@ */ import ResizeObserver from 'resize-observer-polyfill'; import classnames from 'classnames'; -import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n'; import { Component, createRef } from '@wordpress/element'; import { isBlobURL } from '@wordpress/blob'; import { isEqual } from 'lodash'; @@ -159,7 +158,7 @@ class Slideshow extends Component { role="button" /> From 3228ceaa8f6ce946b1d99eb6aea6b6face138f4f Mon Sep 17 00:00:00 2001 From: Jefferson Rabb Date: Mon, 4 Mar 2019 15:18:29 -0500 Subject: [PATCH 5/5] Removing unneeded CSS now that buttons have no inner content. --- client/gutenberg/extensions/slideshow/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/gutenberg/extensions/slideshow/style.scss b/client/gutenberg/extensions/slideshow/style.scss index a1fcae4e1dc10..0fae0d76ebb10 100644 --- a/client/gutenberg/extensions/slideshow/style.scss +++ b/client/gutenberg/extensions/slideshow/style.scss @@ -49,7 +49,6 @@ object-fit: contain; } - /* Approach to hiding text in the buttons from http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */ .wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next, .wp-block-jetpack-slideshow_button-pause { @@ -61,11 +60,8 @@ border-radius: 4px; height: 48px; margin: -24px 0 0; - overflow: hidden; padding: 0; - text-indent: 100%; transition: background-color 250ms; - white-space: nowrap; width: 48px; &:focus,