?
avatar thednp
thednp
14 Oct 2020

Problem identified

Working with Joomla 4.0 beta 4 and I figured a forever occurring issue with Joomla, here are my two known cases:

  • If I set an admin field with an empty label, I expect no markup to be rendered such as <div class="control-label">.
  • Also, a field of type="Spacer" is expected to have no input so no <div class="controls"> should be rendered.

Why this is important?
Working with custom developed form fields often times requires that we override core form fields for specific functionality, but also just to get rid of the <div class="control-label"> (via a custom getLabel() method) which creates an unwanted white space and could produce confusion to end-user due to inconsistent typographic spacing.

Proposed solution

  • libraries/scr/Form/FormField.php lines 808 - 813, allow the getLabel() method to check if the field label is empty
$data = $this->getLayoutData();

if ($this->hidden || empty($data['label']))
{
  return '';
}
  • libraries/scr/Form/FormField.php lines 1042 - 1047, allow the renderField() method to push the field type into the layout, to check within the layout for a type="Spacer" field and prevent the layout from rendering the <div class="controls">, details later
$data = array(
  'input'   => $this->getInput(),
  'label'   => $this->getLabel(),
  'type'    => $this->type,
  'options' => $options,
);
  • layouts/joomla/form/renderfield.php complete file
<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 *
 * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;

extract($displayData);

/**
 * Layout variables
 * -----------------
 * @var   array   $options      Optional parameters
 * @var   string  $name         The id of the input this label is for
 * @var   string  $label        The html code for the label
 * @var   string  $type         The field type
 * @var   string  $input        The input field html code
 * @var   string  $description  An optional description to use in a tooltip
 */

if (!empty($options['showonEnabled']))
{
	/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
	$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
	$wa->useScript('showon');
}
$class = empty($options['class']) ? '' : ' ' . $options['class'];
$rel   = empty($options['rel']) ? '' : ' ' . $options['rel'];
$id    = $name . '-desc';
$hide  = empty($options['hiddenLabel']) ? '' : ' sr-only';

?>
<div class="control-group<?php echo $class; ?>"<?php echo $rel; ?>>
	<?php if (!empty($label)) : ?>
		<div class="control-label<?php echo $hide; ?>"><?php echo $label; ?></div>
	<?php endif; ?>

	<?php if (ucfirst($type) !== 'Spacer') : ?>
		<div class="controls">
			<?php echo $input; ?>
			<?php if (!empty($description)) : ?>
				<div id="<?php echo $id; ?>">
					<small class="form-text text-muted">
						<?php echo $description; ?>
					</small>
				</div>
			<?php endif; ?>
		</div>
	<?php endif; ?>
</div>

Open questions

  • If a field of type="Spacer" is missing it's <div class="controls"> will it mess around with the overall form functionality? (my guess is that it doesn't or at least shouldn't)
  • If this is to be considered as an improvement, do you guys think I should go ahead with PR with the above proposed changes?
avatar thednp thednp - open - 14 Oct 2020
avatar joomla-cms-bot joomla-cms-bot - change - 14 Oct 2020
Title
[4.0] Why render <div> for empty labels for any field type or controls for SPACER?
[4.0] Why render for empty labels for any field type or controls for SPACER?
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 14 Oct 2020
avatar brianteeman
brianteeman - comment - 15 Oct 2020

Every field must have a label. That is a basic accessibility rule

avatar thednp
thednp - comment - 15 Oct 2020

Sup @brianteeman didn't expect your reply here. You must be right on that, however, the white space is not good man.

avatar brianteeman
brianteeman - comment - 15 Oct 2020

So make sure you have a label and you have no white space ;)

avatar thednp
thednp - comment - 15 Oct 2020

Thanks Brian for your input, however that is not exactly the full context, I now realize I should have pointed out more details in the first place.

Here are two main cases, each make a strong argument:

  • Take a field of type="Subform" without label and a couple of type="Text" child fields each having its own label, to have no label and no markup of the label for the type="Subform" field is expected for a consistent spacing.

  • Take a field of type="Subform" with own label and couple of type="Text" child fields each having NO label, a consistent design would require no label and markup for the child fields.

avatar thednp
thednp - comment - 16 Oct 2020

Would appreciate more feedback on this.

avatar brianteeman
brianteeman - comment - 16 Oct 2020

Every field must have a label even if it is set to invisible

avatar Fedik
Fedik - comment - 16 Oct 2020

@thednp you talked about joomla fields and @brianteeman talked about "form inputs",
that different things ;)

"Spacer" is not "form input"

avatar thednp thednp - change - 16 Oct 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-10-16 15:07:45
Closed_By thednp
avatar thednp thednp - close - 16 Oct 2020
avatar thednp
thednp - comment - 16 Oct 2020

Why labels for hidden fields must be present for accessibility makes no sense, blind people will never care about a system nonce verification or other functionality.

But fine, I'm going a different route.

@Fedik I mean Joomla form field.

Add a Comment

Login with GitHub to post a comment