malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Further improve accessibility

Browse Source 
Make more elements tab-able
This commit is contained in:
Tetrakern 2023-01-23 21:50:45 +01:00
parent e51af33a4c
commit fd1cb92810
8 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

14
includes/functions/_content_helpers.php
View File

@ -642,7 +642,7 @@ if ( ! function_exists( 'fictioneer_get_story_buttons' ) ) {
if ( ! empty( $subscribe_buttons ) ) { if ( ! empty( $subscribe_buttons ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<div class="toggle-last-clicked button _secondary popup-menu-toggle _popup-right-if-last"> <div class="toggle-last-clicked button _secondary popup-menu-toggle _popup-right-if-last" tabindex="0" aria-role="button" aria-label="<?php echo fcntr( 'subscribe', true ); ?>">
<div><i class="fa-solid fa-bell"></i> <span><?php echo fcntr( 'subscribe' ); ?></span></div> <div><i class="fa-solid fa-bell"></i> <span><?php echo fcntr( 'subscribe' ); ?></span></div>
<div class="popup-menu _bottom _center"><?php echo $subscribe_buttons; ?></div> <div class="popup-menu _bottom _center"><?php echo $subscribe_buttons; ?></div>
</div> </div>
@ -653,7 +653,7 @@ if ( ! function_exists( 'fictioneer_get_story_buttons' ) ) {
if ( $show_epub_download && ! $ebook_upload ) { if ( $show_epub_download && ! $ebook_upload ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="<?php echo esc_url( home_url( 'download-epub/' . $args['story_id'] ) ); ?>" class="button _secondary" rel="noreferrer noopener nofollow" download> <a href="<?php echo esc_url( home_url( 'download-epub/' . $args['story_id'] ) ); ?>" class="button _secondary" rel="noreferrer noopener nofollow" aria-label="<?php esc_attr_e( 'Download ePUB', 'fictioneer' ) ?>" download>
<i class="fa-solid fa-cloud-download-alt"></i> <i class="fa-solid fa-cloud-download-alt"></i>
<span class="span-epub hide-below-640"><?php _e( 'ePUB', 'fictioneer' ) ?></span> <span class="span-epub hide-below-640"><?php _e( 'ePUB', 'fictioneer' ) ?></span>
</a> </a>
@ -662,9 +662,9 @@ if ( ! function_exists( 'fictioneer_get_story_buttons' ) ) {
} elseif ( wp_get_attachment_url( $ebook_upload ) ) { } elseif ( wp_get_attachment_url( $ebook_upload ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="<?php echo esc_url( wp_get_attachment_url( $ebook_upload ) ); ?>" class="button _secondary" rel="noreferrer noopener nofollow" download> <a href="<?php echo esc_url( wp_get_attachment_url( $ebook_upload ) ); ?>" class="button _secondary" rel="noreferrer noopener nofollow" aria-label="<?php esc_attr_e( 'Download eBook', 'fictioneer' ) ?>" download>
<i class="fa-solid fa-cloud-download-alt"></i> <i class="fa-solid fa-cloud-download-alt"></i>
<span class="span-epub hide-below-640"><?php _e( 'Ebook', 'fictioneer' ) ?></span> <span class="span-epub hide-below-640"><?php _e( 'eBook', 'fictioneer' ) ?></span>
</a> </a>
<?php // <--- End HTML <?php // <--- End HTML
$output['ebook'] = ob_get_clean(); $output['ebook'] = ob_get_clean();
@ -677,7 +677,7 @@ if ( ! function_exists( 'fictioneer_get_story_buttons' ) ) {
<i class="fa-solid fa-clock"></i> <i class="fa-solid fa-clock"></i>
<span class="span-follow hide-below-480"><?php echo fcntr( 'read_later' ) ?></span> <span class="span-follow hide-below-480"><?php echo fcntr( 'read_later' ) ?></span>
</button> </button>
<label for="modal-login-toggle" class="button _secondary button-read-later-notice hide-if-logged-in tooltipped" data-tooltip="<?php esc_attr_e( 'Log in to set Reminders', 'fictioneer' ); ?>"> <label for="modal-login-toggle" class="button _secondary button-read-later-notice hide-if-logged-in tooltipped" tabindex="0" data-tooltip="<?php esc_attr_e( 'Log in to set Reminders', 'fictioneer' ); ?>">
<i class="fa-solid fa-clock"></i> <i class="fa-solid fa-clock"></i>
<span class="span-follow hide-below-480"><?php echo fcntr( 'read_later' ) ?></span> <span class="span-follow hide-below-480"><?php echo fcntr( 'read_later' ) ?></span>
</label> </label>
@ -692,7 +692,7 @@ if ( ! function_exists( 'fictioneer_get_story_buttons' ) ) {
<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>
<span class="span-follow hide-below-400"><?php echo fcntr( 'follow' ) ?></span> <span class="span-follow hide-below-400"><?php echo fcntr( 'follow' ) ?></span>
</button> </button>
<label for="modal-login-toggle" class="button _secondary button-follow-login-notice hide-if-logged-in tooltipped" data-tooltip="<?php esc_attr_e( 'Log in to Follow', 'fictioneer' ); ?>"> <label for="modal-login-toggle" class="button _secondary button-follow-login-notice hide-if-logged-in tooltipped" tabindex="0" data-tooltip="<?php esc_attr_e( 'Log in to Follow', 'fictioneer' ); ?>">
<i class="fa-regular fa-star off"></i> <i class="fa-regular fa-star off"></i>
<span class="span-follow hide-below-400"><?php echo fcntr( 'follow' ) ?></span> <span class="span-follow hide-below-400"><?php echo fcntr( 'follow' ) ?></span>
</label> </label>
@ -1308,7 +1308,7 @@ if ( ! function_exists( 'fictioneer_get_card_controls' ) ) {
<?php if ( count( $icons ) > 0 ) foreach ( $icons as $icon ) echo $icon; ?> <?php if ( count( $icons ) > 0 ) foreach ( $icons as $icon ) echo $icon; ?>
<?php if ( count( $menu ) > 0 ) : ?> <?php if ( count( $menu ) > 0 ) : ?>
<div class="card__popup-menu-toggle"><i class="fa-solid fa-ellipsis-vertical"></i></div> <div class="card__popup-menu-toggle" tabindex="0"><i class="fa-solid fa-ellipsis-vertical"></i></div>
<div class="popup-menu"><?php foreach ( $menu as $item ) echo $item; ?></div> <div class="popup-menu"><?php foreach ( $menu as $item ) echo $item; ?></div>
<?php endif; ?> <?php endif; ?>

4
includes/functions/hooks/_chapter_hooks.php
View File

@ -253,10 +253,10 @@ if ( ! function_exists( 'fictioneer_chapter_subscribe_button' ) ) {
if ( ! empty( $subscribe_buttons ) ) { if ( ! empty( $subscribe_buttons ) ) {
// Start HTML ---> ?> // Start HTML ---> ?>
<button type="button" class="toggle-last-clicked button _secondary popup-menu-toggle"> <div class="toggle-last-clicked button _secondary popup-menu-toggle" tabindex="0" aria-role="button" aria-label="<?php echo fcntr( 'subscribe', true ); ?>">
<i class="fa-solid fa-bell"></i> <span class="hide-below-tablet"><?php echo fcntr( 'subscribe' ); ?></span> <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 class="popup-menu _top _center"><?php echo $subscribe_buttons; ?></div>
</button> </div>
<?php // <--- End HTML <?php // <--- End HTML
} }
} }

4
includes/functions/hooks/_post_hooks.php
View File

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

12
partials/_story-content.php
View File

@ -90,7 +90,7 @@ $blog_posts = new WP_Query(
<section id="tabs" class="story__tabs tabs-wrapper padding-left padding-right"> <section id="tabs" class="story__tabs tabs-wrapper padding-left padding-right">
<div class="tabs"> <div class="tabs">
<label id="chapter-tab" for="toggle-chapter" class="tabs__item"> <label id="chapter-tab" for="toggle-chapter" class="tabs__item" tabindex="0">
<?php <?php
if ( $story['status'] === 'Oneshot' ) { if ( $story['status'] === 'Oneshot' ) {
_e( 'Oneshot', 'fictioneer' ); _e( 'Oneshot', 'fictioneer' );
@ -105,7 +105,7 @@ $blog_posts = new WP_Query(
</label> </label>
<?php if ( $blog_posts->have_posts() ) : ?> <?php if ( $blog_posts->have_posts() ) : ?>
<label id="blog-tab" for="toggle-blog" class="tabs__item"><?php echo fcntr( 'story_blog' ); ?></label> <label id="blog-tab" for="toggle-blog" class="tabs__item" tabindex="0"><?php echo fcntr( 'story_blog' ); ?></label>
<?php endif; ?> <?php endif; ?>
<?php <?php
@ -114,7 +114,7 @@ $blog_posts = new WP_Query(
foreach ( $tab_pages as $page ) { foreach ( $tab_pages as $page ) {
if ( empty( $page[1] ) ) continue; if ( empty( $page[1] ) ) continue;
echo '<label id="custom-tab-' . $index . '" for="toggle-custom-' . $index . '" class="tabs__item">' . $page[1] . '</label>'; echo '<label tabindex="0" id="custom-tab-' . $index . '" for="toggle-custom-' . $index . '" class="tabs__item">' . $page[1] . '</label>';
$index++; $index++;
if ( $index > 3) break; // Only show 4 custom tabs if ( $index > 3) break; // Only show 4 custom tabs
} }
@ -123,11 +123,11 @@ $blog_posts = new WP_Query(
</div> </div>
<div class="story__chapter-list-toggles"> <div class="story__chapter-list-toggles">
<label class="list-button story__toggle _view" for="toggle-view"> <label class="list-button story__toggle _view" for="toggle-view" tabindex="0">
<?php fictioneer_icon( 'grid-2x2', 'on' ); ?> <?php fictioneer_icon( 'grid-2x2', 'on' ); ?>
<i class="fa-solid fa-list off"></i> <i class="fa-solid fa-list off"></i>
</label> </label>
<label class="list-button story__toggle _order" for="toggle-order"> <label class="list-button story__toggle _order" for="toggle-order" tabindex="0">
<i class="fa-solid fa-arrow-down-1-9 off"></i> <i class="fa-solid fa-arrow-down-1-9 off"></i>
<i class="fa-solid fa-arrow-down-9-1 on"></i> <i class="fa-solid fa-arrow-down-9-1 on"></i>
</label> </label>
@ -251,7 +251,7 @@ $blog_posts = new WP_Query(
<?php if ( $is_collapsed && $index == $above_collapse + 1 ) : ?> <?php if ( $is_collapsed && $index == $above_collapse + 1 ) : ?>
<input id="chapters-toggle-<?php echo $group_index; ?>" type="checkbox" autocomplete="off" hidden> <input id="chapters-toggle-<?php echo $group_index; ?>" type="checkbox" autocomplete="off" hidden>
<li class="chapter-group__list-item _collapse" style="order: <?php echo $reverse_order - $index; ?>"> <li class="chapter-group__list-item _collapse" style="order: <?php echo $reverse_order - $index; ?>" tabindex="0">
<label for="chapters-toggle-<?php echo $group_index; ?>"> <label for="chapters-toggle-<?php echo $group_index; ?>">
<span><?php printf( __( 'Show %s more', 'fictioneer' ), count( $group['data'] ) - $above_collapse * 2 ) ?></span> <span><?php printf( __( 'Show %s more', 'fictioneer' ), count( $group['data'] ) - $above_collapse * 2 ) ?></span>
</label> </label>

2
src/scss/common/_base.scss
View File

@ -692,7 +692,7 @@ html:not(.logged-in) body:not(.logged-in) {
.list-button { .list-button {
color: var(--fg-900); color: var(--fg-900);
font-size: var(--fs-s); font-size: var(--fs-s);
padding: 5px 4px 4px 8px; padding: 5px 6px 4px;
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {

1
src/scss/common/_tabs.scss
View File

@ -8,6 +8,7 @@
} }
&__item { &__item {
--focus-offset: -2px;
background: var(--tab-background-inactive); background: var(--tab-background-inactive);
color: var(--tab-text-inactive); color: var(--tab-text-inactive);
font-size: var(--fs-dxs); font-size: var(--fs-dxs);