Remove HTML errors (PR n°2 - fixed) (#13350)

* delete alt attribute on span

* delete role checkbox on button - add type button

* delete wrong aria label

* sidebar-nav as class not ID

* delete duplicate attr class on single story

* delete duplicate attr class sidebar nav

* Revert "delete role checkbox on button - add type button"

This reverts commit 456fa676ff4457ffa724e9a07a3f123149dc5f39.

* delete role checkbox and modidy spec login modal js

* no need for name in cypress test showloginmodal anymore

* add attr data-test-id

* replace attr defer with DOMContentLoaded event

* delete useless class

* better a11y approach for button and cypress tests

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* better a11y approach for button and cypress tests

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* discussion_r612278777 : change initialize article reactions js

* revert replacing `const` with `let`

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* revert replacing `const` with `let`

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* apply `aria-hidden` on all reaction svg

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* keep original text `Saved` for bookmark button

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* fix missing aria-label on load - reaction button

* Revert "replace attr defer with DOMContentLoaded event"

This reverts commit db6a7eec051c443c18c17e23cf331132b222011f.

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/assets/javascripts/initializers/initializeArticleReactions.js

@@ -17,12 +17,26 @@ function setReactionCount(reactionName, newCount) {
   }
 }
 
+function getReactionAriaLabel(reactionName, reacted) {
+  switch (reactionName) {
+    case 'readinglist':
+      return reacted ? 'Remove from reading list' : 'Add to reading list';
+    case 'unicorn':
+      return reacted ? 'Remove unicorn reaction' : 'React with unicorn';
+    case 'like':
+      return reacted ? 'Unlike' : 'Like';
+  }
+}
+
 function showUserReaction(reactionName, animatedClass) {
   const reactionButton = document.getElementById(
     'reaction-butt-' + reactionName,
   );
   reactionButton.classList.add('user-activated', animatedClass);
-  reactionButton.setAttribute('aria-checked', 'true');
+  reactionButton.setAttribute(
+    'aria-label',
+    getReactionAriaLabel(reactionName, true),
+  );
 }
 
 function hideUserReaction(reactionName) {
@@ -30,7 +44,10 @@ function hideUserReaction(reactionName) {
     'reaction-butt-' + reactionName,
   );
   reactionButton.classList.remove('user-activated', 'user-animated');
-  reactionButton.setAttribute('aria-checked', 'false');
+  reactionButton.setAttribute(
+    'aria-label',
+    getReactionAriaLabel(reactionName, false),
+  );
 }
 
 function hasUserReacted(reactionName) {

app/views/articles/_actions.html.erb

@@ -7,21 +7,24 @@
                    category: :like,
                    description: "Heart",
                    image_path: "heart.svg",
-                   image_active_path: "heart-filled.svg"
+                   image_active_path: "heart-filled.svg",
+                   aria_label: "Like"
                  } %>
       <%= render partial: "articles/reaction_button",
                  locals: {
                    category: :unicorn,
                    description: "Unicorn",
                    image_path: "unicorn.svg",
-                   image_active_path: "unicorn-filled.svg"
+                   image_active_path: "unicorn-filled.svg",
+                   aria_label: "React with unicorn"
                  } %>
       <%= render partial: "articles/reaction_button",
                  locals: {
                    category: :readinglist,
                    description: "Saved",
                    image_path: "save.svg",
-                   image_active_path: "save-filled.svg"
+                   image_active_path: "save-filled.svg",
+                   aria_label: "Add to reading list"
                  } %>
     <% end %>
 

app/views/articles/_reaction_button.html.erb

@@ -1,16 +1,16 @@
 <button
-  role="checkbox"
   id="reaction-butt-<%= category %>"
+  aria-label="<%= aria_label %>"
   class="crayons-reaction crayons-reaction--<%= category %>"
   data-category="<%= category %>"
   title="<%= description %>">
   <span class="crayons-reaction__icon crayons-reaction__icon--inactive">
-    <%= inline_svg_tag(image_path, aria: true, class: "crayons-icon", title: description) %>
+    <%= inline_svg_tag(image_path, aria_hidden: true, class: "crayons-icon") %>
   </span>
   <% if user_signed_in? # We cannot trigger the action state unless the user is signed in, so no need to render. %>
   <span class="crayons-reaction__icon crayons-reaction__icon--active">
-    <%= inline_svg_tag(image_active_path, aria: true, class: "crayons-icon", title: description) %>
+    <%= inline_svg_tag(image_active_path, aria_hidden: true, class: "crayons-icon") %>
   </span>
   <% end %>
-  <span class="crayons-reaction__count" id="reaction-number-<%= category %>" alt="count"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
+  <span class="crayons-reaction__count" id="reaction-number-<%= category %>"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
 </button>

app/views/articles/_single_story.html.erb

@@ -4,7 +4,7 @@
     <div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
   <% end %>
   <% if featured == true || (feed_style_preference == "rich" && story.main_image.present?) %>
-    <a href="<%= story.path %>" title="<%= story.title %>" class="crayons-story__cover" aria-label="article"
+    <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article"
       style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);" class="crayons-story__cover__image">
       <span class="hidden"><%= story.title %></span>
     </a>

app/views/articles/index.html.erb

@@ -39,7 +39,7 @@
       <%= render(partial: "onboardings/task_card") if user_signed_in? %>
 
       <header class="flex justify-between items-center p-2 px-3 m:p-0 m:px-0 m:pb-2">
-        <h1 class="crayons-subtitle-2" aria-label="<%= community_name %> posts">Posts</h1>
+        <h1 class="crayons-subtitle-2">Posts</h1>
 
         <nav class="crayons-tabs hidden s:flex">
           <a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>

app/views/layouts/_main_nav.html.erb

@@ -1,6 +1,6 @@
 <% nav_links = NavigationLink.all.ordered.to_a %>
 
-<nav class="mb-6 <% unless user_signed_in? %>mt-4<% end %>" id="sidebar-nav" aria-label="Primary sidebar nav">
+<nav class="mb-6 <% unless user_signed_in? %>mt-4<% end %>" aria-label="Primary sidebar nav">
   <a href="<%= root_path %>" class="crayons-link crayons-link--block">
     <%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
     Home

cypress/integration/loggedOutFlows/showLoginModal.spec.js

@@ -23,9 +23,9 @@ describe('Show log in modal', () => {
   it('should show login modal for article reaction clicks', () => {
     cy.findAllByText('Test article').last().click();
 
-    cy.findByRole('checkbox', { name: 'Heart' }).as('heartReaction');
-    cy.findByRole('checkbox', { name: 'Unicorn' }).as('unicornReaction');
-    cy.findByRole('checkbox', { name: 'Saved' }).as('bookmarkReaction');
+    cy.findByRole('button', { name: 'Like' }).as('heartReaction');
+    cy.findByRole('button', { name: 'React with unicorn' }).as('unicornReaction');
+    cy.findByRole('button', { name: 'Add to reading list' }).as('bookmarkReaction');
 
     ['@heartReaction', '@unicornReaction', '@bookmarkReaction'].forEach(
       (reaction) => {