List all categories. Improve the accessibility

[zwiastunsw]

Component: com_content, view: List all categories (frontend, Joomla3)

The page content is a list of all categories. You can also display the description and categories illustrations. Next to the category header, you can also display a badge with information about the number of articles in each category. Category title is a link to a page with a list of all categories in the nested category or list of articles in a category.

1. Screen reader user is not informed that this is a list of items / nested list of items.
2. Subcategories are displayed on hidden (collapsed) panels. Users are not informed that these are drop-down panels and they also don’t receive the status (expanded or collapsed).
3. When using tab, the focus disappears in the non-expanded panels.
4. Graphical links (plus and minus icons) are used to expand and collapse the panel. Functionally, these should be buttons, not links. Blind persons receives the message that this is a link but without the purpose of the link.
5. The title of the parent category is a link to a category page - unnecessarily it moves the users to the other page instead of expanding a content panel.
6. The header structure is incorrect. Category titles are marked with H3 tag, titles in subcategories are also covered by H3, which does not reflect the structure of content. In addition, the header H3 follows the header H1 with the title of the page - there is no heading H2.
7. Next to the category name there is an information about number of articles published in this category. Is displayed with a use of the badge. According to Bootstrap 3 specification

• Badges are used to display numbers, not text. In the code of this element there is also the text: ‘Number of articles’. Badges must be empty (only under this circumstance, Bootstrap will automatically hide the badge where there are no articles published in the category - except for IE8, because it lacks support for the :empty selector. Note: This can be omitted - in Bootstrap 4 the badge can contain both text and numbers.
• The "Number of articles" label is unnecessarily repeated - once, on the badge and, the second time, in the tooltip.

8. When there are no articles in a category that contains subcategories, the label "Number of Articles: 0" is displayed - this is incorrect because there are still articles in subcategories. Instead of the "Number of articles" label, the label "Number of subcategories" should be displayed.

9. Category illustration: suggestion to add class CSS attribute (for ex. category-image).

You will get the same page view:

• Contacts component – view List all categories
• Newsfeed component – view List all categories

[chmst]

Backend or frontend? I suppose backend, but can you give a link to the views?

Joomla in version 3 uses Bootstrap Version2.
Joomla in version 4 uses no Bootstrap in the Backend, in Frontend maybe Cassiopeia will use Bootstrap Version 4

In Version 3.x and Version 4 I have no Plus or minus icon for callapsing categories (or I am missing params?)

Could you add screens?

[zwiastunsw]

Frontend. Only Joomla3. The use of Bootstrap and badge is secondary here (see Note).
In Joomla 4 this view has been improved.
I have completed the description. I have withdrawn the Joomla4 label.

[ylahav]

@zwiastunsw thanks for the details...
It might be better to divide it to several PR and for each of them one of the assigned developer will take responsibility OR one of us will take responsibility for this PR. I don't believe in parallel working on rthe same PR.

[shitesh2607]

Hi @zwiastunsw,I want to really work on this issue. So, Please can you guide me regarding this issue? How can I solve this issue? and what should I do to solve this issue? plzz @zwiastunsw guide me.

[zwiastunsw]

@shitesh2607 contact me by email: https://github.com/zwiastunsw