Related #29821

Test instructions:

• Go to Joomla Administrator > Content > Media
• Select an image
• Press the three dots to open a dropdown with options
• Press the pencil to edit the selected image
• Go to tab rotate
• See the screenshot above.

At this moment the screenshot below is what I see:

The corresponding HTML

Suggestion

@brianteeman Would a hidden text improve a11y?
<span class="sr-only><?php echo Text::_('PLG_MEDIA-ACTION_ROTATE_PARAM_ANGLE_DEGREES'); ?></span>

aria-label would be better for that one part of the issues

This is what I was thinking about.

<label for="jform_rotate_distinct0" class="btn btn-outline-secondary">
  <input type="radio" id="jform_rotate_distinct0" name="jform[rotate_distinct]" value="0">
  0 <span class="sr-only><?php echo Text::_('PLG_MEDIA-ACTION_ROTATE_PARAM_ANGLE_DEGREES'); ?></span>
</label>

PLG_MEDIA-ACTION_ROTATE_PARAM_ANGLE_DEGREES = "degrees"

Is this what you are thinking about?

<label for="jform_rotate_distinct0" class="btn btn-outline-secondary">
  <input type="radio" id="jform_rotate_distinct0" name="jform[rotate_distinct]" value="0" aria-label="<?php
  echo Text::sprintf('PLG_MEDIA-ACTION_ROTATE_PARAM_ANGLE_DEGREES', 0); ?>">
  0
</label>

PLG_MEDIA-ACTION_ROTATE_PARAM_ANGLE_DEGREES = "%s degrees"

TBH commenting on this one part of the problem is hard because of the fake button group etc

We're improving it with small steps. Changing the fake button group into something else can be done later.
Adding aria-label is my focus at this moment. And by adding it we are improving the a11y of this part.
Which of the two do you prefer?

Doing the aria-label the way you propose is pointless as when you get rid of the fake button group the labels will need redoing.

You cant address the accessibility errors here without addressing them all at the same time. What you are proposing to do makes the label for attribute on the label useless and probably confusing to screen readers etc as you now have a label pointing to a label

See the screenshots in my comment #29943 (comment)
The difference with the screenshot you provided is that there is a label above the numbers.
And the numbers are within a label.

Is changing the first label with text Angle buttons into a legend element with the same text solving the a11y issue?
Otherwise... what needs to be done to change the current state to an a11y state?

The label above the numbers is an orphaned label (see explanation of what an orphaned label is below)

You cannot simply rename it as a legend. A legend must be inside the fieldset so it would need to be moved as well.

Orphaned form label
What It Means
A form label is present, but it is not correctly associated with a form control.
Why It Matters
An incorrectly associated label does not provide functionality or information about the form control to the user. It usually indicates a coding or other form labeling issues.
How to Fix It
Properly associate the label with its corresponding form control. If there is no corresponding form control, remove the label. Labels are not appropriate for image, submit, reset, button, or hidden form controls.

A <label> element:
does not surround a form control and the for attribute is missing/empty
references an element that is not present in the page
references an element that is not an , or <textarea> element references an element with image, submit, reset, button, or hidden type

... cont

A fieldset legend presents a description of the form elements within a fieldset. A legend should be provided if a higher level description is necessary for groups of check boxes, radio buttons, or other form controls.

If a higher level description is necessary for the user to understand the function or purpose of the controls within the fieldset, provide this description within the <legend>.

If this description or grouping is not necessary, the fieldset should probably be removed.

Note that the legend is repeated to screen reader users for each form control within the fieldset.

@brianteeman is this still valid?

yes - if anything it is worse now

It's weird as the layout that is used for the media plugins is the same as for other parts of the backend:

what does that layout have to do with this

what does that layout have to do with this

This is the file that renders the media action plugins

yes i know that obviously but that doesnt have anything to do with the error reported