remove all non ASCI letters, numbers or hyphen, underscore, dot from id

addon/components/fm-field.js

@@ -19,10 +19,12 @@ export default Ember.Component.extend({
     if(!this.get('optionLabelPath')) {
       this.set('optionLabelPath', 'content.label');
     }
-    var dataAttributes = Object.keys(this.get('attrs')).filter(function(attr) {
-      return /data-/.test(attr);
-    });
-    this.set('dataAttributes', dataAttributes);
+    if(!Ember.isEmpty(this.get('attrs'))) {
+      var dataAttributes = Object.keys(this.get('attrs')).filter(function(attr) {
+        return /data-/.test(attr);
+      });
+      this.set('dataAttributes', dataAttributes);
+    }
 
     this._super(arguments);
   },
@@ -52,12 +54,10 @@ export default Ember.Component.extend({
     }
   }),
   generateSafeId: function(id) {
-    var tmp = document.createElement("DIV");
-    tmp.innerHTML = id;
-    id = tmp.textContent || tmp.innerText || "";
-    id = id.replace(/[\.,\/#!$%\^&\*;:{}=\`'"~()]/g,"");
-    id = id.replace(/\s/g, "-");
-    return id;
+    // only allow ASCII letters and digits, '_', '-', '.'
+    // as recommended in MDN
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+    return id.replace(/\s/g, '-').replace(/[^\w-.]/g, '');
   },
 
   actions: {

tests/integration/components/fm-field-test.js

@@ -183,3 +183,54 @@ test('errors are shown after user interaction but not before (select)', function
     'errorClass is removed when errors empty got empty'
   );
 });
+
+test('inputId property is assigned as id to input and for on label and drops non valid characters', function(assert) {
+  const id = 'az_AZ-01.aZ';
+  this.set('inputId', id);
+  this.set('label', 'some content');
+  this.render(hbs `{{fm-field inputId=inputId label=label}}`);
+  assert.equal(
+    this.$('input').attr('id'),
+    id,
+    'inputId set as id of input element'
+  );
+  assert.equal(
+    this.$('label').attr('for'),
+    id,
+    'inputId set as for attr of label element'
+  );
+});
+
+test('label is used as id if inputId is not set', function(assert) {
+  const id = 'az_AZ-01.aZ';
+  this.set('label', id);
+  this.render(hbs `{{fm-field label=label}}`);
+  assert.equal(
+    this.$('input').attr('id'),
+    id,
+    'normalized label text used as id of input element'
+  );
+  assert.equal(
+    this.$('label').attr('for'),
+    id,
+    'normalized label text used as for attr of label element'
+  );
+});
+
+
+test('label text used as id is normalized', function(assert) {
+  const label = 'A custom label?';
+  const id = 'A-custom-label';
+  this.set('label', label);
+  this.render(hbs `{{fm-field label=label}}`);
+  assert.equal(
+    this.$('input').attr('id'),
+    id,
+    'normalized label text used as id of input element'
+  );
+  assert.equal(
+    this.$('label').attr('for'),
+    id,
+    'normalized label text used as for attr of label element'
+  );
+});

tests/unit/components/fm-field-test.js

@@ -0,0 +1,34 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('fm-field', 'Unit | Component | fm field', {
+  unit: true
+});
+
+test('generate safe id', function(assert) {
+  const component = this.subject();
+  assert.equal(
+    component.generateSafeId('abcABC'),
+    'abcABC',
+    'ASCII letters aren\'t removed'
+  );
+  assert.equal(
+    component.generateSafeId('123'),
+    '123',
+    'numbers aren\'t removed'
+  );
+  assert.equal(
+    component.generateSafeId('_-.'),
+    '_-.',
+    'underscore, hyphen and dot aren\'t removed'
+  );
+  assert.equal(
+    component.generateSafeId('a b c'),
+    'a-b-c',
+    'whitespaces and tabs are replaced by hyphen'
+  );
+  assert.equal(
+    component.generateSafeId('a?b!c"d#eäfßg'),
+    'abcdefg',
+    'non ASCII characters are removed'
+  );
+});