XWIKI-20996: AWM entry edit forms don't have labels.

xwiki-platform-core/xwiki-platform-appwithinminutes/xwiki-platform-appwithinminutes-ui/src/main/resources/AppWithinMinutes/ClassEditSheet.xml

@@ -314,6 +314,7 @@ xcontext.put('propertyCustomDisplayer', new PropertyCustomDisplayer(xcontext))
  * Displays a configuration property of a class field. This macro can also be used to display a property of an object.
  *#
 #macro (displayFieldProperty $property $prefix $field)
+  ## This 'displayFormType' property only exists for boolean fields.
   #set ($displayFormType = $property.getProperty('displayFormType'))
   #if ($property.classType == 'Boolean' && (!$displayFormType || $displayFormType.value == 'checkbox'))
     <dt>
@@ -1392,8 +1393,10 @@ XWiki.FormFieldPrettyNameManager = Class.create({
       var label = previousDT.down('label');
       prettyNameInput.title = label.textContent || label.innerText;
     }
+    prettyNameInput.ariaLabel = '$escapetool.javascript($services.localization.render('platform.appwithinminutes.classEditorFieldPrettyNameToolTip'))';
     // Replace the preview label with the pretty name input.
     var previewLabel = field.getViewer().down('label');
+    // We unset the for attribute, so that this label will not be set implicitely OR explicitely anymore.
     previewLabel.writeAttribute('for', '');
     previewLabel.removeChild(previewLabel.lastChild);
     previewLabel.insert(prettyNameInput);
@@ -1418,10 +1421,12 @@ XWiki.FormFieldDefaultValueManager = Class.create({
   _enhanceFieldDefaultValue : function(event) {
     var field = event.memo.field;
     var fieldName = field.getName();
-    field.getViewer().select('input[type=text]', 'textarea').each(function(input) {
+    // We select the default field input and update it.
+    field.getViewer().select('dd :input').each(function(input) {
       if (!input.title && input.name.endsWith('_0_' + fieldName)) {
         input.title = '$escapetool.javascript($services.localization.render('platform.appwithinminutes.classEditorFieldDefaultValueToolTip'))';
       }
+      input.ariaLabel = '$escapetool.javascript($services.localization.render('platform.appwithinminutes.classEditorFieldDefaultValueToolTip'))';
     });
   },
   _onSave : function() {
@@ -1456,7 +1461,8 @@ XWiki.FormFieldHintManager = Class.create({
     if (hintInput) {
       hintInput.addClassName('xHint');
       if (!hintInput.title) {
-        hintInput.title = 'Hint';
+        hintInput.title = '$escapetool.javascript($services.localization.render('platform.appwithinminutes.classEditorFieldHintToolTip'))';
+        hintInput.ariaLabel = '$escapetool.javascript($services.localization.render('platform.appwithinminutes.classEditorFieldHintToolTip'))';
       }
       // Move the hint input below the pretty name input, in the field viewer.
       var dd = hintInput.up('dd');

xwiki-platform-core/xwiki-platform-appwithinminutes/xwiki-platform-appwithinminutes-ui/src/main/resources/AppWithinMinutes/Content.xml

@@ -39,6 +39,7 @@
   <content>{{velocity}}
 #if ($type == 'edit')
   #set ($className = $object.getxWikiClass().name)
+  #set ($id = "${prefix}${name}")
   #if ($doc.fullName == $className)
     ## We are editing the class so the content must be read from / written to the template document.
     #set ($name = 'templateContent')
@@ -51,15 +52,13 @@
   ## Use the preferred content editor.
   #set ($useWysiwygEditor = $xwiki.getUserPreference('editor') == 'Wysiwyg')
   {{html clean="false"}}
-  ## The "content" id is expected by some JavaScript and CSS code.
-  #set ($id = 'content')
   #if (!$useWysiwygEditor)
     &lt;div id="xwikieditcontentinner"&gt;
       ## The tool bar may have an entry to insert an HTML macro. Make sure it doesn't break the HTML macro we are currently in.
       #set ($toolBar = "#template('simpleedittoolbar.vm')")
       $!toolBar.replace('{{', '&amp;#123;&amp;#123;')
       ## Display a simple textarea.
-      &lt;textarea id="$id" cols="80" rows="25" name="$name"&gt;$escapetool.xml($editedDocument.content)&lt;/textarea&gt;
+      &lt;textarea id="$escapetool.xml($id)" cols="80" rows="25" name="$name"&gt;$escapetool.xml($editedDocument.content)&lt;/textarea&gt;
   #end
   #if ($useWysiwygEditor)
     $!services.edit.syntaxContent.wysiwyg($editedDocument.content, $editedDocument.syntax, {

xwiki-platform-core/xwiki-platform-appwithinminutes/xwiki-platform-appwithinminutes-ui/src/main/resources/AppWithinMinutes/Title.xml

@@ -39,6 +39,7 @@
   <content>{{velocity}}
 #if ($type == 'edit')
   #set ($className = $object.getxWikiClass().name)
+  #set ($id = $escapetool.xml("${prefix}${name}"))
   #if ($doc.fullName == $className)
     ## We are editing the class so the title must be read from / written to the template document.
     #set ($name = 'templateTitle')
@@ -52,7 +53,7 @@
     #end
   #end
   {{html clean="false"}}
-  &lt;input type="text" name="$name" value="$!escapetool.xml($value)"
+  &lt;input id="$id" type="text" name="$name" value="$!escapetool.xml($value)"
     ## The default value for an AppWithinMinutes field should be optional so we make only the actual page title
     ## mandatory and not the template title, which holds the default title value.
     #if ($name == 'title' &amp;&amp; $xwiki.getSpacePreference('xwiki.title.mandatory') == 1)required #end

xwiki-platform-core/xwiki-platform-appwithinminutes/xwiki-platform-appwithinminutes-ui/src/main/resources/AppWithinMinutes/Translations.xml

@@ -135,6 +135,8 @@ platform.appwithinminutes.classEditorMoveFieldLabel=Move
 platform.appwithinminutes.classEditorMoveFieldHint=Drag and drop to change the order
 
 platform.appwithinminutes.classEditorFieldDefaultValueToolTip=Default value
+platform.appwithinminutes.classEditorFieldPrettyNameToolTip=Pretty Name
+platform.appwithinminutes.classEditorFieldHintToolTip=Hint
 
 ### Date Picker
 platform.appwithinminutes.classEditorDatePickerAcceptSelectedDate=OK

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/edit.less

@@ -88,10 +88,6 @@
   margin-bottom: 0;
 }
 
-textarea#content {
-  width: 100%;
-}
-
 //
 // Editable properties (in-place editing)
 //

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/wikieditor/wikibits.js

@@ -54,7 +54,7 @@ function escapeQuotes(text) {
 // use sampleText instead of selection if there is none
 // copied and adapted from phpBB
 function insertTags(tagOpen, tagClose, sampleText) {
-  var txtarea = ($('edit') && $('edit').content) || $('content');
+  var txtarea = ($('edit') && $('edit').content) || $$("textarea[name='content']");
 
   // IE
   if (document.selection && !is_gecko) {

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/edit/editableProperty.js

@@ -130,7 +130,20 @@ define('editableProperty', ['jquery', 'xwiki-meta'], function($, xcontext) {
       // Allow others to enhance the editor.
       $(document).trigger('xwiki:dom:updated', {'elements': editor.toArray()});
       // Focus the first visible input.
-      editor.find(':input').filter(':visible').focus();
+      var editInput = editor.find(':input').filter(':visible');
+      // If we cannot find any kind of editInput, then we're in a weird edge case
+      // and we don't want to apply any of the following changes.
+      if (!editInput) {
+        return;
+      }
+      editInput.focus();
+      // Make sure the edit input has an ID, and use the name of the input as a fallback.
+      // We add some random UUID to make sure we don't inadvertently collide with another ID.
+      if (!editInput.attr('id')) {
+        editInput.attr('id', editInput.attr('name') + '-' + crypto.randomUUID().toString());
+      }
+      // Bind the label to the newly generated edit input.
+      editableProperty.find('label').attr('for', editInput.attr('id'));
     }).catch(() => {
       new XWiki.widgets.Notification(l10n['web.editableProperty.editFailed'], 'error');
       return Promise.reject();
@@ -148,11 +161,15 @@ define('editableProperty', ['jquery', 'xwiki-meta'], function($, xcontext) {
       .next('.editableProperty-editor').filter(':visible').trigger('xwiki:actions:cancel').hide();
     editableProperty.find('.editableProperty-save, .editableProperty-cancel').hide();
     editableProperty.find('.editableProperty-edit').show();
+    // Remove the for attribute from the label, resetting it to its default state.
+    editableProperty.find('label').removeAttr('for');
   };
 
   var save = function(editableProperty) {
     // Disable the save and cancel actions while the property is being saved.
     editableProperty.find('.editableProperty-save, .editableProperty-cancel').addClass('disabled');
+    // Remove the for attribute from the label, resetting it to its default state.
+    editableProperty.find('label').removeAttr('for');
     // Show progress notification message.
     var notification = new XWiki.widgets.Notification(l10n['core.editors.saveandcontinue.notification.inprogress'],
       'inprogress');