[4.0] Labels Ordering are not associated with forms

[zwiastunsw]

Steps to reproduce the issue

1. Go to Modules new/edit
2. Use screen reader (I use NVDA), move focus to Ordering field
   or
3. Click on the Ordering label
   or
4. Check Accessibility tree (in Chrome)

Expected result

• The screen reader should announce the role combobox and the label Ordering
• When you click on a label, the field should receive a focus
• The field should have an accessible name in the Accessibility tree

Actual result

1. Screen reader (NVDA) announces only a role, does not announce a label
2. When you click on a label, the field does not receive a focus
3. The field does not have an accessible name in the Accessibility tree

System information (as much as possible)

• Windows 10,
• Chrome 72.0.3626.81, Firefox/65.0
• Apache 2.0 server (online)

Additional comments

The label should probably be assigned to the 'select' field.

[brianteeman]

Most of the custom elements have the same problem. I did raise this previously

[dgrammatiko]

@zwiastunsw the id on the select element there is wrong

@brianteeman what do you mean most custom elements have the same issue? It might be a bug in the id as in the example above but there is no fundamental problem with form fields inside a custom element:

[brianteeman]

Check the switcher,fancy-field-select and media custom field and the field used for article selection eg Article Associations (might not be a custom field (?)

The label is not associated with the field

[dgrammatiko]

Erm, I'm just showcasing the media custom field above...

[brianteeman]

sorry that one is ok - I was using edge as the browser and it presents the a11y tree in a different way and I misread it for that one. the other two are correct reports.

PS the real easy giveaeway without checking the accessibiity tree is that you should be able to click on the field label and the browser will highlight the field input

[zwiastunsw]

I have identified the same problem on many pages. In order not to assume new issues, here is a list of detected cases:

1. Article new/edit page:
   • Content tab: Ordering field, Tags field
2. Articles: New / Edit Category
   • Category tab: Parent field, Tags field
3. Articles: New/Edit Field pages
   • General tab: Category field
   • Options tab: Display When Read-Only field
4. Articles: New Field Group pages
   • Options tab: Display When Read-Only field
5. Menus: Edit Item page, Single Article menu item type
   • Details tab: Select Article field
6. Menus: Edit Item page, Category blog menu item type
   • Details tab: Choose a Category field
7. Menus: Edit Item page, Single Contact menu item type
   • Details tab: Select Contact field
8. Menus: Edit Item page, Contact Single Category menu item type
   • Details tab: Select a Category field
9. Menus: Edit Item page, Single News Feed menu item type
   • Details tab: Feed field
10. Banners: New / Edit
    • Details tab: Category field
11. Banners: New / Edit Category
    • Details tab: Parent field
12. Contacts: New / Edit
    • Edit Contact tab: Category field, Tags field
13. Contacts: New / Edit Category
    • Category tab: Parent field, Tags field
14. News Feeds: New / Edit
    • Edit News Feedt tab: Category field, Tags field
15. News Feeds: New / Edit Category
    • Category tab: Parent field, Tags field
16. User Notes: New/Edit
    • Category field
17. User Notes: New / Edit Category
    - Category tab: Parent field, Tags field

[brianteeman]

see #23919

[brianteeman]

@zwiastunsw can you update the list please as I think some of them have been resolved in the #23919

[brianteeman]

As far as I can tell it is just the switcher fields that need fixing. Can you suggest what the html should be and I can fix that

[zwiastunsw]

As you can see, there were no switches in the list above. Because this is a separate topic.
Label tag cannot be applied to a fieldset. See:

The <label> tag defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element. HTML Tag

The easiest way seems to me to add a legend tag inside the fieldset tag.
So who should look like that:

<fieldset class="switcher success active has-success" tabindex="0" id="jform_params_show_on_article_page" aria-checked="true" role="switch" aria-labeledby="jform_params_show_on_article_page-lbl">
   <legend class=" ...." >Show on Article Page</legend>
   <input type="radio" id="jform_params_show_on_article_page0" name="jform[params][show_on_article_page]" value="0" tabindex="-1" class="valid form-control-success" aria-invalid="false">
   <input type="radio" id="jform_params_show_on_article_page1" name="jform[params][show_on_article_page]" value="1" checked="checked" class="active" tabindex="-1">
<span class="switch success"></span>
</fieldset>

[brianteeman]

OK I can work on that. I was struggling with finding out how to do the mark up - but the legend seems a good approach with a class of sr-ony

I will work on that.

[zwiastunsw]

I thought rather about replacing the current label tag with a legend tag. Label tag is not correct here. It contains a label, but this label is not assigned to any element. Its relationship with the switch is only visual.

[brianteeman]

@dgrammatiko just realised that this switcher is all js - not my area ;)

[dgrammatiko]

@zwiastunsw @brianteeman decide what the markup should be and I'll do the changes

[brianteeman]

I am happy with the legend idea. A fieldset is supposed to have one anyway

[dgrammatiko]

We need someone to style the legend so it looks like label, eg respects the style of the rest of the form. @ciar4n some help here?

[zwiastunsw]

My opinion: legend tag instead of label

You will need to style like a label. (@dgrammatiko 👍 )

[brianteeman]

Replacing the label with a legend wont work.
We render the label and the input separately not as one single input so in this case the legend tag will be outside of the fieldset which is not valid

[dgrammatiko]

@brianteeman the legend will be a child of the fieldset not outside. The styling needs to be adjusted so it looks like a label, so not changing the markup, just some fancy styling

[brianteeman]

but you would then need to change the renderfield code to not output a label

[dgrammatiko]

@brianteeman there is already an option in the codebase for this

	<?php if (empty($options['hiddenLabel'])) : ?>
		<div class="control-label"><?php echo $label; ?></div>
	<?php endif; ?>

So we just add hiddenLabel="true" in the xml for the switch, or even better we do that in the field itself

[zwiastunsw]

@dgrammatiko : Note. Remember to correctly add aria-describedby to the switcher (to fieldset in this cause). On the Banner new/edit page there is a switcher with a hint.

[dgrammatiko]

aria-describedby should point to legend, right?

[zwiastunsw]

no to legend, to fieldset

[ciar4n]

We need someone to style the legend so it looks like label, eg respects the style of the rest of the form. @ciar4n some help here?

PR created.. #23927

[wilsonge]

I've merged that to unblock here

[brianteeman]

Not really. That field will have to be done by someone else in another pr. You don't want me writing JavaScript

[brianteeman]

Looks like the problem with the fields identified in the original post is that they are all joomla-field-fancy-select

[brianteeman]

Other identified fields that exhibit the problem are those with select buttons. Like select a category. I have a fix in preparation for those.

[brianteeman]

see #24775 for more of the above being fixed

[brianteeman]

@zwiastunsw please update this so that I can know if there are any more to fix

[zwiastunsw]

I'm very busy until June 12th. I'm sory

[brianteeman]

@zwiastunsw still busy?

[zwiastunsw]

I'm here. Today I did my first tests. :)
What's the version I'm supposed to use for testing? Because today I did the same tests twice for the Backend template...

[ghost]

Closed as having Pull Request #25779