html: Fix W3C Validation issues

CHANGES.rst

@@ -23,11 +23,13 @@ Bugfixes & Improvements
 - Improve Spanish translation (`#967`_, welpo)
 - Make language code handling more robust (`#983`_, ix5)
 - Prevent auto creation of invalid links in comments (`#995`_, pkvach)
+- Fix W3C Validation issues (`#999`_, pkvach)
 
 .. _#951: https://github.com/posativ/isso/pull/951
 .. _#967: https://github.com/posativ/isso/pull/967
 .. _#983: https://github.com/posativ/isso/pull/983
 .. _#995: https://github.com/isso-comments/isso/pull/995
+.. _#999: https://github.com/isso-comments/isso/pull/999
 
 0.13.1.dev0 (2023-02-05)
 ------------------------

isso/demo/index.html

@@ -15,14 +15,14 @@ <h2><a href=".">Isso Demo</a></h2>
    <!-- Uncomment to only test count functionality: -->
    <!-- <script src="../js/count.dev.js"></script> -->
 
-   <section>
+   <div>
      <p>This is a link to a thead, which will display a comment counter:
      <a href=".#isso-thread">How many Comments?</a></p>
 
      <p>Below is the actual comment field.</p>
-   </section>
+   </div>
 
-   <section id="isso-thread" data-title="Isso Test"><noscript>Javascript needs to be activated to view comments.</noscript></section>
+   <div id="isso-thread" data-title="Isso Test"><noscript>Javascript needs to be activated to view comments.</noscript></div>
   </div>
  </div>
 </body>

isso/js/app/templates/postbox.js

