If I right understood it may be a bug with select field, there was a fix #23455
I try to redo, some time later.

About a Tabs that Accordion (on small window width), it hardcoded in the tabs script, that better ask a guy who wrote it ?

If I right understood it may be a bug with select field, there was a fix #23455

This would explain the category and parent field issue in Firefox indeed, not sure about the wrong association field result.

About a Tabs that Accordion (on small window width), it hardcoded in the tabs script, that better ask a guy who wrote it

No idea who wrote the custom-elements: the js is in media/vendor/joomla-custom-elements/js/joomla-tab.js I would not even know who to ask. ROTFLOL

Maybe @wilsonge knows

@infograf768 It was @dgrammatiko , as far as I know.

Using Accordeon instead of tabs (as done in 3.x) makes the whole feature the less user friendly experience I have ever seen, specially as clicking on the title of each open accordeon does not close it, forcing to infinite scrolls.

Maybe thats another firefox bug as they do work correctly as an accordion for me on chrome (not commenting about tabs vs accordion

@infograf768 I was the one that wrote that script. Unfortunately, there was a request from the accessibility team to have an automatic transformation from tabs to accordion for mobiles. This:

• was very poorly/badly (put whatever word you like here) by me
• is wrong to have such changes based on the window width
• script used to reveal the wrong implementation of many custom elements (that's the reason it wasn't fixed for so long)

Most of the fields are NOT production ready. Months ago I tried to fix that but for some reason, @wilsonge was not merging those PRs, so, you end up with really buggy interactive elements. Of course, solving the tabs it might seem the problem here but the reality is that the fields need to be fixed before that

@infograf768 please test #25676 , it a fix only for an empty category/parent/tags field

Closed as having Pull Request #25676

@franz-wohlkoenig it an partial fix for the issue, it does not fix:

Target association for the reference item is wrong.

@franz-wohlkoenig As far as I understood Fedik, his PR fixes only a part of the issues mentioned here.

#25676 works fine for Category, Parent and Tab. ? @Fedik

Notes

The Target Association field for its reference is not solved (as it is not concerned by #25676).

Accordion can't be toggled by clicking on its title in Firefox AND Chrome, as I wrote above.

Another Note:
Now that #25676 is OK and we can see the category, there is another bug on wide screens:

Maybe we should force here display with tabs or accordion for these parameters (once accordion toggling is solved)

shouldn't that be own Issues so we get one Issue = one PR?

shouldn't that be own Issues so we get one Issue = one PR?

Yep. Was just a Note. Once #25676 is merged I will create 2 new issues: one for the association field, the other for the Accordion stuff (in which I will copy @dgrammatiko post here.

I have now tested the accordion in firefox and can confirm it works (opens just one at a time) as well as in chrome

I have now tested the accordion in firefox and can confirm it works (opens just one at a time) as well as in chrome

It does NOT toggle when clicking on the "opened accordeon" title which means it never closes except if you click on another accordion title. I never said we can't get the accordeon to open.

That would collapse all? Its not supposed to do that

I am expecting the same behavior as in 3.x for accordeons. Anyhting else is unacceptable.

It is specially important here because of the amount of parameters and accordeons

unacceptable is a very strong term

The accordion was designed like that. Eg if you click on an active tab list element the tab doesn’t disappear, thus the accordion follows the same pattern. This accordion shouldn’t be compared to the bootstrap one! At least this one is properly accessible...

Sorry to say. This is bad design. Anyone trying to work with accordions in multilang associations will soon give up.
Do you really need an animated gif to demonstrate what a user is forced to do?

Just for the record: all bootstrap interactive components are crap comparing to the accessibility guides from w3c. This was the main reason joomla decided to roll its own. The vanilla js and custom elements where side effects of that reason...

Just because you were used to some wrong pattern the switch to the correct one cannot be noted as unacceptable...

@infograf768 what you're showing us with this gif is not something broken. What I believe you would like, but you're not asking for it rather just blaming, is some kind of synchronization of the 2 iframes, eg when you activate one tab on one pane the same tab activates in the other pane.

It'snot the accordion/tab that is wrong in this particular failed design, think about it...

Nope, we need collapse more than sync.

Sorry I don't agree and obviously since I disagree I won't code such thing

There is nothing that says you cannot have accessible accordion exactly how @infograf768 wants it

Read https://www.scottohara.me/blog/2017/10/25/accordion-release.html
and see the examples https://scottaohara.github.io/a11y_accordions/

@brianteeman I didn't say that it is wrong, did I? The script, though, has the same functionality for tabs and accordion for simplicity. Adding this kind of behaviour will need more code. The point IMHO is that the automatic transformation from tabs to accordion (although might sound a very nice UX) shouldn't have been implemented in the first place.

I dont have an opinion on that

I have nothing against changing tabs to accordion. It looks like an excellent feature when the window is reduced (and essential for non-desktop screens).
This is also used when editing any item (for example an article) and not only for com_associations side by side.
The only issue with the current implementation is the absence of collapsing forcing users to scroll and scroll and scroll.
I insist this is bad UI and as it can be implemented (#25672 (comment) tks for link) without giving up accessibility, I see no good reason to not correct it.

just a thought,
in theory, alternative for accordion transformation could be a tabs with "icon+text", which on mobile shows only "icon" (icon+text for active tab)

@Fedik check how tabs work on this exact site for mobiles (hint: the tab links become horizontal scrollable, thus no need to shrink to icons)

Closing this.
Further tests show that the association field issue is older than 4.0. Asked Robbie for help on this.
As for the accordion... not much more to say about it. If the original coder of that js does not admit the issue and nobody is willing/knowing how/proposing to correct it, it will remain as part of the wrong UI(s) of J4.

Create a new issue for the accordion. Its a generic issue not just related to associations. Should be an easy fix - but not if its buried here

@infograf768 fwiw all my work was based on this: https://w3c.github.io/aria-practices/examples/accordion/accordion.html and as you can see the functionality you’re missing is not there as well

@dgrammatiko

and from the sample accordeon.js

  // Allow for each toggle to both open and close individually
  var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

and further down

        // When toggling is not allowed, clean up disabled state
        if (!allowToggle) {
          active.removeAttribute('aria-disabled');
        }

and

        // If toggling is not allowed, set disabled state on trigger
        if (!allowToggle) {
          target.setAttribute('aria-disabled', 'true');
        }

 else if (allowToggle && isExpanded) {
        // Set the expanded state on the triggering element
        target.setAttribute('aria-expanded', 'false');
        // Hide the accordion sections, using aria-controls to specify the desired section
        document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
      }

The example provided indeed does not set aria-disabled to false, but it looks available in the code if desired.

Using this could solve the issue if I do not mistake.
But as joomla-tab.js is a mixture of tabs and accordion, I have no idea how to do that myself.

Btw, aria-disabled= "false" is used by https://scottaohara.github.io/a11y_accordions/