Merge lp:~rockstar/phazr/a11y into lp:phazr

[Paul Hummer]

Add accessibility features to widgets

This branch makes some a11y changes that need to be made anyway, but also start to implement the Design team's goals for what the modal overlay should look like. There are no styles for this currently, which is by design. I'd assume that each project will want the buttons to have their own colors, etc.

While I was there, I fixed some other things as well. I'm more than happy to explain those changes as well.

[Stuart Colville (muffinresearch)]

review: Approve

[Paul Hummer (rockstar)]

No proposals found for merge of lp:~rockstar/phazr/editor into lp:phazr.

=== modified file 'examples/formplugin/index.html'
--- examples/formplugin/index.html	2011-03-19 04:57:56 +0000
+++ examples/formplugin/index.html	2011-06-05 20:39:56 +0000
@@ -31,12 +31,12 @@
                 footerContent: 'This is a footer.',
                 headerContent: 'This is a header',
                 plugins: [{fn: Y.FormPlugin, cfg: {
-                    submitFn: function() { alert('submitted'); }
+                    submitFn: function() { alert('submitted'); this.hide(); }
                     }}],
                 visible: true,
                 zIndex: 10
             });
-            overlay.loadForm(
+            overlay.form.loadForm(
                 '<form action=""><label>Name</label><input type="text" name="name" /></form>');
             overlay.render();
         });

=== modified file 'src/js/editableplugin/editableplugin.js'
--- src/js/editableplugin/editableplugin.js	2011-06-05 20:39:56 +0000
+++ src/js/editableplugin/editableplugin.js	2011-06-05 20:39:56 +0000
@@ -22,9 +22,10 @@
             if (editor === null) {
                 var parentNode = host.get('parentNode'),
                     editor = Y.Node.create('<div></div>'),
-                    controls = Y.Node.create('<span></span'),
-                    save = Y.Node.create('<a class="clickable save"></a>'),
-                    cancel = Y.Node.create('<a class="clickable cancel"></a>'),
+                    controlTemplate = multiline ? '<div></div>' : '<span></span>',
+                    controls = Y.Node.create(controlTemplate),
+                    save = Y.Node.create(this.get('saveTemplate')),
+                    cancel = Y.Node.create(this.get('cancelTemplate')),
                     textbox = null;
 
                 if (multiline) {
@@ -71,9 +72,11 @@
         }
     }, {
         ATTRS: {
+            cancelTemplate: { value: '<button class="phazr-button phazr-cancel">Cancel</button>' },
             editor: { value: null },
             multiline: { value: false },
-            saveFn: { value: null }
+            saveFn: { value: null },
+            saveTemplate: { value: '<button class="phazr-button phazr-save">Save</button>' }
         },
         NS: 'editable'
     });

=== modified file 'src/js/formplugin/formplugin.js'
--- src/js/formplugin/formplugin.js	2011-03-23 02:29:46 +0000
+++ src/js/formplugin/formplugin.js	2011-06-05 20:39:56 +0000
@@ -3,8 +3,6 @@
     var FormPlugin = Y.Base.create('formplugin', Y.Plugin.Base, [], {
         initializer: function(config) {
             var host = this.get('host');
-            host.loadForm = Y.bind(this.loadForm, this);
-            host.loadFormFromURL = Y.bind(this.loadFormFromURL, this);
 
             if (config.submitFn) {
                 this.set('submitFn', config.submitFn);
@@ -15,26 +13,23 @@
         },
         renderUI: function() {
             var host = this.get('host'),
-                saveButton = Y.Node.create(
-                    '<a class="clickable" id="save-control"></a>'),
-                cancelButton = Y.Node.create(
-                    '<a class="clickable" id="cancel-control"></a>'),
+                saveButton = this.get('saveButton'),
+                cancelButton = this.get('cancelButton'),
                 controls = Y.Node.create('<div></div>');
             controls.addClass(host.getClassName() + '-controls');
             controls.appendChild(saveButton);
             controls.appendChild(cancelButton);
-            this.set('saveButton', saveButton);
-            this.set('cancelButton', cancelButton);
             host.get('contentBox').appendChild(controls);
         },
         bindUI: function() {
             var host = this.get('host');
                 footer = host.get('boundingBox').one('.yui3-widget-ft');
-            this.get('saveButton').on('click', this.get('submitFn'));
-            this.get('cancelButton').on('click', function(e) {
-                e.preventDefault();
-                host.hide();
-            });
+            this.get('saveButton').on('click', this.get('submitFn'), this.get('host'));
+            this.get('cancelButton').on('click', this.close, this);
+        },
+        close: function(e) {
+            e.preventDefault();
+            this.get('host').hide();
         },
         loadForm: function(form) {
             var host = this.get('host'),
@@ -54,16 +49,30 @@
         }
     }, {
         ATTRS: {
-            cancelButton: {},
+            cancelButton: {
+                valueFn: function() {
+                    return Y.Node.create(this.get('cancelTemplate'));
+                }
+            },
+            cancelTemplate: {
+                value: '<button class="phazr-button phazr-cancel">Cancel</button>'
+            },
             form: {},
-            saveButton: {},
+            saveButton: {
+                valueFn: function() {
+                    return Y.Node.create(this.get('saveTemplate'));
+                }
+            },
+            saveTemplate: {
+                value: '<button class="phazr-button phazr-save">Save</button>'
+            },
             submitFn: {
                 defaultFn: function() {
                     return function() {};
                 }
             }
         },
-        NS: 'formPlugin'
+        NS: 'form'
     });
     Y.FormPlugin = FormPlugin;