I have tested this item ✅ successfully on 6f96df0 using Module.

System information

I have tested this item ✅ successfully on 6f96df0

As for the final location for the CSS file, I'd put it into https://github.com/joomla/joomla-cms/tree/4.0-dev/build/media_source/system/css/fields which ends up in /media/system/css/fields after building.
This way it can be overriden by the template if they choose so.

@Bakual thanks that is what I was thinking too OR as scss to be compiled into the templates

1. Keyboard support OK
2. This is incomprehensible to me. In the context of the tested page on Joomla Backend, the screen reader (NVDA inc Chrome)

• does not announce a switch label. Announces only states (Show, Hide),
• treats all buttons as if it were one group of buttons and announces their status, e.g.

Show radio button checked 1 of 8
Hide radio button checked 4 od 8

instead:

Show radio button checked 1 of 2
Hide radio button checked 2 od 2

When I copy the source code of a page and read it outside the context of the backend (as a separate document), the screen reader correctly reads the label of each switch and its status. (Do not load any js then.)

Firefox test: switches do not receive keyboard focus at all
Can anyone confirm this?

Which exact page. Maybe there is a markup bug somewhere

I "think" I know what the problem is. It's not the code here. But could you please tell me the page you tested so I can confirm

@zwiastunsw I think it could be because the fieldsets are nested inside other fieldsets https://test-cases.tink.uk/nested-fieldsets/index.html

@zwiastunsw if that is the problem then we can use an alternative method instead of fieldset which is to use role=group

I tested Site Modules > Breadcrumbs.
Windows 10, Chrome v. 73.0.3683.86 (64 bit).

@zwiastunsw I am going to have to reach out to some external a11y experts on this. As you discovered the code works perfectly on a plain html page but not within joomla. I cant see anything in joomla that would break it.

@zwiastunsw @wilsonge I found the problem. It is NOT in the code here. The problem is in the tabs code. When you open a module for the first time ALL the sections are set with aria-hidden=true. The first tab should not be

@jeckodevelopment why did you update the branch? It doesn't have any purpose and forces my local branch to be out of date

merge button was not available due to the branch being out of sync

@jeckodevelopment that is only relevant for the person who does the merge . it doesnt need to be done repeatedly. it has no impact on the ability to test the pr as long as there are no conflicts. All it does is waste your time pressing the button and my time updating my local branch

Let's chill :)

Is this now working from a screenreader perspective? @zwiastunsw

I'm chilled

@wilsonge Shall I go ahead and update this PR to use correct paths etc so that it can be merged?

Go for it

Updated code and original post with test instructions

The js tests are failing as expected as the js is no longer present. Should I remove the tests in this pr?

tests removed

Thanks!

Woohoo