Headings and alt text roundup (#11721)

* Adjust heading order

No skipping levels, adding an h1 for the homepage

* Add missing image alt text

* Update after PR review

* Update test snapshot

Co-authored-by: rhymes <rhymes@hey.com>
This commit is contained in:
Marcy Sutton 2020-12-04 06:41:45 -08:00 committed by GitHub
parent a1b9336505
commit b04b5bcb57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 23 additions and 21 deletions

View file

@ -289,11 +289,11 @@ function buildArticleHTML(article) {
${meta}
</div>\
<div class="crayons-story__indention">
<h2 class="crayons-story__title">
<h3 class="crayons-story__title">
<a href="${article.path}" id="article-link-${article.id}">
${filterXSS(article.title)}
</a>
</h2>\
</h3>\
<div class="crayons-story__tags">
${tagString}
</div>\

View file

@ -82,7 +82,7 @@ Object {
<div
class="crayons-story__indention"
>
<h2
<h3
class="crayons-story__title"
>
<a
@ -93,7 +93,7 @@ Object {
Unbranded Home Loan Account
</span>
</a>
</h2>
</h3>
<div
class="crayons-story__tags"
>
@ -294,7 +294,7 @@ Object {
<div
class="crayons-story__indention"
>
<h2
<h3
class="crayons-story__title"
>
<a
@ -305,7 +305,7 @@ Object {
Unbranded Home Loan Account
</span>
</a>
</h2>
</h3>
<div
class="crayons-story__tags"
>

View file

@ -2,7 +2,7 @@ import { h } from 'preact';
import { articlePropTypes } from '../../common-prop-types';
export const ContentTitle = ({ article }) => (
<h2 className="crayons-story__title">
<h3 className="crayons-story__title">
<a href={article.path} id={`article-link-${article.id}`}>
{article.class_name === 'PodcastEpisode' && (
<span className="crayons-story__flare-tag">podcast</span>
@ -18,7 +18,7 @@ export const ContentTitle = ({ article }) => (
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: filterXSS(article.title) }} />
</a>
</h2>
</h3>
);
ContentTitle.propTypes = {

View file

@ -35,6 +35,7 @@ const MessageModal = ({
id="new-message"
className="crayons-textfield mb-0"
placeholder="Enter your message here..."
aria-label="Message"
/>
<p className="mb-4 fs-s color-base-60">
{isCurrentUserOnListing &&

View file

@ -2,7 +2,7 @@
<section id="comments" data-updated-at="<%= Time.current %>" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
<% if @article.show_comments %>
<header class="relative flex justify-between items-center mb-6">
<h3 class="crayons-subtitle-1">Discussion</h3>
<h2 class="crayons-subtitle-1">Discussion</h2>
<div id="comment-subscription">
<div role="presentation" class="crayons-btn-group">
<span class="crayons-btn crayons-btn--outlined">Subscribe</span>

View file

@ -7,7 +7,7 @@
</span>
<div class="flex-1">
<h4 class="fs-base fw-bold" id="sidebar-profile--name"></h4>
<h2 class="fs-base fw-bold" id="sidebar-profile--name"></h2>
<small class="fs-s opacity-75" id="sidebar-profile--username"></small>
</div>
</a>
@ -50,7 +50,7 @@
<header class="p-2 pr-0 flex items-center justify-between">
<h3 class="crayons-subtitle-3">My Tags</h3>
<a href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
<%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon") %>
<%= inline_svg_tag("cog.svg", class: "crayons-icon") %>
</a>
</header>
<div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2" style="max-height: 42vh;"></div>

View file

@ -36,7 +36,8 @@
<%# BEGIN Feed menu bar %>
<main class="articles-list crayons-layout__content" id="articles-list" role="main">
<h1 class="visually-hidden-header">Articles</h1>
<h1 class="visually-hidden-header"><%= community_name %></h1>
<%= render(partial: "onboardings/task_card") if user_signed_in? %>
<header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">

View file

@ -8,7 +8,7 @@
<header class="tag-header crayons-card branded-4" style="border-top-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
<div class="flex gap-4">
<% if @tag_model.badge_id && @tag_model.badge %>
<img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
<img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" alt="" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
<% end %>
<div class="flex flex-col w-100 justify-center">
<div class="flex justify-between items-center">

View file

@ -27,7 +27,7 @@
<img alt="onboarding task card image" class="task-card-image" src="<%= safe_logo_url(SiteConfig.onboarding_taskcard_image) %>" />
</div>
<h1 class="task-card-title" id="task-card-title">You're now a part of the community!</h1>
<h2 class="task-card-title" id="task-card-title">You're now a part of the community!</h2>
<p id="task-card-subtitle" class="task-card-subtitle">SUGGESTED THINGS YOU CAN DO</p>
<ul class="task-card-actions">
<li class="task-card-action">

View file

@ -54,7 +54,7 @@
<% end %>
<% if tag.badge_id && tag.badge %>
<img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg);" class="right-1 bottom-1 absolute" />
<img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg);" class="right-1 bottom-1 absolute" alt="" />
<% end %>
</div>
<% end %>

View file

@ -3,13 +3,13 @@
<% if @comments.present? %>
<% if params[:view] == "comments" %>
<div class="crayons-card__header">
<h4 class="crayons-subtitle-2">
<h3 class="crayons-subtitle-2">
<% if @user.comments_count > 250 %>
Last 250 comments
<% else %>
All <%= @user.comments_count %> comments
<% end %>
</h4>
</h3>
<div class="crayons-card__actions">
<a href="<%= @user.path %>" class="crayons-link--branded fs-base">
View all activity
@ -18,18 +18,18 @@
</div>
<% else %>
<div class="crayons-card__header">
<h4 class="crayons-subtitle-2">
<h3 class="crayons-subtitle-2">
Recent comments
</h4>
</h3>
</div>
<% end %>
<% end %>
<% @comments.each do |comment| %>
<% if comment.commentable.present? && comment.commentable.published && !comment.deleted %>
<a href="<%= comment.path %>" class="profile-comment-row ">
<h5 class="fw-bold fs-base m-0 mb-1">
<h4 class="fw-bold fs-base m-0 mb-1">
<%= comment.commentable.title %>
</h5>
</h4>
<div class="inline-flex items-center fs-s gap-2">
<p class="color-base-80">
<%= truncate(strip_tags(comment.processed_html), length: 64).html_safe %>