[4.0] List Contacts in a Category display

[infograf768]

Summary of Changes

Displaying the list of contacts in a table, using a similar default display as List Articles in a Category menu item

Testing Instructions

Create a Contact Category.
Create contacts, some with parameters, some without.
Also test Unpublishing a contact, Setting published up the future, Settings publish down to a date in the past, Trash contact
Create a List Contacts in a Category menu item.
Display this menu item in frontend.

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

When using custom field after title

Documentation Changes Required

Maybe, because of the new placing of the events.

[brianteeman]

did you mean to remove this

[infograf768]

yep. After some discussion we found it was useless to display the author of the contact in frontend.

[brianteeman]

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

[infograf768]

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>

[brianteeman]

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

[infograf768]

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

[ghost]

I have tested this item ✅ successfully on 4192e52

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30648.}

[infograf768]

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.

[ghost]

I have tested this item 🔴 unsuccessfully on 595f907

com_field-Label and Value have same style.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30648.}

[infograf768]

@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

[infograf768]

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

can you test again? Needs npm to test.

[ghost]

test only by Patchtester.

[hans2103]

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>?

[infograf768]

@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;
}

[hans2103]

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/

[hans2103]

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

[hans2103]

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.

[hans2103]

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

[infograf768]

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.

[infograf768]

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.

[hans2103]

I have tested this item ✅ successfully on 7214004

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30648.}

[BertaOctech]

I have tested this item ✅ successfully on 7214004

For me it worked as described.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30648.}

[infograf768]

RTC. Thanks for testing.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30648.}