? Success

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
1 Apr 2019

In Joomla 3 all the search boxes in the list views in the admin had a descriptive tooltip. This was added by javascript. This tooltip is missing in J4 as we dont have the same js. As a temporary measure the descriptions were set to be displayed.

This PR puts the descriptive tooltip back WITHOUT using any js and in a fully accessible way. The description is displayed when the field gets focus.

This is fully backwards compatible with the tooltips displaying descriptions in J3 including when there is html in the string.

image

The same code has been added to "most"* other fields so if they still have a description in the xml they will be displayed when the input gets focus.
image

Notes

  1. Happy to accept any css changes to make it look better
  2. I have only applied the code to the existing field layouts that had an aria-described attribute
  3. This is not applied to the fields that are webcomponents and found in media\system\js\fields. That will have to be done in a separate PR. They are fubar anyway and its beyond my skill or desire to fix them

Testing

As the css has changed testing will require npm i

avatar brianteeman brianteeman - open - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 1 Apr 2019
Category Administration Templates (admin) Layout
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
Labels Added: ?
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman
brianteeman - comment - 1 Apr 2019

Closing temporarily while I update

avatar brianteeman brianteeman - change - 1 Apr 2019
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2019-04-01 18:32:34
Closed_By brianteeman
avatar brianteeman brianteeman - close - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
Title
[4.0] Search box tips
[4.0] Field Descriptions
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman
brianteeman - comment - 1 Apr 2019

Re-opened - updated the title and description

avatar brianteeman brianteeman - change - 1 Apr 2019
Status Closed New
Closed_Date 2019-04-01 18:32:34
Closed_By brianteeman
avatar brianteeman brianteeman - change - 1 Apr 2019
Status New Pending
avatar brianteeman brianteeman - reopen - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman brianteeman - change - 1 Apr 2019
The description was changed
avatar brianteeman brianteeman - edited - 1 Apr 2019
avatar brianteeman
brianteeman - comment - 2 Apr 2019

Updated branch to trigger drone

avatar bembelimen
bembelimen - comment - 2 Apr 2019

I really really really like this changes, they make absolutly sense for me, my (very small) pain at the moment is the missing genericity (copy&paste of the code, if we want to change something, we have to change it on all places), perhaps put in in a layout?

avatar brianteeman
brianteeman - comment - 2 Apr 2019

It is in layouts ;)

I get your point though and I had tried to put it in renderfield.php but it didnt work - i will try again

avatar brianteeman
brianteeman - comment - 2 Apr 2019

Found the problem. It works when i put the code in renderfield.php but not for the search box.

Any ideas?

avatar bembelimen
bembelimen - comment - 2 Apr 2019

Do you have working code, where I can look into it?

avatar brianteeman
brianteeman - comment - 2 Apr 2019

in renderfield.php replace the code with this

<div class="control-group<?php echo $class; ?>"<?php echo $rel; ?>>
	<?php if (empty($options['hiddenLabel'])) : ?>
		<div class="control-label"><?php echo $label; ?></div>
	<?php endif; ?>
	<div class="controls">
		<?php echo $input; ?>
		<?php if (!empty($description)) : ?>
			<div role="tooltip" id="<?php echo $name . '-desc'; ?>">
				<?php echo $description; ?>
			</div>
		<?php endif; ?>			
	</div>
</div>

and then remove the code from this pr in the text.php layout

You will see the tip is displayed on a normal input field but its not shown in the search box

avatar brianteeman
brianteeman - comment - 2 Apr 2019

@bembelimen I should point out that there might be an issue with that code when used on fields like calendar which have an appended button. The "tip" might display in the wrong place with the generic code

avatar brianteeman
brianteeman - comment - 2 Apr 2019

@zero-24 advice on rip please

avatar zero-24
zero-24 - comment - 3 Apr 2019

rips is happy now.

avatar brianteeman
brianteeman - comment - 3 Apr 2019

@zero-24. Thanks

avatar brianteeman brianteeman - change - 19 Apr 2019
Labels Removed: J4 Issue
avatar brianteeman
brianteeman - comment - 19 Apr 2019

@bembelimen did you have a look at preventing the copy/paste? If it cant be done then fine and we can proceed with this method and I can extend it to other places that we have non-accessible popover

avatar brianteeman
brianteeman - comment - 30 Apr 2019

@bembelimen your comment above has killed anyone from testing this. Can you please respond

avatar SniperSister
SniperSister - comment - 12 May 2019

