Make checkmarks tab-able

Author: Tetrakern

css/application.css

@@ -703,7 +703,7 @@ function fictioneer_shortcode_chapter_list( $attr ) {
 
             <?php if ( $can_checkmarks && ! empty( $chapter_story_id ) && get_post_status( $chapter_story_id ) === 'publish' ) : ?>
               <div class="chapter-group__list-item-right">
-                <label class="checkmark chapter-group__list-item-checkmark" data-type="chapter" data-story-id="<?php echo $chapter_story_id; ?>" data-id="<?php echo $post_id; ?>"><i class="fa-solid fa-check"></i></label>
+                <button class="checkmark chapter-group__list-item-checkmark" data-type="chapter" data-story-id="<?php echo $chapter_story_id; ?>" data-id="<?php echo $post_id; ?>"><i class="fa-solid fa-check"></i></button>
               </div>
             <?php endif; ?>
           </li>

css/complete.css

@@ -310,7 +310,7 @@
 
                   <?php if ( get_option( 'fictioneer_enable_checkmarks' ) ) : ?>
                     <div class="chapter-group__list-item-right">
-                      <label class="checkmark chapter-group__list-item-checkmark" data-type="chapter" data-story-id="<?php echo $story_id; ?>" data-id="<?php echo $chapter['id']; ?>"><i class="fa-solid fa-check"></i></label>
+                      <button class="checkmark chapter-group__list-item-checkmark" data-type="chapter" data-story-id="<?php echo $story_id; ?>" data-id="<?php echo $chapter['id']; ?>"><i class="fa-solid fa-check"></i></button>
                     </div>
                   <?php endif; ?>
 

css/story.css

@@ -52,9 +52,9 @@
       <?php echo $story['rating']; ?>
     </span>
     <?php if ( $story['chapter_count'] > 0 ): ?>
-      <label class="checkmark story__meta-checkmark" data-type="story" data-story-id="<?php echo $story_id; ?>" data-id="<?php echo $story_id; ?>" data-status="<?php echo esc_attr( $story['status'] ); ?>">
+      <button class="checkmark story__meta-checkmark" data-type="story" data-story-id="<?php echo $story_id; ?>" data-id="<?php echo $story_id; ?>" data-status="<?php echo esc_attr( $story['status'] ); ?>">
         <i class="fa-solid fa-check"></i>
-      </label>
+      </button>
     <?php endif; ?>
   </div>
 </footer>

includes/functions/_shortcodes.php

@@ -1165,7 +1165,7 @@ _$$('[for*=group-toggle]').forEach(element => {
       list = e.currentTarget.closest('.chapter-group').querySelector('.chapter-group__list');
       list.style.height = '';
 
-      list.querySelectorAll('a').forEach(element => {
+      list.querySelectorAll('a, button').forEach(element => {
         element.tabIndex = element.tabIndex == '-1' ? '0' : '-1';
       });
     }

js/application.min.js

@@ -23,7 +23,7 @@ function fcn_initializeCheckmarks() {
   fcn_fetchCheckmarksFromDatabase();
 
   // Listen for clicks on checkmarks
-  _$$('label.checkmark').forEach(element => {
+  _$$('button.checkmark').forEach(element => {
     element.addEventListener(
       'click',
       (e) => {
@@ -123,7 +123,7 @@ function fcn_toggleCheckmark(story, type, chapter = null, source = null, mode =
 
       // Not complete anymore
       fcn_removeItemOnce(fcn_checkmarks.data[story], story);
-      _$('label[data-type=story]')?.classList.remove('marked');
+      _$('button[data-type=story]')?.classList.remove('marked');
     } else {
       // Add chapter checkmark to JSON
       fcn_checkmarks.data[story].push(chapter);
@@ -142,8 +142,8 @@ function fcn_toggleCheckmark(story, type, chapter = null, source = null, mode =
     fcn_checkmarks.data[story] = [];
 
     if (!unsetAll) {
-      // (Re-)add checkmarks to JSON based on labels
-      _$$('label.checkmark').forEach(item => {
+      // (Re-)add checkmarks to JSON based on buttons
+      _$$('button.checkmark').forEach(item => {
         fcn_checkmarks.data[story].push(parseInt(item.dataset.id));
       });
 
@@ -232,17 +232,17 @@ function fcn_updateCheckmarksView() {
   // Completed story?
   if (completed) {
     // Add all checkmarks (if missing)
-    _$$('label.checkmark').forEach(item => {
+    _$$('button.checkmark').forEach(item => {
       let checkId = parseInt(item.dataset.id);
       if (!fcn_checkmarks.data[storyId].includes(checkId)) fcn_checkmarks.data[storyId].push(checkId);
     });
-
-    // Add ribbon to thumbnail (if any)
-    _$$$('ribbon-read')?.classList.toggle('hidden', !completed);
   }
 
+  // Add ribbon to thumbnail if complete and present
+  _$$$('ribbon-read')?.classList.toggle('hidden', !completed);
+
   // Update checkmarks on story pages
-  _$$('label.checkmark')?.forEach(item => {
+  _$$('button.checkmark')?.forEach(item => {
     let checkStoryId = parseInt(item.dataset.storyId);
     if (!fcn_checkmarks.data.hasOwnProperty(checkStoryId)) return;
     item.classList.toggle('marked', fcn_checkmarks.data[checkStoryId].includes(parseInt(item.dataset.id)));

js/checkmarks.min.js

@@ -283,8 +283,8 @@ $header_breakpoint: 640px;
   }
 
   &__footer {
-    padding-top: 1rem;
-    padding-bottom: 2rem;
+    padding-top: .75rem;
+    padding-bottom: 1.75rem;
   }
 
   &__meta {
@@ -295,15 +295,15 @@ $header_breakpoint: 640px;
     font-family: var(--font-note);
     font-size: var(--fs-ds); // 14px (desktop) to 13px (mobile)
     line-height: 1.75rem;
-    padding-right: 8px;
+    padding: .25rem 8px .25rem 0;
     white-space: nowrap;
 
     > *:not(:first-child) {
       @include bp(640px) {
         margin-left: 1.5rem;
       }
 
-      &:not(label)::before {
+      &:not(.checkmark)::before {
         content: unicode("2022");
         color: var(--fg-800);
         font-family: var(--font-base);
@@ -315,8 +315,8 @@ $header_breakpoint: 640px;
       }
     }
 
-    label {
-      margin-left: 1.5rem;
+    .checkmark {
+      margin-left: 1.25rem;
     }
 
     > span {
@@ -333,8 +333,11 @@ $header_breakpoint: 640px;
   }
 
   .checkmark {
+    --focus-offset: 2px;
     color: var(--fg-600);
     font-size: 18px;
+    padding: 0 4px;
+    margin-right: -4px;
 
     &:not(.marked) {
       color: var(--checkmark-not-checked);

partials/_story-content.php

@@ -638,8 +638,11 @@ html:not(.logged-in) body:not(.logged-in) {
       }
 
       .checkmark {
+        --focus-offset: 2px;
         color: var(--fg-600);
         font-size: 18px;
+        padding: 0 4px;
+        margin-right: -4px;
 
         &:not(.marked) {
           color: var(--checkmark-not-checked);