isso-comments · ix5 · May 7, 2022 · May 5, 2022 · May 5, 2022 · May 5, 2022
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -14,6 +14,8 @@ Changelog for Isso
   to be added, see `Gravatar: Image requests`_.
 - Add ``data-isso-reply-notifications-default-enabled`` option to configure
   whether or not the subscribe to replies checkbox should be checked by default.
+- Accessibility: Use labels rather than placeholders for name, email & website
+  in post box (`#861 <https://github.com/posativ/isso/pull/861>`_, ix5)
 
 .. _Gravatar: Image requests: http://en.gravatar.com/site/implement/images/
 

diff --git a/isso/css/isso.css b/isso/css/isso.css
@@ -206,10 +206,15 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper label {
     display: inline-block;
+    line-height: 1.4em;
+    height: 1.4em;
+}
+.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+    display: block;
     float: right;
-    margin: 0 0 0 5px;
+    margin: 1.4em 0 0 5px;
 }
 .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input {
     padding: calc(.3em - 1px);
@@ -262,4 +267,7 @@
     .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input {
         width: 100%;
     }
+    .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
+        margin-top: 0;
+    }
 }
diff --git a/isso/demo/index.html b/isso/demo/index.html
@@ -2,10 +2,11 @@
 <head>
  <title>Isso Demo</title>
  <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
  <div id="page">
-  <div id="wrapper" style="width: 900px; margin-left: auto; margin-right: auto;">
+  <div id="wrapper" style="max-width: 900px; margin-left: auto; margin-right: auto;">
    <h2><a href="index.html">Isso Demo</a></h2>
 
    <script src="../js/embed.dev.js"

diff --git a/isso/js/app/i18n/en.js b/isso/js/app/i18n/en.js
@@ -1,8 +1,11 @@
 module.exports = {
     "postbox-text": "Type Comment Here (at least 3 chars)",
     "postbox-author": "Name (optional)",
+    "postbox-author-placeholder": "John Doe",
     "postbox-email": "E-mail (optional)",
+    "postbox-email-placeholder": "[email protected]",
     "postbox-website": "Website (optional)",
+    "postbox-website-placeholder": "https://example.com",
     "postbox-preview": "Preview",
     "postbox-edit": "Edit",
     "postbox-submit": "Submit",

diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js
@@ -80,14 +80,14 @@ var Postbox = function(parent) {
 
     // email is not optional if this config parameter is set
     if (config["require-email"]) {
-        $("[name='email']", el).setAttribute("placeholder",
-            $("[name='email']", el).getAttribute("placeholder").replace(/ \(.*\)/, ""));
+        $("[for='isso-postbox-email']", el).textContent =
+            $("[for='isso-postbox-email']", el).textContent.replace(/ \(.*\)/, "");
     }
 
     // author is not optional if this config parameter is set
     if (config["require-author"]) {
-      $("[name='author']", el).placeholder =
-        $("[name='author']", el).placeholder.replace(/ \(.*\)/, "");
+      $("[for='isso-postbox-author']", el).textContent =
+        $("[for='isso-postbox-author']", el).textContent.replace(/ \(.*\)/, "");
     }
 
     // preview function

diff --git a/isso/js/app/templates/postbox.js b/isso/js/app/templates/postbox.js
@@ -21,13 +21,16 @@ var html = function (globals) {
   + "</div>"
   + "<section class='isso-auth-section'>"
     + "<p class='isso-input-wrapper'>"
-      + "<input type='text' name='author' placeholder='" + i18n('postbox-author') + "' value='" + (author ? author : '') + "' />"
+      + "<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 : '') + "' />"
     + "</p>"
     + "<p class='isso-input-wrapper'>"
-      + "<input type='email' name='email' placeholder='" + i18n('postbox-email') + "' value='" + (email ? email : '') + "' />"
+      + "<label for='isso-postbox-email'>" + i18n('postbox-email') + "</label>"
+      + "<input id='isso-postbox-email' type='email' name='email' placeholder='" + i18n('postbox-email-placeholder') + "' value='" + (email ? email : '') + "' />"
     + "</p>"
     + "<p class='isso-input-wrapper'>"
-      + "<input type='text' name='website' placeholder='" + i18n('postbox-website') + "' value='" + (website ? website : '') + "' />"
+      + "<label for='isso-postbox-website'>" + i18n('postbox-website') + "</label>"
+      + "<input id='isso-postbox-website' type='text' name='website' placeholder='" + i18n('postbox-website-placeholder') + "' value='" + (website ? website : '') + "' />"
     + "</p>"
     + "<p class='isso-post-action'>"
       + "<input type='submit' value='" + i18n('postbox-submit') + "' />"

diff --git a/isso/js/tests/unit/__snapshots__/isso.test.js.snap b/isso/js/tests/unit/__snapshots__/isso.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\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><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\\"><input type=\\"text\\" name=\\"author\\" placeholder=\\"Name (optional)\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><input type=\\"email\\" name=\\"email\\" placeholder=\\"E-mail (optional)\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><input type=\\"text\\" name=\\"website\\" placeholder=\\"Website (optional)\\" 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\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><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>"`;
diff --git a/isso/js/tests/unit/postbox-labels-optional.test.js b/isso/js/tests/unit/postbox-labels-optional.test.js
@@ -0,0 +1,48 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* Keep the above exactly as-is!
+ * https://jestjs.io/docs/configuration#testenvironment-string
+ * https://jestjs.io/docs/configuration#testenvironmentoptions-object
+ */
+
+"use strict";
+
+test('"(optional)" labels in Postox vanish if require-author/-email set', () => {
+  // Set up our document body
+  document.body.innerHTML =
+    '<div id=isso-thread></div>' +
+    '<script src="http://isso.api/js/embed.min.js"'
+          + 'data-isso="/"'
+          + 'data-isso-lang="de"' // falls back to "en" for placeholders
+          + '></script>';
+
+  const isso = require("app/isso");
+  const $ = require("app/dom");
+
+  var config = require("app/config");
+  config['require-author'] = true;
+  config['require-email'] = true;
+
+  const i18n = require("app/i18n");
+  const svg = require("app/svg");
+
+  const template = require("app/template");
+
+  template.set("conf", config);
+  template.set("i18n", i18n.translate);
+  template.set("pluralize", i18n.pluralize);
+  template.set("svg", svg);
+
+  var isso_thread = $('#isso-thread');
+  isso_thread.append('<div id="isso-root"></div>');
+  isso_thread.append(new isso.Postbox(null));
+
+  expect($("#isso-postbox-author").placeholder).toBe('John Doe');
+  expect($("#isso-postbox-email").placeholder).toBe('[email protected]');
+  // Instead of "Name (optional)"
+  expect($("[for='isso-postbox-author']").textContent).toBe('Name');
+  // Instead of "E-mail (optional)"
+  expect($("[for='isso-postbox-email']").textContent).toBe('E-Mail');
+});