HTML5 form plugin, validation constraints & WAI-ARIA/accessibility

contributed/jquery.jeditable.html5.js

@@ -0,0 +1,136 @@
+/*
+ * HTML5 and accessibility/WAI-ARIA support for Jeditable.
+ *
+ * Copyright (c) 2013 Nick Freear, The Open University.
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ */
+
+/*jslint browser: true, indent: 4 */
+
+(function ($) {
+
+    'use strict';
+
+    // Keyboard accessibility/WAI-ARIA - allow users to navigate to an editable element using TAB/Shift+TAB.
+    $.fn.editableAriaShim = function () {
+        this.attr({
+            role: 'button',
+            tabindex: 0
+            //, title: 'Editable' -- See 'tooltip' below.
+            //, 'aria-label':''
+        });
+        return this; //<--jquery object - chaining.
+    };
+
+    // Keyboard accessibility - use mouse click OR press any key to enable editing.
+    $.fn.editable.defaults.event = 'click.editable keydown.editable';
+
+    // Accessibility - there should be a default value for the title/ tooltip.
+    $.fn.editable.defaults.tooltip = 'Click to edit'; //$.fn.editable.defaults.placeholder
+
+    // Shim - $(sel).checkValidity()
+    if (! $.fn.checkValidity) {
+        $.fn.checkValidity = function () {
+            var inp = this[0];
+            return inp && typeof inp.checkValidity==="function" ? inp.checkValidity() : null;
+        };
+    }
+
+    var _supportInType = function (type) {
+        var i = document.createElement('input');
+        i.setAttribute('type', type);
+        return i.type !== 'text' ? type : 'text';
+    };
+
+    // Type = text : With HTML5 attributes.
+    $.editable.addInputType('html5_text', {
+        element: function (settings, original) {
+            var input = $('<input />').attr({
+                // required: settings.required ? 'required' : '', -- See below.
+                // autofocus -- Not relevant for Jeditable.
+                // disabled -- Not relevant.
+                // readonly -- Not relevant.
+                //autocomplete: settings.autocomplete, -- Todo.
+                inputmode: settings.inputmode,
+                list: settings.list,
+                maxlength: settings.maxlength,
+                pattern: settings.pattern,
+                placeholder: settings.html5_placeholder, // Parameter name conflict - add 'html5_'.
+                title: settings.html5_error_text,
+                type: 'text'
+            });
+            if (settings.required) { input.attr('required', ''); } // Is this relevant to Jeditable? Probably.
+
+            $(this).append(input);
+            return input;
+        }
+    });
+
+// Type = number.
+$.editable.addInputType('number', {
+  element: function (settings, original) {
+    var input = $('<input />').attr({
+        maxlength: settings.maxlength,
+        //pattern: settings.pattern, -- Does not apply to 'number' (but may be useful if 'number' is not supported).
+        placeholder: settings.html5_placeholder,
+        min : settings.min,
+        max : settings.max,
+        step: settings.step,
+        title: settings.html5_error_text,
+        type: _supportInType('number')
+    });
+    $(this).append(input);
+    return input;
+  }
+});
+
+// Type = range : Not usable.
+/*$.editable.addInputType('range', {
+  element: function (settings, original) {
+    var input = $('<input />').attr({
+        maxlength: settings.maxlength,
+        pattern: settings.pattern,
+        placeholder: settings.html5_placeholder,
+        min : settings.min,
+        max : settings.max,
+        step: settings.step,
+        type: _supportInType('range')
+    });
+    $(this).append(input);
+    return input;
+  }
+});*/
+
+// Type = email
+$.editable.addInputType('email', {
+  element: function (settings, original) {
+    var input = $('<input />').attr({
+        // pattern -- Not useful.
+        maxlength: settings.maxlength,
+        placeholder: settings.html5_placeholder,
+        type: _supportInType('email')
+    });
+    $(this).append(input);
+    return input;
+  }
+});
+
+// Type = url
+$.editable.addInputType('url', {
+  element: function (settings, original) {
+    var input = $('<input />').attr({
+        maxlength: settings.maxlength,
+        pattern: settings.pattern,
+        placeholder: settings.html5_placeholder,
+        title: settings.html5_error_text,
+        type: _supportInType('url')
+    });
+    $(this).append(input);
+    return input;
+  }
+});
+
+
+})(jQuery);

html5.html

