1. 

   duane, Member

   I'm using editable fields in templates and note the default behaviour has no visual cues for what is/is not editable (other than hovering over it or clicking on it). This is especially an issue when the field is blank and thus there is not even content there to see and click on.

   I've tried using the ui-icon pencil via ui-icon-pencil by putting the code <span class="ui-icon ui-icon-pencil"></span> after the field reference in the template, but it is positioned below the field (because of the editable field div) and is not clickable as it is outside the jeditable field div.

   What solution would you recommend for making it obvious editable fields in templates were actually editable - especially when the content is blank?
2. 

   myDBR Team, Key Master

   Duane,
   that really depends how you want it to look like / behave. By default, myDBR uses a non-pervasive indicator (yellow on hover). You can easily use another method defined by you.

   For example, if you want to use the pencil icon after the field, you would need to set the editable field's CSS display option to inline-block (to keep the pencil at the same row) and then add small JavaScript that clicks the editable field when pencil icon is clicked.

   So the CSS definition would be:

   .editable {display:inline-block}

   Your template code could look like this:

   <div>{#value}<span class="ui-icon ui-icon-pencil editpencil"></span></div>

   And finally, the JavaScript:

   select 'dbr.javascript',
   
   "
   
   $(document).on('click', '.editpencil', function() {
   
     $(this).prev().click();
   
   });
   
   ";
   
   

   --
   myDBR Team
3. 

   duane, Member

   Great! I'll try that. On a related note: I see each input box does not have an id - and essential component for accessibility by screen readers and other assistive tech when paired with a label element. See https://www.w3.org/WAI/tutorials/forms/labels/

   Where it says

   Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.

   As I don't see a way to add this id via the dbr.editable options, are we to rely on js to add these (not sure if this is compatible with screen readers) or is there another way you've accommodated form accessibility?
4. 

   myDBR Team, Key Master

   The editable fields are not ideal for screen readers/speech input users as they require user interaction before the form is presented. Having a label for the field does not help with the initial interaction requirement.

   --
   myDBR Team

Reply

You must log in to post.