508 Fixes

Addresses #1021 mostly by adding label tags, generating unique element
ids as needed.

In the process, moved the label text that gets set in the
___ContentTypeView.js files to the respective handlebar templates; the
text was static as far as I could tell.

There are additional minor 508 improvements that can be made with the
tables (scope tags, header attributes)

src/main/javascript/helpers/handlebars.js

@@ -7,7 +7,7 @@ Handlebars.registerHelper('sanitize', function(html) {
 });
 
 Handlebars.registerHelper('renderTextParam', function(param) {
-    var result, type = 'text';
+    var result, type = 'text', idAtt = '';
     var isArray = param.type.toLowerCase() === 'array' || param.allowMultiple;
     var defaultValue = isArray && Array.isArray(param.default) ? param.default.join('\n') : param.default;
 
@@ -16,11 +16,15 @@ Handlebars.registerHelper('renderTextParam', function(param) {
     }
 
     if(param.format && param.format === 'password') {
-      type = 'password';
+        type = 'password';
+    }
+
+    if(param.valueId) {
+        idAtt = ' id=\'' + param.valueId + '\'';
     }
 
     if(isArray) {
-        result = '<textarea class=\'body-textarea' + (param.required ? ' required' : '') + '\' name=\'' + param.name + '\'';
+        result = '<textarea class=\'body-textarea' + (param.required ? ' required' : '') + '\' name=\'' + param.name + '\'' + idAtt;
         result += ' placeholder=\'Provide multiple values in new lines' + (param.required ? ' (at least one required).' : '.') + '\'>';
         result += defaultValue + '</textarea>';
     } else {
@@ -29,7 +33,7 @@ Handlebars.registerHelper('renderTextParam', function(param) {
           parameterClass += ' required';
         }
         result = '<input class=\'' + parameterClass + '\' minlength=\'' + (param.required ? 1 : 0) + '\'';
-        result += ' name=\'' + param.name +'\' placeholder=\'' + (param.required ? '(required)' : '') + '\'';
+        result += ' name=\'' + param.name +'\' placeholder=\'' + (param.required ? '(required)' : '') + '\'' + idAtt;
         result += ' type=\'' + type + '\' value=\'' + defaultValue + '\'/>';
     }
     return new Handlebars.SafeString(result);

src/main/javascript/view/ContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ContentTypeView = Backbone.View.extend({
   initialize: function() {},
 
   render: function(){
+  	this.model.contentTypeId = 'ct' + Math.random();
     $(this.el).html(Handlebars.templates.content_type(this.model));
-
-    $('label[for=contentType]', $(this.el)).text('Response Content Type');
-
     return this;
   }
 });

src/main/javascript/view/ParameterContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ParameterContentTypeView = Backbone.View.extend({
   initialize: function  () {},
 
   render: function(){
+    this.model.parameterContentTypeId = 'pct' + Math.random();
     $(this.el).html(Handlebars.templates.parameter_content_type(this.model));
-
-    $('label[for=parameterContentType]', $(this.el)).text('Parameter content type:');
-
     return this;
   }
 

src/main/javascript/view/ParameterView.js

@@ -31,6 +31,7 @@ SwaggerUi.Views.ParameterView = Backbone.View.extend({
     this.model.isBody = this.model.paramType === 'body' || this.model.in === 'body';
     this.model.isFile = type && type.toLowerCase() === 'file';
     this.model.default = (this.model.default || this.model.defaultValue);
+    this.model.valueId = 'm' + this.model.name + Math.random();
 
     if (this.model.allowableValues) {
       this.model.isList = true;
@@ -98,4 +99,4 @@ SwaggerUi.Views.ParameterView = Backbone.View.extend({
       }
     }
   }
-});
+});

src/main/javascript/view/ResponseContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ResponseContentTypeView = Backbone.View.extend({
   initialize: function(){},
 
   render: function(){
+    this.model.responseContentTypeId = 'rct' + Math.random();
     $(this.el).html(Handlebars.templates.response_content_type(this.model));
-
-    $('label[for=responseContentType]', $(this.el)).text('Response Content Type');
-
     return this;
   }
 });

src/main/template/apikey_button_view.handlebars

@@ -1,9 +1,9 @@
 <!--div class='auth_button' id='apikey_button'><img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'></div-->
 <div class='auth_container' id='apikey_container'>
   <div class='key_input_container'>
-    <div class='auth_label'>{{keyName}}</div>
+    <div class='auth_label'><label for='input_apiKey_entry'>{{keyName}}</label></div>
-    <input placeholder="api_key" class="auth_input" id="input_apiKey_entry" name="apiKey" type="text"/>
+    <input placeholder='api_key' class='auth_input' id='input_apiKey_entry' name='apiKey' type='text'/>
-    <div class='auth_submit'><a class='auth_submit_button' id="apply_api_key" href="#">apply</a></div>
+    <div class='auth_submit'><a class='auth_submit_button' id='apply_api_key' href='#''>apply</a></div>
   </div>
 </div>
 

src/main/template/basic_auth_button_view.handlebars

@@ -1,9 +1,9 @@
 <div class='auth_button' id='basic_auth_button'><img class='auth_icon' src='images/password.jpeg'></div>
 <div class='auth_container' id='basic_auth_container'>
   <div class='key_input_container'>
-    <div class="auth_label">Username</div>
+    <div class="auth_label"><label for="input_username">Username</label></div>
     <input placeholder="username" class="auth_input" id="input_username" name="username" type="text"/>
-    <div class="auth_label">Password</div>
+    <div class="auth_label"><label for="password">Password</label></div>
     <input placeholder="password" class="auth_input" id="input_password" name="password" type="password"/>
     <div class='auth_submit'><a class='auth_submit_button' id="apply_basic_auth" href="#">apply</a></div>
   </div>

src/main/template/content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="contentType"></label>
+<label for="{{contentTypeId}}">Response Content Type</label>
-<select name="contentType">
+<select name="contentType" id="{{contentTypeId}}">
 {{#if produces}}
   {{#each produces}}
 	<option value="{{{this}}}">{{{this}}}</option>

src/main/template/param.handlebars

@@ -1,24 +1,24 @@
-<td class='code'>{{name}}</td>
+<td class='code'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
 
 	{{#if isBody}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#if default}}
-				<textarea class='body-textarea' name='{{name}}'>{{default}}</textarea>
+				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
         <br />
         <div class="parameter-content-type" />
 			{{else}}
-				<textarea class='body-textarea' name='{{name}}'></textarea>
+				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'></textarea>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#renderTextParam this}}

src/main/template/param_list.handlebars

@@ -1,10 +1,6 @@
-{{#if required}}
+<td class='code{{#if required}} required{{/if}}'><label for='{{valueId}}'>{{name}}</labe></td>
-<td class='code required'>{{name}}</td>
-{{else}}
-<td class='code'>{{name}}</td>
-{{/if}}
 <td>
-  <select {{#isArray this}} multiple='multiple'{{/isArray}} class={{#if required}}'parameter required'{{else}}'parameter'{{/if}} name='{{name}}'>
+  <select {{#isArray this}} multiple='multiple'{{/isArray}} class={{#if required}}'parameter required'{{else}}'parameter'{{/if}} name='{{name}}' id='{{valueId}}'>
     {{#if required}}
     {{else}}
       {{#if default}}

src/main/template/param_readonly.handlebars

@@ -1,7 +1,7 @@
-<td class='code'>{{name}}</td>
+<td class='code'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
     {{#if isBody}}
-        <textarea class='body-textarea' readonly='readonly' name='{{name}}'>{{default}}</textarea>
+        <textarea class='body-textarea' readonly='readonly' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
     {{else}}
         {{#if default}}
             {{default}}

src/main/template/param_readonly_required.handlebars

@@ -1,7 +1,7 @@
-<td class='code required'>{{name}}</td>
+<td class='code required'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
     {{#if isBody}}
-        <textarea class='body-textarea' readonly='readonly' placeholder='(required)' name='{{name}}'>{{default}}</textarea>
+        <textarea class='body-textarea' readonly='readonly' placeholder='(required)' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
     {{else}}
         {{#if default}}
             {{default}}

src/main/template/param_required.handlebars

@@ -1,22 +1,22 @@
-<td class='code required'>{{name}}</td>
+<td class='code required'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
 	{{#if isBody}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 		{{else}}
 			{{#if default}}
-				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}'>{{default}}</textarea>
+				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id="{{valueId}}">{{default}}</textarea>
         <br />
         <div class="parameter-content-type" />
 			{{else}}
-				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}'></textarea>
+				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id='{{valueId}}'></textarea>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
 		{{#if isFile}}
-			<input class='parameter' class='required' type='file' name='{{name}}'/>
+			<input class='parameter' class='required' type='file' name='{{name}}' id='{{valueId}}'/>
 		{{else}}
 			{{#renderTextParam this}}
 			{{/renderTextParam}}

src/main/template/parameter_content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="parameterContentType"></label>
+<label for="{{parameterContentTypeId}}">Parameter content type:</label>
-<select name="parameterContentType">
+<select name="parameterContentType" id="{{parameterContentTypeId}}">
 {{#if consumes}}
   {{#each consumes}}
   <option value="{{{this}}}">{{{this}}}</option>

src/main/template/response_content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="responseContentType"></label>
+<label for="{{responseContentTypeId}}">Response Content Type</label>
-<select name="responseContentType">
+<select name="responseContentType" id="{{responseContentTypeId}}">
 {{#if produces}}
   {{#each produces}}
   <option value="{{{this}}}">{{{this}}}</option>