[#46227] - [6.1] Replace meaningless element div by element output
- Ready to Commit
- Medium
- Build: 6.1-dev
- # 46227
- Diff
- hans2103:feature/6.0-a11y-output
User tests: Successful: Unsuccessful:
Pull Request for no issue.
Just stumbled upon blog post https://denodell.com/blog/html-best-kept-secret-output-tag where forgotten element <output> is written.
Summary of Changes
This PR will change the script to adding the password strength below the password field.
The element div with aria-live=polite will be replaced by element output.
This PR will enhance the use of semantic html.
Testing Instructions
- start installing Joomla and use dev tools on the screen where you add the password.
- inspect element on the text below the meter indicating the strength of the given password.
- the element used for it will change in this pr.
- run
npm run build:jsafter applying the patch - restart the installation and check the element again
Actual result BEFORE applying this Pull Request
Text is center aligned
<div class="text-center" id="password-0" aria-live="polite">
.. translated text for JFIELD_PASSWORD_INDICATE_COMPLETE or JFIELD_PASSWORD_INDICATE_INCOMPLETE ..
</div>
Expected result AFTER applying this Pull Request
Text is left aligned, just like the rest of the text in this form
<output id="password-0" for="jform_admin_password">
.. translated text for JFIELD_PASSWORD_INDICATE_COMPLETE or JFIELD_PASSWORD_INDICATE_INCOMPLETE ..
</output>
Link to documentations
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository NPM Change |
I do not agree on that part. It is created for Joomla password checker.
The other className in the classList is 'text-center'. This BS className might not be available in other css frameworks as well.
I do not agree on that part. It is created for Joomla password checker. The other className in the classList is 'text-center'. This BS className might not be available in other css frameworks as well.
In fact, do we need to add framework classes at all?
I see no issue to have the information message align left like all other elements of the form (as it is on Cassiopeia).
Maybe, instead of hardcoded BS classes, it could be to add a specific class name, so that any site template could style it?
eg. class="password-completion-message" or else.
Or easier: no class at all.
As if someone wants to style it, he can use .password-group output { /* ... */ }
HLeithner
- | Title |
|
||||||
But we should not use inline styles like he suggested as that is not good for a secure CSP.
| Labels |
Added:
Feature
NPM Resource Changed
PR-6.1-dev
|
||
both text-center and w-100 are Bootstrap classNames.
With my most recent commit I have removed both classNames from the element <output>
If styling is required in your template, you can add this yourself
.password-group > output {}
But we should not use inline styles like he suggested as that is not good for a secure CSP.
@richard67 i forgot about it in my first message, but it seems you didn't see my second one: #46227 (comment) 😉
I have tested this item ✅ successfully on dc29deb
Thank you @hans2103 for the update!
I think it's perfect with no class defined in script, so that we get a better semantic HTML with no framework dependency.
Well done!
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46227.
I have tested this item ✅ successfully on dc29deb
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46227.
| Status | Pending | ⇒ | Ready to Commit |
| Build | 6.0-dev | ⇒ | 6.1-dev |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46227.
Good idea!
It should be tested with a not Bootstrapped template as well, as
w-100is a specific BS class.We can maybe just use inline style instead? (this way, no CSS framework issue)
Warning
See my second message for a better solution, with no secure CSP issue #46227 (comment)