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:
parent
a1b9336505
commit
b04b5bcb57
11 changed files with 23 additions and 21 deletions
|
|
@ -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>\
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue