Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slideshow: Replace Buttons With A Tags #31175

Merged
merged 5 commits into from
Mar 4, 2019
Merged

Slideshow: Replace Buttons With A Tags #31175

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
74ccfe4
Replace Slideshow buttons with A tags. Hide inner text in links. Disa…
jeffersonrabb Mar 2, 2019
b7a222c
Remove text from PREV/NEXT/PAUSE buttons, to avoid block invalidation…
jeffersonrabb Mar 4, 2019
df87b13
Reposition bullets element below buttons (no visible change).
jeffersonrabb Mar 4, 2019
ec89684
Remove localization of text for initial autoplay Pause button state. …
jeffersonrabb Mar 4, 2019
3228cea
Removing unneeded CSS now that buttons have no inner content.
jeffersonrabb Mar 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions client/gutenberg/extensions/slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -105,6 +104,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 (
<div
className={ className }
Expand Down Expand Up @@ -147,25 +147,29 @@ class Slideshow extends Component {
</li>
) ) }
</ul>
<div
className="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"
ref={ this.paginationRef }
/>
<button
<a
className="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white"
ref={ this.btnPrevRef }
role="button"
/>
<button
<a
className="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white"
ref={ this.btnNextRef }
role="button"
/>
<button
aria-label={ __( 'Pause Slideshow' ) }
<a
aria-label="Pause Slideshow"
className="wp-block-jetpack-slideshow_button-pause"
role="button"
/>
<div
className="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"
ref={ this.paginationRef }
/>
</div>
</div>
);
/* eslint-enable jsx-a11y/anchor-is-valid */
}

prefersReducedMotion = () => {
Expand Down