@@ -19,7 +19,7 @@ var html = function (globals) {
       + "</div>"
     + "</div>"
   + "</div>"
-  + "<section class='isso-auth-section'>"
+  + "<div class='isso-auth-section'>"
     + "<p class='isso-input-wrapper'>"
       + "<label for='isso-postbox-author'>" + i18n('postbox-author') + "</label>"
       + "<input id='isso-postbox-author' type='text' name='author' placeholder='" + i18n('postbox-author-placeholder') + "' value='" + (author ? author : '') + "' />"
@@ -41,12 +41,12 @@ var html = function (globals) {
     + "<p class='isso-post-action'>"
       + "<input type='button' name='edit' value='" + i18n('postbox-edit') + "' />"
     + "</p>"
-  + "</section>"
-  + "<section class='isso-notification-section'>"
+  + "</div>"
+  + "<div class='isso-notification-section'>"
     + "<label>"
       + "<input type='checkbox'" + notify + " name='notification' />" + i18n('postbox-notification')
     + "</label>"
-  + "</section>"
+  + "</div>"
 + "</div>"
 + "</div>"
 };

isso/js/tests/integration/__snapshots__/puppet.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should fill Postbox with valid data and receive 201 reply 1`] = `
-"<noscript>Javascript needs to be activated to view comments.</noscript><span class="isso-feedlink"><a href="../feed?uri=%2Fdemo%2F">Atom feed</a></span><h4 class="isso-thread-heading">No Comments Yet</h4><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><section class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></section><section class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></section></div></div><div id="isso-root"><div class="isso-comment isso-no-votes" id="isso-1" data-hash="34f4b563ece1"><div class="isso-avatar"><svg version="1.1" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" shape-rendering="crispEdges" data-hash="34f4b563ece1"><rect x="0" y="0" width="56" height="56" style="fill: #f0f0f0"></rect><rect x="4" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="28" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="28" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="36" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="36" width="8" height="8" style="fill: #5698c4"></rect><rect x="12" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="28" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="12" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="28" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="20" width="8" height="8" style="fill: #5698c4"></rect></svg></div><div class="isso-text-wrapper"><div class="isso-comment-header"><span class="isso-author">Commenter #1</span><span class="isso-spacer">•</span><a class="isso-permalink" href="#isso-1"><time>right now</time></a><span class="isso-note"></span></div><div class="isso-text"><p>A comment with <em>italics</em> and <a href="http://link.com" rel="nofollow noopener">a link</a></p></div><div class="isso-comment-footer"><span class="isso-votes">0</span><a class="isso-upvote" href="#"><!-- Generator: IcoMoon.io --><svg width="16" height="16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="gray">
+"<noscript>Javascript needs to be activated to view comments.</noscript><span class="isso-feedlink"><a href="../feed?uri=%2Fdemo%2F">Atom feed</a></span><h4 class="isso-thread-heading">No Comments Yet</h4><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><div class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></div><div class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></div></div></div><div id="isso-root"><div class="isso-comment isso-no-votes" id="isso-1" data-hash="34f4b563ece1"><div class="isso-avatar"><svg version="1.1" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" shape-rendering="crispEdges" data-hash="34f4b563ece1"><rect x="0" y="0" width="56" height="56" style="fill: #f0f0f0"></rect><rect x="4" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="28" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="28" width="8" height="8" style="fill: #5698c4"></rect><rect x="4" y="36" width="8" height="8" style="fill: #5698c4"></rect><rect x="36" y="36" width="8" height="8" style="fill: #5698c4"></rect><rect x="12" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="28" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="12" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="28" y="20" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="4" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="12" width="8" height="8" style="fill: #5698c4"></rect><rect x="20" y="20" width="8" height="8" style="fill: #5698c4"></rect></svg></div><div class="isso-text-wrapper"><div class="isso-comment-header"><span class="isso-author">Commenter #1</span><span class="isso-spacer">•</span><a class="isso-permalink" href="#isso-1"><time>right now</time></a><span class="isso-note"></span></div><div class="isso-text"><p>A comment with <em>italics</em> and <a href="http://link.com" rel="nofollow noopener">a link</a></p></div><div class="isso-comment-footer"><span class="isso-votes">0</span><a class="isso-upvote" href="#"><!-- Generator: IcoMoon.io --><svg width="16" height="16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="gray">
   <g>
     <path d="M 24.773,18.299c-0.651-0.669-7.512-7.203-7.512-7.203C 16.912,10.739, 16.456,10.56, 16,10.56c-0.458,0-0.914,0.179-1.261,0.536 c0,0-6.861,6.534-7.514,7.203c-0.651,0.669-0.696,1.872,0,2.586c 0.698,0.712, 1.669,0.77, 2.522,0L 16,14.89l 6.251,5.995 c 0.854,0.77, 1.827,0.712, 2.522,0C 25.47,20.17, 25.427,18.966, 24.773,18.299z">
     </path>
@@ -16,4 +16,4 @@ exports[`should fill Postbox with valid data and receive 201 reply 1`] = `
 </a><a class="isso-reply" href="#">Reply</a><a class="isso-edit" href="#">Edit</a><a class="isso-delete" href="#">Delete</a></div></div><div class="isso-follow-up"></div></div></div>"
 `;
 
-exports[`should match blank widget to snapshot 1`] = `"<noscript>Javascript needs to be activated to view comments.</noscript><span class="isso-feedlink"><a href="../feed?uri=%2Fdemo%2F">Atom feed</a></span><h4 class="isso-thread-heading">No Comments Yet</h4><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><section class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></section><section class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></section></div></div><div id="isso-root"></div>"`;
+exports[`should match blank widget to snapshot 1`] = `"<noscript>Javascript needs to be activated to view comments.</noscript><span class="isso-feedlink"><a href="../feed?uri=%2Fdemo%2F">Atom feed</a></span><h4 class="isso-thread-heading">No Comments Yet</h4><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><div class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></div><div class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></div></div></div><div id="isso-root"></div>"`;

isso/js/tests/unit/__snapshots__/postbox.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Create Postbox 1`] = `"<div id="isso-root"></div><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><section class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></section><section class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></section></div></div>"`;
+exports[`Create Postbox 1`] = `"<div id="isso-root"></div><div class="isso-postbox"><div class="isso-form-wrapper"><div class="isso-textarea-wrapper"><textarea class="isso-textarea" rows="5" minlength="3" maxlength="65535" placeholder="Type Comment Here (at least 3 chars)"></textarea><div class="isso-preview"><div class="isso-comment"><div class="isso-text-wrapper"><div class="isso-text"></div></div></div></div></div><div class="isso-auth-section"><p class="isso-input-wrapper"><label for="isso-postbox-author">Name (optional)</label><input id="isso-postbox-author" type="text" name="author" placeholder="John Doe" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-email">E-mail (optional)</label><input id="isso-postbox-email" type="email" name="email" placeholder="[email protected]" value=""></p><p class="isso-input-wrapper"><label for="isso-postbox-website">Website (optional)</label><input id="isso-postbox-website" type="text" name="website" placeholder="https://example.com" value=""></p><p class="isso-post-action"><input type="submit" value="Submit"></p><p class="isso-post-action"><input type="button" name="preview" value="Preview"></p><p class="isso-post-action"><input type="button" name="edit" value="Edit"></p></div><div class="isso-notification-section" style="display: none;"><label><input type="checkbox" name="notification">Subscribe to email notification of replies</label></div></div></div>"`;

isso/templates/admin.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <title>Isso admin</title>
   <link type="text/css" href="{{isso_host_script}}/css/isso.css" rel="stylesheet">
   <link type="text/css" href="{{isso_host_script}}/css/admin.css" rel="stylesheet">
-  <script type="text/javascript" src="{{isso_host_script}}/js/admin.js"></script>
+  <script src="{{isso_host_script}}/js/admin.js"></script>
 </head>
 <body>
   <div class="wrapper">
@@ -89,7 +89,7 @@ <h2 class="thread-title">{{comment.title}} (<a href="{{comment.uri}}">{{comment.
     </div>
   {% endif %}
     <div class='isso-text-wrapper'>
-      <div class='isso-comment-header' role='meta'>
+      <div class='isso-comment-header'>
         {% if order_by != "tid" %}
           <div>Thread: {{comment.title}} (<a href="{{comment.uri}}">{{comment.uri}}</a>)</div><br />
         {% endif %}

isso/tests/test_utils.py

@@ -51,8 +51,8 @@ def test_thread(self):
                     <header>
                         <h1>Can you find me?</h1>
                     </header>
-                    <section id="isso-thread">
-                    </section>
+                    <div id="isso-thread">
+                    </div>
                 </article>
             </body>
             </html>"""), (None, 'Can you find me?'))
@@ -61,12 +61,12 @@ def test_thread(self):
             <html>
             <body>
             <h1>I'm the real title!1
-            <section data-title="No way%21" id="isso-thread">
+            <div data-title="No way%21" id="isso-thread">
             """), (None, 'No way!'))
 
         self.assertEqual(parse.thread("""
-            <section id="isso-thread" data-title="Test" data-isso-id="test">
+            <div id="isso-thread" data-title="Test" data-isso-id="test">
             """), ('test', 'Test'))
 
-        self.assertEqual(parse.thread('<section id="isso-thread" data-isso-id="Fuu.">'),
+        self.assertEqual(parse.thread('<div id="isso-thread" data-isso-id="Fuu.">'),
                          ('Fuu.', 'Untitled.'))

isso/views/comments.py

@@ -1296,12 +1296,12 @@ def config(self, environment, request):
           <div id="wrapper" style="max-width: 900px; margin-left: auto; margin-right: auto;">
            <h2><a href=".">Isso Demo</a></h2>
            <script src="../js/embed.dev.js" data-isso="../" ></script>
-           <section>
+           <div>
              <p>This is a link to a thead, which will display a comment counter:
              <a href=".#isso-thread">How many Comments?</a></p>
              <p>Below is the actual comment field.</p>
-           </section>
-           <section id="isso-thread" data-title="Isso Test"><noscript>Javascript needs to be activated to view comments.</noscript></section>
+           </div>
+           <div id="isso-thread" data-title="Isso Test"><noscript>Javascript needs to be activated to view comments.</noscript></div>
           </div>
          </div>
         </body>