@@ -0,0 +1,97 @@
+<!doctype html><html lang="en">
+<meta charset="utf-8" />
+<title>Jeditable HTML5 Input Types Demo</title>
+<meta name="generator" content="Mephisto" />
+<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" />
+<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
+<script src="/mint/?js"></script>
+<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" charset="utf-8"></script>-->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script>
+
+<script src="jquery.jeditable.js"></script>
+<script src="contributed/jquery.jeditable.html5.js" ></script>
+
+<script>
+$(document).ready(function () {
+
+  // Keyboard accessibility.
+  $(".editable").editableAriaShim();
+
+  $(".number").editable("php/echo.php", {
+    type: "number",
+    tooltip: "Click to edit: number",
+    html5_placeholder: "0",
+    html5_error_text: "Enter a number between 0 and 10",
+    min: 0,
+    max: 10,
+    step: 1
+  });
+
+  $(".email").editable("php/echo.php", {
+    type: "email",
+    tooltip: "Click to edit: email"
+  });
+
+  $(".editable.text").editable("php/echo.php", {
+    type: "html5_text",
+    tooltip: "Click to edit: username",
+    html5_error_text: "Enter a lower-case name, optionally ending a number. No spaces.",
+    pattern: "[a-z]+\\d?",
+    required: true
+  });
+});
+</script>
+
+
+<body>
+  <div id="wrap"> 
+    <div id="header">
+      <p>
+        <h1>Jeditable</h1><br />
+        <small>Edit in place plugin for jQuery.</small>
+        <ul id="nav">
+          <li id="first"><a href="/" class="active">weblog</a></li>
+          <li><a href="/projects" class="last">projects</a></li>
+          <!--
+          <li><a href="/cv" class="last">cv</a></li>
+        -->
+        </ul>
+      </p>
+    </div>
+    <div id="content">
+
+    <p>You might also want to check <a href="default.html">default inputs demo</a>.</p>
+
+    <div class="entry">
+
+      <h2>HTML5</h2>
+
+      <p>Some useful introductions to HTML5 forms:
+        <a href="http://diveintohtml5.info/forms.html">Dive into HTML5: Forms</a> and
+        <a href="http://whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html">HTML5: The <code>input</code> element</a>
+
+      <h3>Number type</h3>
+      <p class="editable number" id="number" >-2.06</p>
+
+      <h3>Email type</h3>
+      <p class="editable email" id="email" >Joe+TAG1@example</p>
+
+      <h3>HTML5 text</h3>
+      <p class="editable text" id="username" >user5</p>
+
+
+    </div>
+
+    <div id="sidebar">
+    </div>
+
+  <div id="footer">
+  </div>
+
+  <script src="http://www.google-analytics.com/urchin.js"></script>
+  <script>
+    _uacct = "UA-190966-1";
+    urchinTracker();
+  </script>
+</body>
+</html>

php/config.php

@@ -6,6 +6,7 @@
     $dbh = new PDO('sqlite:/tmp/editable.sqlite');
 } catch(PDOException $e) {
     print $e->getMessage();
+    exit(-1);
 }
 
 /* Create table for storing example data. */

php/echo.php

@@ -2,7 +2,7 @@
 
 /* Does not save anything. Just echoes back for demonstration purposes. */
 
-$renderer = isset($_GET['renderer']) ?  $_GET['renderer'] : $_POST['renderer'];
+$renderer = isset($_GET['renderer']) ?  $_GET['renderer'] : (isset($_POST['renderer']) ? $_POST['renderer'] : NULL);
 if ('textile' == $renderer) {
     require_once './Textile.php';
     $t = new Textile();

tests/echo.php

@@ -2,7 +2,7 @@
 
 /* $Id: echo.php 117 2007-03-02 16:16:08Z tuupola $ */
 
-$renderer = isset($_GET['renderer']) ?  $_GET['renderer'] : $_POST['renderer'];
+$renderer = isset($_GET['renderer']) ?  $_GET['renderer'] : (isset($_POST['renderer']) ? $_POST['renderer'] : NULL);
 if ('textile' == $renderer) {
     require_once './Textile.php';
     $t = new Textile();

tests/index.html

@@ -3,10 +3,13 @@
 <html>
 <head>
 <title>Jeditable Unit Tests</title>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <link rel="stylesheet" href="testsuite.css" type="text/css" media="screen" />
 <script type="text/javascript" src="testrunner.js"></script>
 <script type="text/javascript" src="../jquery.jeditable.js"></script>
+
+<script type="text/javascript" src="../contributed/jquery.jeditable.html5.js"></script>
 <script>
 $(document).ready(function() {
 
@@ -65,7 +68,34 @@
     }, {
         submit  : "OK"
     });
-
+
+
+    $(".editable").editableAriaShim();
+
+    $("#h5-number").editable("echo.php", {
+        type: "number",
+        tooltip: "Click to edit: number",
+        html5_placeholder: "0",
+        html5_error_text: "Enter a number between 0 and 10",
+        min: 0,
+        max: 10,
+        step: 1
+    });
+
+    $("#h5-email").editable("echo.php", {
+        type: "email",
+        tooltip: "Click to edit: email"
+    });
+
+    $("#h5-text").editable("echo.php", {
+        type: "html5_text",
+        tooltip: "Click to edit: username",
+        html5_error_text: "Enter a lower-case name, optionally ending a number. No spaces.",
+        pattern: "[a-z]+\\d?",
+        required: true
+    });
+
+
     module("CORE");    
 
     test("Event triggers", function() {
@@ -184,17 +214,63 @@
         equals($("#put").html(), "PUT", "Should be PUT");
     });
 
-});
 
