Fix: open participation page accessibility issues

client-participation/js/templates/comment-form.handlebars

@@ -106,7 +106,6 @@
 
 
   <form
-    role="form"
     style="padding-bottom: 1px; {{! no stripe of background_content color mobile }}
     ">
 
@@ -235,7 +234,7 @@
           cursor: pointer;
           border: none;
           border-radius: 4px;
-          background-color: #0090ff;
+          background-color: #0076D1;
           color: white;
           letter-spacing: 0.07em;
           min-width: 110px;

client-participation/js/templates/link-TOS-partial.handlebars

@@ -5,7 +5,7 @@
   target="_blank"
   style="
   font-family: Georgia;
-  color: rgb(150,150,150);
+  color: rgb(87,87,87);
   font-size: 18px;
   letter-spacing: 2px;">
   {{s.TOS}}

client-participation/js/templates/link-privacy-partial.handlebars

@@ -5,7 +5,7 @@
   target="_blank"
   style="
   font-family: Georgia;
-  color: rgb(150,150,150);
+  color: rgb(87,87,87);
   font-size: 18px;
   letter-spacing: 2px;
   margin-inline-end: 5px;

client-participation/js/templates/participation.handlebars

@@ -6,9 +6,9 @@
 {{/ifNotEmbedded}}
 
 
-<span id="header_root"></span>
+<header id="header_root"></header>
 
-<div
+<main
   class="
   conversationViewRoot
   clickDeselectsHull
@@ -168,7 +168,7 @@
 
     {{#unless no_topic}}
     {{#ifDefined topic}}
-      <h2
+      <h1
         class="HeadingA"
         style="
          margin-bottom: 10px;
@@ -189,7 +189,7 @@
          left: 6px;
         ">closed</span>
       {{/unless}}
-      </h2>
+      </h1>
     {{/ifDefined}}
     {{/unless}}
 
@@ -431,13 +431,13 @@
 
 </span> {{!-- end no_vis toggle wrapper --}}
 
-
+</main> {{! END PARTICIPATION VIEW DIV }}
 
 
 {{!  ------------ BEGIN FOOTER ---------------  }}
 {{#unless no_footer}}
 
-  <div style="margin-top: 40px; margin-bottom: 20px;" data-test-footer>
+  <footer style="margin-top: 40px; margin-bottom: 20px;" data-test-footer>
     <a href="https://pol.is" target="_blank" dir="auto">
       {{> logo}}
     </a>
@@ -450,7 +450,7 @@
         {{> linkPrivacy}}
         {{> linkTos}}
     </div>
-  </div>
+  </footer>
 
   {{!-- <div style="font-size:18px;font-weight:400;color:white;background-color:#03a9f4;display:flex;-webkit-flex-direction:row;-webkit-flex-wrap:nowrap;-webkit-justify-content:space-between;-webkit-align-items:baseline;-webkit-align-content:stretch;-webkit-order:0;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-align-self:auto;" data-reactid=".0.0.$=1$=012.0">
     <p style="margin-inline-start:20px;font-size:12px;" data-reactid=".0.0.$=1$=012.0.$=1$/=010">© The Authors. 2016 </p>
@@ -466,6 +466,4 @@
   </div> --}}
 {{/unless}}
   {{! END FOOTER}}
-{{!  ------------ END FOOTER ---------------  }}
-
-</div> {{! END PARTICIPATION VIEW DIV }}
+{{!  ------------ END FOOTER ---------------  }}

client-participation/js/views/participation.js

@@ -186,6 +186,7 @@ module.exports = ConversationView.extend({
     if (/^ *$/.test(ctx.topic) || _.isNull(ctx.topic) || ctx.topic === "") {
       ctx.topic = void 0;
     }
+    document.title = ctx.topic;
 
     ctx.useBannerHeader = false; //!Utils.isInIframe();
     // ctx.showLogoAndBreadCrumbInHeader = ctx.context && !Utils.isInIframe();

client-participation/vis2/components/curate.js

@@ -18,7 +18,7 @@ class Button extends React.Component {
         cursor: "pointer",
         padding: "6px 12px",
         fontWeight: (!_.isNull(this.props.selectedTidCuration) && this.props.selectedTidCuration === this.props.identifier) ? 700 : 500,
-        backgroundColor: (!_.isNull(this.props.selectedTidCuration) && this.props.selectedTidCuration === this.props.identifier) ? "#03a9f4" : "rgb(235,235,235)",
+        backgroundColor: (!_.isNull(this.props.selectedTidCuration) && this.props.selectedTidCuration === this.props.identifier) ? "#0076D1" : "rgb(235,235,235)",
         color: (!_.isNull(this.props.selectedTidCuration) && this.props.selectedTidCuration === this.props.identifier) ? "rgb(255,255,255)" : "rgb(100,100,100)",
         borderRadius: 4,
       }}

client-participation/vis2/components/exploreTid.js

@@ -51,7 +51,7 @@ const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, St
             fontFamily: "Helvetica",
             fontWeight: 500,
             maxWidth: 240,
-            color: "rgb(180,180,180)"
+            color: "rgb(117,117,117)"
           }}>
           {s}
         </p>
@@ -82,7 +82,7 @@ const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, St
             fontFamily: "Helvetica",
             fontWeight: 500,
             maxWidth: 240,
-            color: "rgb(180,180,180)"
+            color: "rgb(117,117,117)"
           }}>
           {s}
         </p>

e2e/cypress/e2e/client-admin/conversation.cy.js

@@ -87,7 +87,7 @@ describe('Conversation: Configure', function () {
       cy.wait('@participationInit')
 
       cy.get('[data-view-name="participationView"]').should('be.visible')
-      cy.get('h2').contains('Test topic closed').should('be.visible')
+      cy.get('h1').contains('Test topic closed').should('be.visible')
     })
   })
 })

e2e/cypress/e2e/client-participation/embeds.cy.js

@@ -41,7 +41,7 @@ describe('Embedded Conversations', function () {
 
       cy.getIframeBody()
         .find('.conversationViewHeadline')
-        .find('h2')
+        .find('h1')
         .should('contain', topic)
         .siblings('p')
         .should('contain', description)
@@ -120,7 +120,7 @@ describe('Embedded Conversations', function () {
         .find('[data-view-name="root"]')
         .should('be.visible')
         .find('.conversationViewHeadline')
-        .find('h2')
+        .find('h1')
         .should('contain', topic)
         .siblings('p')
         .should('not.exist')
@@ -160,7 +160,7 @@ describe('Embedded Conversations', function () {
       cy.getIframeBody()
         .find('[data-view-name="root"]')
         .should('be.visible')
-        .find('.conversationViewHeadline h2')
+        .find('.conversationViewHeadline h1')
         .should('not.exist')
     })
   })