Do these descriptions contain HTML markup? If not, could you please escape them?

avatar brianteeman
brianteeman - comment - 12 May 2019
avatar SniperSister
SniperSister - comment - 12 May 2019

Escaping prevents XSS, especially important in situations where a description is provided by users (com_fields)

avatar brianteeman
brianteeman - comment - 12 May 2019
  1. So why isnt that done in j3?
  2. Only someone with admin access can create a field description
  3. If they can create an xss with a description then they can do the same with a field label
  4. Surely the correct thing to do is to always filter the input to prevent it being created in the first place
  5. Point 4 above is already taking place
avatar SniperSister
SniperSister - comment - 13 May 2019
1. So why isnt that done in j3?

It is: https://github.com/joomla/joomla-cms/blob/3.10-dev/layouts/joomla/form/renderlabel.php#L37

2. Only someone with admin access can create a field description

True, but a non-superadmin could use such an attack to trigger a XSS in super admin session and escalate it's privileges. Minor risk, I know, but still true.

3. **If** they can create an xss with a description then they can do the same with a field label

Fair point, I'll do a PR for this

4. Surely the correct thing to do is to always filter the input to prevent it being created in the first place

Proper input filtering should be applied too, however as these core fields are used by 3rd party developers too and they often forget about those filters, output escaping helps preventing XSS in such scenarios.

avatar brianteeman brianteeman - change - 13 May 2019
Labels Added: NPM Resource Changed
avatar brianteeman
brianteeman - comment - 13 May 2019

I've escaped the $description but still waiting for @bembelimen to respond

avatar SniperSister
SniperSister - comment - 13 May 2019

@brianteeman thanks :)

avatar brianteeman
brianteeman - comment - 13 May 2019

@SniperSister the pr is still held up by @bembelimen who has been promising to look at this re his comments above for six weeks

avatar bembelimen
bembelimen - comment - 13 May 2019

Hey @brianteeman sorry for the delay, couldn't manage it earlier. I created a PR here. Perhaps this works for you.

avatar brianteeman
brianteeman - comment - 13 May 2019

Testing it now. The delay is unavoidable but it would have been polite to at least update with a message.

avatar brianteeman brianteeman - change - 13 May 2019
Labels Removed: NPM Resource Changed
avatar bembelimen
bembelimen - comment - 13 May 2019

Yes, sorry for that.

Btw. (only half-way related to this PR): the ID will be created via the name of the field not the ID (also the aria-describedby), the ID is something like: jform[foobar]-desc instead of jform_foobar-desc, perhaps it's worth looking into it in another PR?

avatar brianteeman
brianteeman - comment - 13 May 2019

I am reviewing your changes now

avatar brianteeman
brianteeman - comment - 13 May 2019

I have merged your changes - they appear to work - however this now applies to all fields so I have to look at fixing some of the field types such as switcher where the description is not displayed. A job for tomorrow

avatar brianteeman
brianteeman - comment - 13 May 2019

@bembelimen looking further I am not convinced your pr is the way to go. As I suspected #24441 (comment) it doesnt work on append fields and it now applies to all fields not just the existing field layouts that had an aria-described attribute

I will have to see if those fields can be modified

avatar bembelimen
bembelimen - comment - 13 May 2019

The easiest way would be a small JS onFocus/blur (for input fields) setting/removing a class at .controls, because otherwise there is always a case where the HTML structure will kill the tooltip. But I guess that's not the solution.

Probably just put the desciptiption part in one own layout and every field can load it (to avoid copy/paste of HTML code)?

avatar brianteeman
brianteeman - comment - 13 May 2019

Js is definitely not the solution as the entire point was to remove it

avatar brianteeman
brianteeman - comment - 14 May 2019

Having thought about it this more overnight this approach is not correct. It started off just for the search box but then I got carried away adding ito to all the other fields. It was correct for the search box but not for the fields as it takes us back to the J3 situation of not knowing if something has a description or not. For the fields I think that displaying them as they are now is the only option. I will close this PR and create a new one for the search field only AND to escape the description. Thanks @bembelimen and @SniperSister for your input etc

avatar brianteeman brianteeman - close - 14 May 2019
avatar brianteeman brianteeman - change - 14 May 2019
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2019-05-14 07:01:54
Closed_By brianteeman
avatar brianteeman
brianteeman - comment - 14 May 2019

See #24892

Add a Comment

Login with GitHub to post a comment