[A11Y] List-View

[benjaminkott]

Description

With the file module, we need to start to implement a more modern, accessible approach to the current data tables we provide in core today. This table layout provides clear aria information on column sortings, row scopes, and element actions. It hides unnessesary information for screenreaders like icons and marks them for presenation purposes only. The data properties are only examples and can be extended, shortened. Please adapt to fit the needs of the file module.

Markup

<div class="component-datatable" role="group" aria-labelledby="component-datatable-123523356">
    <table class="component-datatable-table">
        <caption class="component-datatable-caption" id="component-datatable-123523356">Images</caption>
        <thead class="component-datatable-head">
            <tr>
                <th data-type="checkbox" scope="col" role="columnheader">
                    <span class="component-checkbox">
                        <input class="component-checkbox-input" type="checkbox" id="component-datatable-selectall-123523356" value="1">
                        <label class="component-checkbox-label" for="component-datatable-selectall-123523356">
                            <span class="component-visually-hidden">select all elements</span>
                        </label>
                    </span>
                </th>
                <th data-type="title" scope="col" role="columnheader" aria-sort="ascending">
                    <span class="component-datatable-columnheader">
                        <span class="component-datatable-columnheader-icon" role="presentation">
                            <!-- ICON -->
                        </span>
                        <span class="component-datatable-columnheader-text">Name</span>
                    </span>
                    <button class="component-datatable-sorting">
                        <span class="component-datatable-sorting-icon" role="presentation">
                            <!-- ICON -->
                        </span>
                        <span class="component-datatable-sorting-label component-visually-hidden">
                            sort by Name in descending order
                        </span>
                    </button>
                </th>
                <th data-type="date" scope="col" role="columnheader" aria-sort="none">
                    <span class="component-datatable-columnheader">
                        <span class="component-datatable-columnheader-text">Modified</span>
                    </span>
                    <button class="component-datatable-sorting">
                        <span class="component-datatable-sorting-icon">
                            <!-- ICON -->
                        </span>
                        <span class="component-datatable-sorting-label component-visually-hidden">
                            sort by Modified in ascending order
                        </span>
                    </button>
                </th>
                <!-- MORE COLUMNS -->
            </tr>
        </thead>
        <tbody class="component-datatable-body">
            <!-- RECORD START -->
                <tr data-uid="identifier1234">
                    <td data-type="checkbox" data-label="Select DSC00001.jpg">
                        <span class="component-checkbox">
                            <input class="component-checkbox-input" type="checkbox" id="component-datatable-select-identifier1234" value="1">
                            <label class="component-checkbox-label" for="component-datatable-select-identifier1234">
                                <span class="component-visually-hidden">Select DSC00001.jpg</span>
                            </label>
                        </span>
                    </td>
                    <th scope="row" data-type="title" data-value="DSC00001.jpg" data-property="name" data-label="Filename">
                        <a class="component-datatable-link" href="#" title="Open Image DSC00001.jpg">
                            <span class="component-datatable-link-icon" role="presentation">
                                <!-- ICON -->
                            </span>
                            <span class="component-datatable-link-text">DSC00001.jpg</span>
                        </a>
                    </th>
                    <td data-type="date" data-value="1554138381" data-property="modified" data-label="Modified">
                        1 April 2019
                    </td>
                    <!-- MORE COLUMNS -->
                </tr>
            <!-- RECORD END -->
        </tbody>
    </table>
</div>

Definition of Done

• markup is provided as shown/adapted
• aria-labelledby is set on the outer datatable container
• table has a caption to describe the contents that is referenced by the outer container
• thead and tbody are implemented
• all th declare its scope for col|row
• the sorting direction it present on all th elements in the thead, valid values for aria-sort are none, ascending and descending
• the sorting buttons describe the behavior that is applied when the activated for a column, not the active one
• all checkboxes have descriptive labels that are placed directly after the label itself.
• each link has a title

[susannemoog]

each link click changes browser history would mean integrating a full routing solution in the iframe that works by manipulating the parent frame to allow using the history afaics. that's decidedly non-MVP...

[benjaminkott]

@susannemoog it's currently possible to navigate through the browser history back and forth since also the iframe location changes influence the parent frame. I agree that a full routing solution is not the scope of the MVP, but the user should be able to navigate as before.

[benjaminkott]

@NeoBlack if we decide not to do the link behavior within this ticket, we need to create a new issue and remove it from the definition of done