Improve accessibility

This commit is contained in:
Tetrakern 2023-01-23 16:27:52 +01:00
parent bcab84ac88
commit 0b784b8b6a
6 changed files with 32 additions and 20 deletions

View File

@ -586,7 +586,7 @@ if ( ! function_exists( 'fictioneer_get_subscribe_options' ) ) {
if ( $feed ) {
ob_start();
// Start HTML ---> ?>
<a href="https://feedly.com/i/subscription/feed/<?php echo urlencode( $feed ); ?>" target="_blank" rel="noopener" class="_align-left">
<a href="https://feedly.com/i/subscription/feed/<?php echo urlencode( $feed ); ?>" target="_blank" rel="noopener" class="_align-left" aria-label="<?php esc_attr_e( 'Follow on Feedly', 'fictioneer' ); ?>">
<?php fictioneer_icon( 'feedly' ); ?> <span><?php _e( 'Follow on Feedly', 'fictioneer' ); ?></span>
</a>
<?php // <--- End HTML
@ -594,7 +594,7 @@ if ( ! function_exists( 'fictioneer_get_subscribe_options' ) ) {
ob_start();
// Start HTML ---> ?>
<a href="https://www.inoreader.com/?add_feed=<?php echo urlencode( $feed ); ?>" target="_blank" rel="noopener" class="_align-left" >
<a href="https://www.inoreader.com/?add_feed=<?php echo urlencode( $feed ); ?>" target="_blank" rel="noopener" class="_align-left" aria-label="<?php esc_attr_e( 'Follow on Inoreader', 'fictioneer' ); ?>">
<?php fictioneer_icon( 'inoreader' ); ?> <span><?php _e( 'Follow on Inoreader', 'fictioneer' ); ?></span>
</a>
<?php // <--- End HTML

View File

@ -847,7 +847,8 @@ if ( ! function_exists( 'fictioneer_embed_consent_wrappers' ) ) {
$iframe->removeAttribute('src');
$consent_element = $dom->createElement( 'div' );
$consent_element = $dom->createElement( 'button' );
$consent_element->setAttribute( 'type', 'button' );
$consent_element->setAttribute( 'class', 'iframe-consent' );
$consent_element->setAttribute( 'data-src', $src );
$consent_element->nodeValue = sprintf(

View File

@ -348,7 +348,7 @@ if ( ! function_exists( 'fictioneer_comment_mod_menu' ) ) {
// Buffer and return
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-mod-menu-toggle toggle-last-clicked hide-if-logged-out only-moderators"><i class="fa-solid fa-gear"></i></div>
<button type="button" class="fictioneer-mod-menu-toggle toggle-last-clicked hide-if-logged-out only-moderators"><i class="fa-solid fa-gear"></i></button>
<div class="popup-menu hide-if-logged-out only-moderators">
<?php if ( get_option( 'fictioneer_enable_ajax_comment_moderation' ) ) : ?>
<button class="button-ajax-moderate-comment" data-id="<?php echo $comment_id; ?>" data-action="trash"><?php _e( 'Trash', 'fictioneer' ); ?></button>

View File

@ -157,14 +157,18 @@ if ( ! function_exists( 'fictioneer_chapter_resize_buttons' ) ) {
*/
function fictioneer_chapter_resize_buttons() {
$decrease_label = esc_attr__( 'Decrease font size', 'fictioneer' );
$reset_label = esc_attr__( 'Reset font size', 'fictioneer' );
$increase_label = esc_attr__( 'Increase font size', 'fictioneer' );
// Start HTML ---> ?>
<button type="button" id="decrease-font" data-tooltip="<?php esc_attr_e( 'Decrease Font Size', 'fictioneer' ); ?>" data-modifier="-5" class="button _secondary tooltipped _align-left">
<button type="button" id="decrease-font" data-tooltip="<?php echo $decrease_label; ?>" data-modifier="-5" class="button _secondary tooltipped" aria-label="<?php echo $decrease_label; ?>">
<?php fictioneer_icon( 'fa-minus' ); ?>
</button>
<button type="reset" id="reset-font" data-tooltip="<?php esc_attr_e( 'Reset Font Size', 'fictioneer' ); ?>" class="button _secondary tooltipped">
<button type="reset" id="reset-font" data-tooltip="<?php echo $reset_label; ?>" class="button _secondary tooltipped" aria-label="<?php echo $decrease_label; ?>">
<?php fictioneer_icon( 'fa-square' ); ?>
</button>
<button type="button" id="increase-font" data-tooltip="<?php esc_attr_e( 'Increase Font Size', 'fictioneer' ); ?>" data-modifier="5" class="button _secondary tooltipped">
<button type="button" id="increase-font" data-tooltip="<?php echo $increase_label; ?>" data-modifier="5" class="button _secondary tooltipped" aria-label="<?php echo $decrease_label; ?>">
<?php fictioneer_icon( 'fa-plus' ); ?>
</button>
<?php // <--- End HTML
@ -191,19 +195,19 @@ if ( ! function_exists( 'fictioneer_chapter_nav_buttons' ) ) {
function fictioneer_chapter_nav_buttons( $args, $location ) {
// Start HTML ---> ?>
<?php if ( $args['prev_index'] !== false ) : ?>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" class="button _secondary _navigation"><?php echo fcntr( 'previous' ) ?></a>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" title="<?php echo esc_attr( fictioneer_get_safe_title( $args['chapter_ids'][ $args['prev_index'] ] ) ); ?>" class="button _secondary _navigation"><?php echo fcntr( 'previous' ) ?></a>
<?php endif; ?>
<?php if ( $location === 'top' ) : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Bottom', 'fictioneer' ); ?>">
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Jump to bottom', 'fictioneer' ); ?>">
<a href="#bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
</div>
<?php else : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Top', 'fictioneer' ); ?>">
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Jump to top', 'fictioneer' ); ?>">
<a href="#" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
</div>
<?php endif; ?>
<?php if ( $args['next_index'] ) : ?>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['next_index'] ] ); ?>" class="button _secondary _navigation"><?php echo fcntr( 'next' ); ?></a>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['next_index'] ] ); ?>" title="<?php echo esc_attr( fictioneer_get_safe_title( $args['chapter_ids'][ $args['next_index'] ] ) ); ?>" class="button _secondary _navigation"><?php echo fcntr( 'next' ); ?></a>
<?php endif; ?>
<?php // <--- End HTML
}
@ -249,10 +253,10 @@ if ( ! function_exists( 'fictioneer_chapter_subscribe_button' ) ) {
if ( ! empty( $subscribe_buttons ) ) {
// Start HTML ---> ?>
<div class="toggle-last-clicked button _secondary popup-menu-toggle">
<button type="button" class="toggle-last-clicked button _secondary popup-menu-toggle">
<i class="fa-solid fa-bell"></i> <span class="hide-below-tablet"><?php echo fcntr( 'subscribe' ); ?></span>
<div class="popup-menu _top _center"><?php echo $subscribe_buttons; ?></div>
</div>
</button>
<?php // <--- End HTML
}
}
@ -271,11 +275,15 @@ if ( ! function_exists( 'fictioneer_chapter_fullscreen_button' ) ) {
*/
function fictioneer_chapter_fullscreen_buttons() {
// Setup
$open = esc_attr__( 'Open fullscreen', 'fictioneer' );
$close = esc_attr__( 'Exit fullscreen', 'fictioneer' );
// Start HTML ---> ?>
<button type="button" data-tooltip="<?php esc_attr_e( 'Open Fullscreen', 'fictioneer' ) ?>" class="open-fullscreen button _secondary button--fullscreen hide-on-fullscreen hide-on-iOS tooltipped">
<button type="button" class="open-fullscreen button _secondary button--fullscreen hide-on-fullscreen hide-on-iOS tooltipped" data-tooltip="<?php echo $open; ?>" aria-label="<?php echo $open; ?>">
<?php fictioneer_icon( 'expand' ); ?>
</button>
<button type="button" data-tooltip="<?php esc_attr_e( 'Exit Fullscreen', 'fictioneer' ) ?>" class="close-fullscreen button _secondary button--fullscreen show-on-fullscreen hide-on-iOS hidden tooltipped">
<button type="button" class="close-fullscreen button _secondary button--fullscreen show-on-fullscreen hide-on-iOS hidden tooltipped" data-tooltip="<?php echo $close; ?>" aria-label="<?php echo $close; ?>">
<?php fictioneer_icon( 'collapse' ); ?>
</button>
<?php // <--- End HTML

View File

@ -134,10 +134,10 @@ if ( ! function_exists( 'fictioneer_post_subscribe_button' ) ) {
if ( ! empty( $subscribe_buttons ) ) {
// Start HTML ---> ?>
<div class="toggle-last-clicked button _secondary popup-menu-toggle">
<button type="button" class="toggle-last-clicked button _secondary popup-menu-toggle">
<i class="fa-solid fa-bell"></i> <span><?php echo fcntr( 'subscribe' ); ?></span>
<div class="popup-menu _top _align-right"><?php echo $subscribe_buttons; ?></div>
</div>
</button>
<?php // <--- End HTML
}
}

View File

@ -32,7 +32,8 @@ $feed = fictioneer_get_rss_link();
class="rss-link tooltipped"
target="_blank"
rel="noopener"
data-tooltip="<?php echo esc_attr_x( 'Story&nbsp;RSS&nbsp;Feed', 'Story RSS Feed tooltip; use nbsp to achieve desired look.', 'fictioneer' ); ?>"
data-tooltip="<?php esc_attr_e( 'Story RSS Feed', 'fictioneer' ); ?>"
aria-label="<?php esc_attr_e( 'Story RSS Feed', 'fictioneer' ); ?>"
><?php fictioneer_icon( 'fa-rss' ); ?></a>
<?php endif; ?>
@ -41,7 +42,8 @@ $feed = fictioneer_get_rss_link();
class="feedly tooltipped hide-below-640"
target="_blank"
rel="noopener"
data-tooltip="<?php echo esc_attr_x( 'Follow&nbsp;on&nbsp;Feedly', 'Follow on Feedly tooltip; use nbsp to achieve desired look.', 'fictioneer' ); ?>"
data-tooltip="<?php esc_attr_e( 'Follow on Feedly', 'fictioneer' ); ?>"
aria-label="<?php esc_attr_e( 'Follow on Feedly', 'fictioneer' ); ?>"
><?php fictioneer_icon( 'feedly' ); ?></a>
<a
@ -49,7 +51,8 @@ $feed = fictioneer_get_rss_link();
class="inoreader tooltipped hide-below-640"
target="_blank"
rel="noopener"
data-tooltip="<?php echo esc_attr_x( 'Follow&nbsp;on&nbsp;Inoreader', 'Follow on Inoreader tooltip; use nbsp to achieve desired look.', 'fictioneer' ); ?>"
data-tooltip="<?php esc_attr_e( 'Follow on Inoreader', 'fictioneer' ); ?>"
aria-label="<?php esc_attr_e( 'Follow on Inoreader', 'fictioneer' ); ?>"
><?php fictioneer_icon( 'inoreader' ); ?></a>
<?php endif; ?>