Skip to content

[4.0] Field Descriptions #24441

Closed
brianteeman wants to merge 7 commits intojoomla:4.0-devfrom
brianteeman:search_tooltip
Closed

[4.0] Field Descriptions #24441
brianteeman wants to merge 7 commits intojoomla:4.0-devfrom
brianteeman:search_tooltip

Conversation

@brianteeman
Copy link
Copy Markdown
Contributor

@brianteeman brianteeman commented Apr 1, 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

In Joomla 3 all the search boxes had a descriptive tooltip. This was added by javascript

This tooltip is missing in J4 as we dont have the same js

This PR puts the descriptive tooltip back WITHOUT using any js and in a fully accessible way
@brianteeman
Copy link
Copy Markdown
Contributor Author

Closing temporarily while I update

@brianteeman brianteeman closed this Apr 1, 2019
@brianteeman brianteeman changed the title [4.0] Search box tips [4.0] Field Descriptions Apr 1, 2019
@brianteeman brianteeman changed the title [4.0] Field Descriptions [4.0] Field Descriptions Apr 1, 2019
@brianteeman
Copy link
Copy Markdown
Contributor Author

Re-opened - updated the title and description

@brianteeman brianteeman reopened this Apr 1, 2019
// Tooltip
/* make the containers relative */
.input-group > div,
.control-group > div {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this always a div or should we add something more generic here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as can be seen in the code - its always a div.

@brianteeman
Copy link
Copy Markdown
Contributor Author

Updated branch to trigger drone

@bembelimen
Copy link
Copy Markdown
Contributor

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?

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

Any ideas?

@bembelimen
Copy link
Copy Markdown
Contributor

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

@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

@brianteeman
Copy link
Copy Markdown
Contributor Author

@zero-24 advice on rip please

@zero-24
Copy link
Copy Markdown
Contributor

zero-24 commented Apr 3, 2019

rips is happy now.

@brianteeman
Copy link
Copy Markdown
Contributor Author

@zero-24. Thanks

@ghost ghost added J4 Issue and removed J4 Issue labels Apr 5, 2019
@ghost ghost removed the J4 Issue label Apr 13, 2019
@brianteeman
Copy link
Copy Markdown
Contributor Author

@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

@ghost ghost added the NPM Resource Changed This Pull Request can't be tested by Patchtester label Apr 30, 2019
@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@SniperSister
Copy link
Copy Markdown
Contributor

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

@SniperSister why?

@SniperSister
Copy link
Copy Markdown
Contributor

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

  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

@SniperSister
Copy link
Copy Markdown
Contributor

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.

@joomla-cms-bot joomla-cms-bot removed the NPM Resource Changed This Pull Request can't be tested by Patchtester label May 13, 2019
@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@SniperSister
Copy link
Copy Markdown
Contributor

@brianteeman thanks :)

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@bembelimen
Copy link
Copy Markdown
Contributor

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@bembelimen
Copy link
Copy Markdown
Contributor

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?

@brianteeman
Copy link
Copy Markdown
Contributor Author

I am reviewing your changes now

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

@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

@bembelimen
Copy link
Copy Markdown
Contributor

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)?

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

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

@brianteeman
Copy link
Copy Markdown
Contributor Author

See #24892

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants