No Code Attached Yet a11y bug UI/UX
avatar brianteeman
brianteeman
3 Jul 2020

Any admin view that is by default sorted by ordering or any view that is subsequently change to sort by ordering will spit out errors because there is an input without a label. That is easily fixed but it still would be impossible to change the ordering without using a mouse

avatar brianteeman brianteeman - open - 3 Jul 2020
avatar joomla-cms-bot joomla-cms-bot - change - 3 Jul 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 3 Jul 2020
avatar chmst chmst - change - 4 Jul 2020
Category Accessibility
avatar hans2103
hans2103 - comment - 5 Jul 2020

@brianteeman could you give me a link to any admin view that is by default sorted by ordering? Saves me time searching.

avatar brianteeman
brianteeman - comment - 5 Jul 2020

Workflows

avatar hans2103
hans2103 - comment - 5 Jul 2020

Workflows found... had to enable it first:

enable Workflow

  • Go to Joomla 4 Administrator > Content > Articles
  • Click Options in the top-right corner.
  • Click Integration
  • Enable the Workflow feature.
  • Save & Close
  • Go to Joomla 4 Administrator > Content > Workflow

I cannot reproduce the issue. I can change the order of column Ordering just by using a keyboard.
Schermafdruk 2020-07-05 14 16 41

Using AXE plugin I do notice an error. The columnhead on the left of the ordering column is missing a label. But that is not what you are describing as an issue here. Or am I reading it wrong.

Form elements should have a visible label

Ensures that every form element is not solely labeled using the title or aria-describedby attributes

Element location
input[name="checkall-toggle"]
Element source
<input type="checkbox" name="checkall-toggle" value="" title="Check All Items" onclick="Joomla.checkAll(this)">

avatar brianteeman
brianteeman - comment - 5 Jul 2020

The issue is that you can not change the ordering not which column it is sorted by . Create a second workflow and try to change the order of the workflows.

avatar hans2103
hans2103 - comment - 5 Jul 2020

aha.. moving one row after / before another when sorted by Ordering.
I will first have to find out how I can change ordering by keyboard before I can test your issue.
Thank you.

avatar hans2103
hans2103 - comment - 5 Jul 2020

@brianteeman can you explain me how I should change the ordering by keyboard? Can't find out how.

avatar brianteeman
brianteeman - comment - 5 Jul 2020

I don't know how. That's the point

avatar hans2103
hans2103 - comment - 5 Jul 2020

In other words, we have to find a solution to make drag&drop possible by keyboard too.

avatar hans2103
hans2103 - comment - 20 Jul 2020

@brianteeman I'm not able to find a proper solution.. yet. Perhaps someone else can give this issue a look too.

avatar richard67 richard67 - change - 28 Jan 2022
Labels Added: No Code Attached Yet a11y
Removed: ?
avatar richard67 richard67 - labeled - 28 Jan 2022
avatar Hackwar Hackwar - change - 20 Feb 2023
Labels Added: bug
avatar Hackwar Hackwar - labeled - 20 Feb 2023
avatar brianteeman
brianteeman - comment - 19 Jul 2024

In other words, we have to find a solution to make drag&drop possible by keyboard too.

I think there is a better/more practical option.

The ordering column has a hidden input which is the order number. Instead of hiding it we can make it visible when the table is sorted by column and then re-ordering is simply a case of editing the value in the input.

It just comes down to how we sabe the new order. Either it could be when you exit each input or we display a save order button.

avatar Fedik
Fedik - comment - 3 Sep 2025

Joomla 2.5 had a good feature for ordering/sorting without drag&drop.

avatar chmst chmst - change - 3 Sep 2025
Labels Added: UI/UX
avatar chmst chmst - labeled - 3 Sep 2025
avatar chmst
chmst - comment - 3 Sep 2025

There are two aspects. Newbies often don't understand the ordering button and the drag and drop. It is the Usability issue.
The other aspect is the a11y issue, this can be repaired if someone hast the js skills.

The J2.5 feature seemed outdated when J4 was built, but now I think that it was the better solution, @Fedik

avatar brianteeman
brianteeman - comment - 3 Sep 2025

the problem with the old 2.5 system was that you could only move up/down one row at a time

there are js options available that support keyboard drag and drop

avatar Fedik
Fedik - comment - 3 Sep 2025

you could only move up/down one row at a time

There was an input for position you want, that can be faster than dragging the row especially for large distances.
Plus it should be even nicer for mobile, where drag&drop is horrible.

there are js options available that support keyboard drag and drop

we have something like that for subform,

avatar brianteeman
brianteeman - comment - 3 Sep 2025

you could only move up/down one row at a time

There was an input for position you want, that can be faster than dragging the row especially for large distances.

true - i forgot that.

Its still there its just hidden

Image
avatar Fedik
Fedik - comment - 3 Sep 2025

In theory we could try to restore it in addition to drag&drop, it could look like:
<3dot> <position input> <little up/down arrows>
3dot is for drag and drop and rest is for "non-drag" sorting.

avatar brianteeman
brianteeman - comment - 3 Sep 2025

In other words, we have to find a solution to make drag&drop possible by keyboard too.

I think there is a better/more practical option.

The ordering column has a hidden input which is the order number. Instead of hiding it we can make it visible when the table is sorted by column and then re-ordering is simply a case of editing the value in the input.

It just comes down to how we sabe the new order. Either it could be when you exit each input or we display a save order button.

avatar Fedik
Fedik - comment - 3 Sep 2025

a save order button, I forgot it also was in 2.5 :)

avatar rytechsites
rytechsites - comment - 3 Sep 2025

I'll put in my 2 cents... PLEASE put the order number back. I'm sorry I can't contribute more, but seeing the number would make it so much easier to explain to others how it works... and if it helps with making it WCAG compliant even better.

Add a Comment

Login with GitHub to post a comment