Improve accessibility of story comments list

This commit is contained in:
Tetrakern 2023-01-23 04:20:05 +01:00
parent 972365ea9e
commit 23fd9cf19f
7 changed files with 23 additions and 21 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -204,8 +204,8 @@ if ( ! function_exists( 'fictioneer_request_story_comments' ) ) {
$load_n = $remaining > $comments_per_page ? $comments_per_page : $remaining;
// Start HTML ---> ?>
<button onclick="fcn_loadStoryComments()" class="load-more-comments-button">
<?php
<li class="load-more-list-item">
<button onclick="fcn_loadStoryComments()" class="load-more-comments-button"><?php
printf(
_n(
'Load next comment (may contain spoilers)',
@ -215,8 +215,8 @@ if ( ! function_exists( 'fictioneer_request_story_comments' ) ) {
),
$load_n
);
?>
</button>
?></button>
</li>
<div class="comments-loading-placeholder hidden"><i class="fas fa-spinner spinner"></i></div>
<?php // <--- End HTML
}

2
js/story.min.js vendored
View File

@ -1 +1 @@
var fcn_storyCommentPage=1;function fcn_loadStoryComments(){let e;_$(".load-more-comments-button").remove(),_$(".comments-loading-placeholder").classList.remove("hidden");let t={action:"fictioneer_request_story_comments",post_id:fcn_inlineStorage.postId,page:fcn_storyCommentPage};fcn_ajaxGet(t).then((t=>{t.success?(_$(".fictioneer-comments__list > ul").innerHTML+=t.data.html,fcn_storyCommentPage++):t.data?.error&&(e=fcn_buildErrorNotice(t.data.error))})).catch((t=>{e=fcn_buildErrorNotice(t)})).then((()=>{_$(".comments-loading-placeholder").remove(),e&&_$(".fictioneer-comments__list > ul").appendChild(e)}))}
var fcn_storyCommentPage=1;function fcn_loadStoryComments(){let e;_$(".load-more-list-item").remove(),_$(".comments-loading-placeholder").classList.remove("hidden");let t={action:"fictioneer_request_story_comments",post_id:fcn_inlineStorage.postId,page:fcn_storyCommentPage};fcn_ajaxGet(t).then((t=>{t.success?(_$(".fictioneer-comments__list > ul").innerHTML+=t.data.html,fcn_storyCommentPage++):t.data?.error&&(e=fcn_buildErrorNotice(t.data.error))})).catch((t=>{e=fcn_buildErrorNotice(t)})).then((()=>{_$(".comments-loading-placeholder").remove(),e&&_$(".fictioneer-comments__list > ul").appendChild(e)}))}

View File

@ -50,6 +50,7 @@ $hook_args = array(
<div class="fictioneer-comments__list">
<ul>
<li class="load-more-list-item">
<button onclick="fcn_loadStoryComments()" class="load-more-comments-button"><?php
$load_n = $story['comment_count'] < get_option( 'comments_per_page' ) ? $story['comment_count'] : get_option( 'comments_per_page' );
@ -63,6 +64,7 @@ $hook_args = array(
$load_n
);
?></button>
</li>
<div class="comments-loading-placeholder hidden"><i class="fa-solid fa-spinner spinner"></i></div>
</ul>
</div>

View File

@ -19,7 +19,7 @@ function fcn_loadStoryComments() {
let errorNote;
// Prepare view
_$('.load-more-comments-button').remove();
_$('.load-more-list-item').remove();
_$('.comments-loading-placeholder').classList.remove('hidden');
// Payload

View File

@ -280,7 +280,7 @@
margin-top: 40px;
}
.load-more-comments-button {
.load-more-list-item {
&:not(:first-child) {
margin-top: 16px;
}