Improve a11y in moderation panel (#8364)
This commit is contained in:
rhymes
GitHub
parent
14213362a7
commit
071f7b0d5c
2 changed files with 36 additions and 16 deletions
|
|
@ -1,10 +1,21 @@
|
|||
/** This initializes the mod actions button on the article show page (app/views/articles/show.html.erb). */
|
||||
export default function initializeActionsPanel(user, path) {
|
||||
const modActionsMenuHTML = `<iframe id="mod-container" src=${path}/actions_panel></iframe>`;
|
||||
const modActionsMenuIconHTML = `<div class="mod-actions-menu-btn crayons-btn crayons-btn--icon-rounded crayons-btn--s">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54px" height="54px" viewBox="-8 -8 40 40" class="crayons-icon actions-menu-svg" role="img" aria-labelledby=""><title id="">Moderation</title><path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"></path></svg>
|
||||
</div>
|
||||
`;
|
||||
const modActionsMenuHTML = `
|
||||
<iframe id="mod-container" src=${path}/actions_panel title="Moderation panel actions">
|
||||
</iframe>
|
||||
`;
|
||||
|
||||
const modActionsMenuIconHTML = `
|
||||
<button class="mod-actions-menu-btn crayons-btn crayons-btn--icon-rounded crayons-btn--s">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="54px" height="54px"
|
||||
viewBox="-8 -8 40 40" class="crayons-icon actions-menu-svg" role="img"
|
||||
aria-labelledby="d6cd43ffbad3fe639e2e95c901ee88c8">
|
||||
<title id="d6cd43ffbad3fe639e2e95c901ee88c8">Moderation</title>
|
||||
<path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
function toggleModActionsMenu() {
|
||||
document.querySelector('.mod-actions-menu').classList.toggle('showing');
|
||||
|
|
|
|||
|
|
@ -13,9 +13,10 @@
|
|||
<h1>Moderate Post</h1>
|
||||
<h2>Rate the quality of this post</h2>
|
||||
<button class="close-actions-panel circle centered-icon" type="button" title="Close moderator actions panel">
|
||||
<%= inline_svg_tag("chevron-right.svg", aria: false) %>
|
||||
<%= inline_svg_tag("chevron-right.svg", aria: true, title: "Close moderator actions panel") %>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="reactions-container">
|
||||
<div class="thumb-reactions-container">
|
||||
<button class="reaction-button <%= Reaction.cached_any_reactions_for?(@moderatable, current_user, "thumbsup") ? "reacted" : "" %>"
|
||||
|
|
@ -53,16 +54,18 @@
|
|||
<a href="<%= URL.url %>/community-moderation#using-the-quick-reactions-to-moderate-content" target="_blank" rel="noopener">
|
||||
<span class="how-this-works-section">
|
||||
How does this work?
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true) %>
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="other-things-container">
|
||||
<header class="other-things">
|
||||
<h1>Other things you can do</h1>
|
||||
</header>
|
||||
|
||||
<% if current_user.any_admin? || @should_show_adjust_tags %>
|
||||
<button class="other-things-btn adjust-tags" type="button" data-other-things-type="adjust-tags">
|
||||
<button class="other-things-btn adjust-tags" type="button" data-other-things-type="adjust-tags" aria-label="Open adjust tags section">
|
||||
<div class="label-wrapper">
|
||||
<div class="icon circle centered-icon">
|
||||
<%= inline_svg_tag("mod-filled.svg", aria: true, title: "Adjust tags") %>
|
||||
|
|
@ -73,9 +76,10 @@
|
|||
</header>
|
||||
</div>
|
||||
<div class="toggle-chevron-container">
|
||||
<%= inline_svg_tag("chevron-toggle.svg", aria: false) %>
|
||||
<%= inline_svg_tag("chevron-toggle.svg", aria: true, title: "Toggle section") %>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="adjust-tags-options dropdown-options hidden">
|
||||
<% if current_user.any_admin? %>
|
||||
<% if @moderatable.tag_list.size < 4 %>
|
||||
|
|
@ -83,21 +87,23 @@
|
|||
<input id="admin-add-tag" class="crayons-textfield" type="text" placeholder="Add a tag" data-article-id="<%= @moderatable.id %>" data-adjustment-type="plus">
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% @moderatable.tags.each do |tag| %>
|
||||
<button class="adjustable-tag" type="button" data-adjustment-type="subtract" data-tag-name="<%= tag.name %>" data-article-id="<%= @moderatable.id %>">
|
||||
<span class="num-sign">#</span><%= tag.name %>
|
||||
<div class="circle centered-icon adjustment-icon subtract">
|
||||
<%= inline_svg_tag("subtract.svg", aria: false) %>
|
||||
<%= inline_svg_tag("subtract.svg", aria: true, title: "Remove tag") %>
|
||||
</div>
|
||||
</button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% @tag_moderator_tags.each do |tag| %>
|
||||
<% subtract_or_plus = @moderatable.tag_list.include?(tag.name) ? "subtract" : "plus" %>
|
||||
<% subtract_or_plus_title = subtract_or_plus == "subtract" ? "Remove tag" : "Add tag" %>
|
||||
<button class="adjustable-tag" type="button" data-adjustment-type="<%= subtract_or_plus %>" data-tag-name="<%= tag.name %>" data-article-id="<%= @moderatable.id %>">
|
||||
<span class="num-sign">#</span><%= tag.name %>
|
||||
<div class="circle centered-icon adjustment-icon <%= subtract_or_plus %>">
|
||||
<%= inline_svg_tag("#{subtract_or_plus}.svg", aria: false) %>
|
||||
<%= inline_svg_tag("#{subtract_or_plus}.svg", aria: true, title: subtract_or_plus_title) %>
|
||||
</div>
|
||||
</button>
|
||||
<% end %>
|
||||
|
|
@ -109,16 +115,17 @@
|
|||
<a href="<%= URL.url %>/tag-moderation#how-to-remove-or-add-tags" target="_blank" rel="noopener">
|
||||
<span class="how-this-works-section">
|
||||
How does this work?
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true) %>
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% @rating_vote = RatingVote.where(article_id: @moderatable.id, user_id: current_user.id).first %>
|
||||
<button class="other-things-btn set-experience" type="button" data-other-things-type="set-experience">
|
||||
<button class="other-things-btn set-experience" type="button" data-other-things-type="set-experience" aria-label="Open experience level section">
|
||||
<div class="label-wrapper">
|
||||
<div class="icon circle centered-icon">
|
||||
<%= inline_svg_tag("book.svg", aria: false) %>
|
||||
<%= inline_svg_tag("book.svg", aria: true, title: "Book") %>
|
||||
</div>
|
||||
<header>
|
||||
<h2>Set experience level</h2>
|
||||
|
|
@ -126,9 +133,10 @@
|
|||
</header>
|
||||
</div>
|
||||
<div class="toggle-chevron-container">
|
||||
<%= inline_svg_tag("chevron-toggle.svg", aria: false) %>
|
||||
<%= inline_svg_tag("chevron-toggle.svg", aria: true, title: "Toggle section") %>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="set-experience-options dropdown-options hidden">
|
||||
<% rating_hash = { "Expert" => [10, 5], "Advanced" => [8, 4], "Mid-level" => [5, 3], "Beginner" => [3, 2], "Novice" => [1, 1] } %>
|
||||
<% rating_hash.each do |rating_name, rating_level| %>
|
||||
|
|
@ -150,11 +158,12 @@
|
|||
<a href="<%= URL.url %>/community-moderation#how-to-rate-the-experience-level-of-a-post" target="_blank" rel="noopener">
|
||||
<span class="how-this-works-section">
|
||||
How does this work?
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true) %>
|
||||
<%= inline_svg_tag("external-link-logo.svg", aria: true, title: "External link") %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<button id="open-flag-user-modal" type="button">Flag user</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue