Expose keyboard shortcuts via tooltips

Fixes #12.
swissspidy · Jul 27, 2018 · 88f55e8 · 88f55e8
1 parent 621a4ad
commit 88f55e8
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 4 deletions.
diff --git a/css/src/preferred-languages.css b/css/src/preferred-languages.css
@@ -99,3 +99,80 @@
 .no-js .user-preferred-languages-wrap {
 	display: none;
 }
+
+/* Tooltips inspired by https://github.com/primer/primer */
+
+@keyframes tooltip-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.tooltipped {
+	position: relative;
+}
+
+.tooltipped:hover:before,
+.tooltipped:active:before,
+.tooltipped:focus:before,
+.tooltipped:hover:after,
+.tooltipped:active:after,
+.tooltipped:focus:after {
+	opacity: 1;
+	display: inline-block;
+	text-decoration: none;
+	animation-name: tooltip-appear;
+	animation-duration: .1s;
+	animation-fill-mode: backwards;
+	animation-timing-function: ease-in;
+	animation-delay: .4s;
+}
+
+.tooltipped:before {
+	position: absolute;
+	z-index: 1000001;
+	display: none;
+	width: 0;
+	height: 0;
+	color: #191E23;
+	pointer-events: none;
+	content: "";
+	border: 6px solid transparent;
+	opacity: 0;
+	top: -7px;
+	right: 50%;
+	bottom: auto;
+	margin-right: -6px;
+	border-top-color: #191E23;
+}
+
+.tooltipped:after {
+	position: absolute;
+	z-index: 1000000;
+	display: none;
+	padding: .5em .75em;
+	font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+	-webkit-font-smoothing: subpixel-antialiased;
+	color: #fff;
+	text-align: center;
+	text-decoration: none;
+	text-shadow: none;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: break-word;
+	white-space: pre;
+	pointer-events: none;
+	content: attr(data-tooltip);
+	background: #191E23;
+	border-radius: 3px;
+	opacity: 0;
+	right: auto;
+	left: 50%;
+	margin-left: -16px;
+	bottom: 100%;
+	margin-bottom: 6px;
+}
diff --git a/inc/functions.php b/inc/functions.php
@@ -498,6 +498,18 @@ function preferred_languages_display_form( $args = array() ) {
 		}
 	}
 
+	/* translators: accessibility text */
+	$label_up = __( 'Move up (Alt+Up)', 'preferred-languages' );
+
+	/* translators: accessibility text */
+	$label_down = __( 'Move down (Alt+Down)', 'preferred-languages' );
+
+	/* translators: accessibility text */
+	$label_remove = __( 'Remove from list (Alt+Delete)', 'preferred-languages' );
+
+	/* translators: accessibility text */
+	$label_add = __( 'Add to list (Alt+A)', 'preferred-languages' );
+
 	?>
 	<div class="preferred-languages">
 		<input type="hidden" name="preferred_languages" value="<?php echo esc_attr( implode( ',', $args['selected'] ) ); ?>"/>
@@ -545,27 +557,33 @@ class="active-locale">
 					<li>
 						<button
 							aria-keyshortcuts="Alt+ArrowUp"
+							aria-label="<?php esc_attr( $label_up ); ?>"
 							aria-disabled="false"
+							data-tooltip="Alt+Up"
 							type="button"
-							class="button locales-move-up">
+							class="button locales-move-up tooltipped">
 							<?php _e( 'Move Up', 'preferred-languages' ); ?>
 						</button>
 					</li>
 					<li>
 						<button
 							aria-keyshortcuts="Alt+ArrowDown"
+							aria-label="<?php esc_attr( $label_down ); ?>"
 							aria-disabled="false"
+							data-tooltip="Alt+Down"
 							type="button"
-							class="button locales-move-down">
+							class="button locales-move-down tooltipped">
 							<?php _e( 'Move Down', 'preferred-languages' ); ?>
 						</button>
 					</li>
 					<li>
 						<button
 							aria-keyshortcuts="Alt+Delete"
+							aria-label="<?php esc_attr( $label_remove ); ?>"
 							aria-disabled="false"
+							data-tooltip="Alt+Delete"
 							type="button"
-							class="button locales-remove">
+							class="button locales-remove tooltipped">
 							<?php _e( 'Remove', 'preferred-languages' ); ?>
 						</button>
 					</li>
@@ -588,7 +606,16 @@ class="button locales-remove">
 				?>
 			</div>
 			<div class="inactive-locales-controls">
-				<button type="button" class="button locales-add" data-action="add"><?php _e( 'Add', 'preferred-languages' ); ?></button>
+				<button
+					aria-keyshortcuts="Alt+A"
+					aria-label="<?php esc_attr( $label_add ); ?>"
+					aria-disabled="false"
+					data-tooltip="Alt+A"
+					type="button"
+					class="button locales-add tooltipped"
+				>
+					<?php _e( 'Add', 'preferred-languages' ); ?>
+				</button>
 			</div>
 		</div>
 		<?php