Could you please look at how the tables in the admin list view are created so that this new table is also accessible

Could you please look at how the tables in the admin list view are created so that this new table is also accessible

I am not a specialist of accessibility.
This PR is based on the List Articles in a Category display, thus why it may miss that aspect.

Do you mean adding scope="row", scope="col"? What else?

also a caption like ?

						<caption id="captionTable" class="sr-only">
							<?php echo Text::_('COM_CONTACT_TABLE_CAPTION'); ?>,
							<span id="orderedBy"><?php echo Text::_('JGLOBAL_SORTED_BY'); ?> </span>,
							<span id="filteredBy"><?php echo Text::_('JGLOBAL_FILTERED_BY'); ?></span>
						</caption>

Its not about being a specialist its just about following the good examples and ignoring the bad example ;)

adding scope and caption
reviewing useless headers and if necessary removing id

I welcome a PR to my branch as It would be easier this way.

I have tested this item ✅ successfully on 4192e52

Corrections done for a11y (as much as I did know).
Left some ids as I have no idea if they are or not useful.
Did not add under caption

<span id="orderedBy"><?php echo Text::_('JGLOBAL_SORTED_BY'); ?> </span>,
<span id="filteredBy"><?php echo Text::_('JGLOBAL_FILTERED_BY'); ?></span>

Because we do not use searchtools.sort here but grid.sort.

Corrected also alpha sorting for Title as it was a bad copy paste.

I have tested this item ? unsuccessfully on 595f907

com_field-Label and Value have same style.

@Formatio-hippocampi
This is due to the change from td to th to mimic admin table in:
<th scope="row" class="list-title">

I am not sure this should have been done. If it should we can solve by a css modification. If not I can modify back.
@brianteeman
@zwiastunsw

@Formatio-hippocampi
I added a css for <dd>

can you test again? Needs npm to test.

test only by Patchtester.

Tested, didn't run npm run build:css.
On my screenshot there is no need to add the css change for <dd>.

To prevent the first column to stretch you might consider the following css:

.list-title {
    white-space: nowrap;
    width: 1%;

    vertical-align: top;
}

I see that the Details are just rendered with a <br/>
Is it an idea toe render them in a list <dl> or <ul>?

@hans2103
Indeed no need for dd new css for Details because Details are displayed via <td> and not <th>
<th> is only used for the title and there one needs the new css. The custom field is rendered after title.

The main question here is
Do we need a <th> or not for title?
Is the Caption enough

				<caption id="captionTable" class="sr-only">
					<?php echo Text::_('COM_CONTACT_TABLE_CAPTION'); ?>,
				</caption>

as we can't use

<span id="orderedBy"><?php echo Text::_('JGLOBAL_SORTED_BY'); ?> </span>,
<span id="filteredBy"><?php echo Text::_('JGLOBAL_FILTERED_BY'); ?></span>

using br or ul/li is not the main matter. We can do both.
Will test

.list-title {
    white-space: nowrap;
    width: 1%;

    vertical-align: top;
}

We do need the th element in the rows.
The name of each contact can be seen as a header.
see: https://www.w3.org/WAI/tutorials/tables/two-headers/

The caption element indicates the title of the table. That one is needed too.
(actually for all tables in Joomla)

It would be great if <span id="orderedBy and <span id="filteredBy could be added to the <caption> too. But that is out of scope for this PR. Frontend is using grid.sort while backend uses searchtools.sort. A new PR should be added to find a way to change the innerHTML using grid.sort.

The PR is a11y fine if we assume backend similar tables are fine.

as .list-title is also used for newsfeeds and tags, in a weird way, I prefer not touch at that now. It would be for another PR where all occurences are taken care of.

OK, after this small change for the dd css, it looks that this PR is OK to go.
remains, for future PRs, to deal with

1. grid.sort
2. .list-title or other depending on future modifications for articles, newsfeeds, tags category display in frontend.

I have tested this item ✅ successfully on 7214004

I have tested this item ✅ successfully on 7214004

For me it worked as described.

RTC. Thanks for testing.