+    module("HTML5");
+
+    test("Keyboard accessibility", function () {
+        /*( isObj($.fn.editableAriaShim, function(){}, "Is a function, v1"); )*/
+        equals(typeof $.fn.editableAriaShim, "function", "`$.fn.editableAriaShim` is a function()");
+        equals($(".editable").attr("role"), "button", "WAI-ARIA `role` should be `button`");
+        equals($(".editable").attr("tabindex"), "0", "Attribute `tabindex` should be 0");
+        $("#h5-number").trigger("click");
+        ok($("#h5-number form").size() == 1, "Click event should trigger Jeditable.");
+        $("#h5-number form").submit();
+        ok($("#h5-number form").size() == 0, "After submit should go back to normal.");
+        $("#h5-number").trigger("keydown");
+        ok($("#h5-number form").size() == 1, "Keydown event should trigger Jeditable.");
+        $("#h5-number form").submit();
+        ok($("#h5-number form").size() == 0, "After submit should go back to normal.");
+    });
+
+    test("HTML5 input types", function () {
+        $("#h5-number").trigger("click");
+        equals($("#h5-number input").attr("type"), "number", "Type should be `number`");
+        equals($("#h5-number input").attr("min"), "0", "Attribute `min` should be 0");
+        equals($("#h5-number input").val(), "-2.06", "Value should be -2.06");
+
+        equals(typeof $.fn.checkValidity, "function", "`$.fn.checkValidity` is a function");
+        equals($("#h5-number input").checkValidity(), false, "`$(selector).checkValidity()` should return false");
+        $("#h5-number form").submit();
+
+        $("#h5-email").trigger("click");
+        equals($("#h5-email input").attr("type"), "email", "Type should be `email`");
+        equals($("#h5-email input").checkValidity(), true, "`$(selector).checkValidity()` should return true");
+        $("#h5-email form").submit();
+
+        $("#h5-text").trigger("click");
+        equals($("#h5-text input").attr("type"), "text", "Type should be `text`");
+        equals($("#h5-text input").attr("required"), '', "Attribute `required` should be '' (empty)");
+        equals(typeof document.querySelector("#h5-text input").checkValidity, "function", "`\x3Cinput>.checkValidity` is a function");
+        equals(document.querySelector("#h5-text input").checkValidity(), true, "`\x3Cinput>.checkValidity()` should return true");
+        $("#h5-text form").submit();
+    });
+
+    // Hack: add IDs for easy reference.
+    $("#tests > li").each(function (i, el) {
+        el.id = "qt-" + i;
+    });
+});
 </script>
 
 </head>
 <body>
-  
+
  <h1>Jeditable unit tests</h1>
  <h2 id="banner"></h2>
  <h2 id="userAgent"></h2>
 
+<!--[if IE]><p style="color:red">Most HTML5 unit tests will NOT pass with Internet Explorer (especially MSIE &lt; 10)<![endif]-->
+
  <ol id="tests"></ol>
 
  <div id="main"></div>
@@ -204,5 +280,10 @@ <h2 id="userAgent"></h2>
  <div id="select">Select B</div>
  <div id="callback">Here be dragons.</div>
  <div id="function">Here be dragons.</div>
+
+ <div id="h5-number" class="editable">-2.06</div>
+ <div id="h5-email" class="editable">Joe+TAG1@example</div>
+ <div id="h5-text" class="editable">user5</div>
+
 </body>
 </html>