[4.0] Turn the table view in media manager into a table

[wilsonge]

Turns the table view in media manager into a table thus starting work on a11y compatibility

[infograf768]

Looks like I can't select items anymore. Here banner_cradle.jpg
Before

After

[infograf768]

Formerly, we had

With this patch we have

[bahl24]

Can we integrate #24423 in this PR?

[wilsonge]

@infograf768 fixed that. I'm deliberately leaving out the mouseleave, mouseover and focused events because they aren't required in the table view - they're related to tabbing through the other view

[wilsonge]

@brianteeman @zwiastunsw can you guys take a look at this and advise on what's next. Clearly all I'm doing here is converting the existing lists to a table which is going to help but not magically solve anything and I need pointers on what's required next here

[zwiastunsw]

@wilsonge : Is there a project, a concept for this view? Do you expect such a concept?

1. Add caption to the table
2. Add summary attribute
3. Add scope="col" attribute to the th cels
4. Change the cell tag with the file name from TD to TH and add the scope="row" attribute
5. The file name should be a link to the file editing page
6. The table should contain links to download the file, copy the file link, etc.

[wilsonge]

@zwiastunsw
I've done 1, 3 and 4
I'm not doing 5 and 6 in this PR because that's not really a11y improvements it's adding features to the table view and that makes this rework much more complicated than it should be

Can you please clarify about the summary attribute. I have no clue what that is?

[zwiastunsw]

"The SUMMARY attribute is placed within the TABLE tag, and is read only by screen readers. It can be used to clarify the organization of a table, or to provide a quick summary of the table’s content. It shouldn’t repeat the information in the CAPTION tag, but can be used to supplement that information."

You do not need to edit the summary text. We will write it later, when the table is ready. Meanwhile, it could be, for example, "In the rows there are - media files and information about them..."

[wilsonge]

I don't think we should be using that. According to https://www.w3.org/TR/WCAG20-TECHS/H73.html

Note: In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.

[zwiastunsw]

This is a technique that can still be used. If it can improve accessibility, it is worth using it.

For me the most important problem is the functionality of this table. If it is to contain only information, its usability is rather low. It is also difficult to assess the accessibility when you do not know exactly what is to be accessible. That is why I asked earlier about the concept of this Media Manager view.

[brianteeman]

The summary tag should not be used.

[zwiastunsw]

I do not insist, because the summary attribute has been withdrawn in HTML5.
Instead of the summary attribute, other solutions can be used. What kind of solutions?
Alternatives are described in the following section 4.9.1.1 HTML5:

• in prose, surrounding the table (plus aria-describedby attribute in he table tag),
• next to the table, in the same figure,
• other techniques, or combinations of the above techniques, as appropriate.

It is best to arrange the table in such a way that the description is not needed. Unfortunately, so far we do not know what this table will contain. (Note that this table will probably be structured differently from the other tables in Backend).

[brianteeman]

Those are for when you are presenting a table of static data such as a timetable

[zwiastunsw]

This applies to the tables presenting the data (no static data etc.). It is more about complex and extended tables than about simple tables.
This is an academic discussion. I still do not know what is in this table. About file data? This file data is already in the next window. The most important data? I mean, which one?
I still don't know what this table is for. For a quick overview of many data? For quick access to operations on individual or multiple files?
This content is to be accessible, not packaging. If there is no answer to the question of what the content should be, then the discussion about accessibility is pointless. The formal requirements for table accessibility are simple (correct regular structure, caption, header cells, scope attribute and/or headers attribute),

[brianteeman]

I don't understand why you don't know what this table is for

[zwiastunsw]

5. The file name should be a link to the file editing page
6. The table should contain links to download the file, copy the file link, etc.

I still don't know if these functions will be in the table or not. If they will be, where will they be? First you have to answer these questions.
In my opinion, the table is supposed to provide access to files first and foremost, and not only to information about files. Now this is the file information table.

PS It's possible that I'm not describing it clearly. But I can't do it any other way.

[wilsonge]

Right now they aren't. So for the purposes of this PR let's assume they won't be for now. If we go back and add them in then we'll need to adapt the a11y functionality at the time too

Basically for now it's a file information table

[wilsonge]

OK I think we've got a good start here - it's just whether we need to add more - which can be done in a future PR as required

[infograf768]

Some folder icons do not display:

[infograf768]

The variable is wrong:
using
$sidebar-tree-folder-icon: "\f07b";
$icon-type-folder: "\f07b"; in variable.scss
gives

[wilsonge]

Fixed