Accessibility and web standards compliance improvements

mchapman · mchapman · commit 00446a006de3 · 2021-05-27T14:38:25.000Z
diff --git a/src/client/index.d.ts b/src/client/index.d.ts
@@ -106,7 +106,8 @@ declare module fng {
     placeHolder?: string // adds placeholder text to the input (depending on data type).
     help?: string;  // adds help text under the input.
     helpInline?: string;  // adds help to the right of the input.
-    popup?: string;  // adds popup help as specified.
+    popup?: string;  // adds title (popup help) as specified.
+    ariaLabel?: string;  // adds aria-label as specified.
     order?: number;  // allows user to specify the order / tab order of this field in the form. This overrides the position in the Mongoose schema.
     size?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'block-level';  // sets control width.  Default is 'medium''
     readonly?: boolean | string;  // adds the readonly or ng-readonly attribute to the generated input (currently doesn't work with date - and perhaps other types).
diff --git a/src/client/js/directives/form.ts b/src/client/js/directives/form.ts
@@ -134,6 +134,7 @@ module fng.directives {
               } else {
                 common += handleReadOnlyDisabled(fieldInfo.readonly);
                 common += fieldInfo.add ? (' ' + fieldInfo.add + ' ') : '';
+                common += ` aria-label="${fieldInfo.label && fieldInfo.label !== "" ? fieldInfo.label : fieldInfo.name}" `;
                 value = '<select ' + common + 'class="' + allInputsVars.formControl.trim() + allInputsVars.compactClass + allInputsVars.sizeClassBS2 + '" ' + requiredStr + '>';
 
                 if (!isRequired) {
@@ -210,10 +211,9 @@ module fng.directives {
             case 'checkbox' :
               common += requiredStr;
               common += handleReadOnlyDisabled(fieldInfo.readonly);
+              value = formMarkupHelper.generateSimpleInput(common, fieldInfo, options);
               if (cssFrameworkService.framework() === 'bs3') {
-                value = '<div class="checkbox"><input ' + common + 'type="checkbox"></div>';
-              } else {
-                value = formMarkupHelper.generateSimpleInput(common, fieldInfo, options);
+                value = '<div class="checkbox">' + value + '</div>';
               }
               break;
             default:
diff --git a/src/client/js/services/form-markup-helper.ts b/src/client/js/services/form-markup-helper.ts
@@ -3,7 +3,7 @@
 module fng.services {
 
   /*@ngInject*/
-  export function formMarkupHelper(cssFrameworkService, inputSizeHelper, addAllService) {
+  export function formMarkupHelper(cssFrameworkService, inputSizeHelper, addAllService, $filter) {
 
       function generateNgShow(showWhen, model) {
 
@@ -165,11 +165,14 @@ module fng.services {
           if (['inline','stacked'].includes(options.formstyle)) {
             placeHolder = placeHolder || fieldInfo.label;
           }
-          common = 'ng-model="' + modelString + '"' + (idString ? ' id="' + idString + '" name="' + idString + '" ' : ' name="' + nameString + '" ');
+          common = 'data-ng-model="' + modelString + '"' + (idString ? ' id="' + idString + '" name="' + idString + '" ' : ' name="' + nameString + '" ');
           common += (placeHolder ? ('placeholder="' + placeHolder + '" ') : '');
           if (fieldInfo.popup) {
             common += 'title="' + fieldInfo.popup + '" ';
           }
+          if (fieldInfo.ariaLabel) {
+            common += 'aria-label="' + fieldInfo.ariaLabel + '" ';
+          }
           common += addAllService.addAll(scope, 'Field', null, options);
           return {
             common: common,
@@ -206,8 +209,10 @@ module fng.services {
 
         generateSimpleInput: function generateSimpleInput(common, fieldInfo, options) {
           var result = '<input ' + common + 'type="' + fieldInfo.type + '" ';
-          if (!fieldInfo.label) {
-            result += `placeholder="${fieldInfo.name.replace(/\./g,' ')}" `
+          if (!fieldInfo.label && !fieldInfo.ariaLabel) {
+            result += `aria-label="${fieldInfo.name.replace(/\./g,' ')}" `
+          } else if (options.subschema) {
+            result += `aria-label="${fieldInfo.label ? ($filter('titleCase')(options.subschemaroot) + ' ' + fieldInfo.label) : (fieldInfo.popup || fieldInfo.name.replace(/\./g,' '))}" `
           }
           if (options.formstyle === 'inline' && cssFrameworkService.framework() === 'bs2' && !fieldInfo.size) {
             result += 'class="input-small"';
diff --git a/src/client/template/base-edit.html b/src/client/template/base-edit.html
@@ -2,12 +2,12 @@
     <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header edit-header">
         <div class="header-lhs col-sm-8 span8">
-            <h4 id="header-text">{{modelNameDisplay}} :
+            <h1 id="header-text">{{modelNameDisplay}} :
                 <span id="header-data-desc">
                     <span ng-show="!!editFormHeader" >{{ editFormHeader() }}</span>
                     <span ng-hide="!!editFormHeader" ng-repeat="field in listSchema" ng-bind-html="getListData(record, field.name) + ' '"></span>
                 </span>
-            </h4>
+            </h1>
         </div>
         <div class="header-rhs col-sm-2 span2">
             <div form-buttons></div>
diff --git a/src/client/template/base-view.html b/src/client/template/base-view.html
@@ -2,9 +2,9 @@
     <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header edit-header">
         <div class="header-lhs col-sm-8 span8">
-            <h4>{{modelNameDisplay}} :
+            <h1 id="header-text">{{modelNameDisplay}} :
                 <span ng-repeat="field in listSchema" ng-bind-html="getListData(record, field.name) + ' '"></span>
-            </h4>
+            </h1>
         </div>
     </div>
     <div class="container-fluid page-body edit-body">
diff --git a/test/unit/formInputSpec.js b/test/unit/formInputSpec.js
@@ -742,7 +742,7 @@ describe('formInput', function () {
       input = angular.element(elm.find('input')[11]);
 
       expect(input.attr('name')).toBe('1-exams-result');
-      expect(input.attr('ng-model')).toBe('record.exams[$parent.$index].result');
+      expect(input.attr('data-ng-model')).toBe('record.exams[$parent.$index].result');
     });
 
   });
@@ -898,9 +898,9 @@ describe('formInput', function () {
 
     it('should put the index in the correct place in the ng-model attribute', function () {
       var input = angular.element(elm.find('input')[1]);
-      expect(input.attr('ng-model')).toBe('record.mentions[$index].someString');
+      expect(input.attr('data-ng-model')).toBe('record.mentions[$index].someString');
       input = angular.element(elm.find('input')[2]);
-      expect(input.attr('ng-model')).toBe('record.mentions[$index].grades.low');
+      expect(input.attr('data-ng-model')).toBe('record.mentions[$index].grades.low');
     });
 
   });
