@brianteeman one thing to consider here: this description in J3 used to be the tooltip of each field. Some texts are way too long and probably inappropriate for an aria-describedby

Maybe for the shake of B/C we should leave this as is (and use it in the new tooltips, activated on mouse over a field, or on field focus) and introduce another attribute, eg describe ?

FWIW I'm not against what you're doing here, just thinking what will be the less painful approach here...

@dgrammatiko I would much prefer it if peo0ple could SEE those crazy long tips and submit pr to change them to something other than a manual

@brianteeman and we both know that some will resist those changes...

@dgrammatiko https://www.youtube.com/watch?v=rtEaR1JU-ps

After the changes the descriptions are read by the screen reader. Perfectly.
@dgrammatiko : The number of characters in the aria-describedby attribute is not limited. But I agree that some descriptions need to be shortened.

I have tested this item ✅ successfully on e38aaa4

I test pages: Article new/edit, Menus new/edit, Modules new/edit. Different field types

@brianteeman Please, correct PR title: aria-describedby

@zwiastunsw Thanks for testing the work so far. I will continue on this tomorrow to make sure that all fields have this functionality even if the core doesnt use it

@dgrammatiko

Maybe for the shake of B/C we should leave this as is (and use it in the new tooltips, activated on mouse over a field, or on field focus) and introduce another attribute, eg describe ?

Are these "new tooltips" available now? We need to resolve the search box descriptions that previously looked like

@brianteeman the code needs some cleanup and fixing the positioning: https://codepen.io/dgrammatiko/pen/eGELjo

@dgrammatiko looks good. We need this for the search tips. If you create a pr that would be awesome

@brianteeman cans you please cancel the new variable?
Eg: this

$aria = $name . '-desc';
	$attr .= (!empty($description)) ? ' aria-describedby="' . $aria . '"' : '';

becomes

	$attr .= (!empty($description)) ? ' aria-describedby="' . $name . '-desc' . '"' : '';

Rule of thumb: declare a new variable only if you're gonna use it more than once, else you just adding more memory allocation for the app

We also need it for buttons - font icons (without label).

updated pr as requested

@brianteeman :
I found two cases where the description is not announced by the screen reader:

• switcher case (this will be a separate PR)
• control type : joomla-field-fancy-select
  

Page type: Module site new/edit - Article Category, Popular Tags, Similar Tags
In all other cases - it is OK.

• control type : joomla-field-fancy-select

This is another javascript one so it will have to be dealt with in a different pr by @dgrammatiko

When in an array, no need to add a leading space since it will be imploded later with a space.

This should also be fixed in layouts/joomla/form/field/url.php with all the attributes.

@wilsonge can you merge this one as well please. There won't be any more fields added to this PR as the remaining ones require js

I don't have permission to your repo to merge in 4.0. so yes - but i need you to sync up with 4.0 please

@wilsonge should be ok now

waiting for rips to be sorted but intention is to merge this next

OK - thanks

Thanks!

Thanks

How to make radio buttons a11y or is it already as is? There is id jform[sticky]-desc but no reference to it.

<div class="control-group">
  <div class="control-label sr-only">
    <label id="jform_sticky-lbl" > Pinned</label>
  </div>
  <div class="controls">
    <fieldset>
      <legend class="switcher__legend"> Pinned </legend>
      <div class="switcher">
        <input type="radio" id="jform_sticky0" name="jform[sticky]" value="0" checked="checked" class="active">
        <label for="jform_sticky0">No</label>
        <input type="radio" id="jform_sticky1" name="jform[sticky]" value="1" >
        <label for="jform_sticky1">Yes</label>
        <span class="toggle-outside"><span class="toggle-inside"></span></span> </div>
    </fieldset>
  </div>
  <div id="jform[sticky]-desc"> <small class="form-text text-muted"> Whether or not the Banner is 'pinned'. If one or more Banners in a Category are pinned, they will take priority over Banners that are not pinned. For example, if two Banners in a Category are pinned and a third Banner is not pinned, the third Banner will not display if the module setting is 'Pinned, Randomise'. Only the two pinned Banners will display. </small> </div>