Skip to content

fix(a11y): Files table roles #39385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Pytal wants to merge 2 commits into from
Closed

fix(a11y): Files table roles #39385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
517d0ed
fix(a11y): Files table roles
Pytal Jul 13, 2023
57685b9
fix(a11y): Files table scopes
Pytal Jul 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/files/src/components/FilesListFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
-->
<template>
<tr>
<th class="files-list__row-checkbox">
<th class="files-list__row-checkbox"
scope="row">
<span class="hidden-visually">{{ t('files', 'Total rows summary') }}</span>
</th>

Expand Down Expand Up @@ -50,7 +51,8 @@
<!-- Custom views columns -->
<th v-for="column in columns"
:key="column.id"
:class="classForColumn(column)">
:class="classForColumn(column)"
scope="row">
<span>{{ column.summary?.(nodes, currentView) }}</span>
</th>
</tr>
Expand Down
17 changes: 11 additions & 6 deletions apps/files/src/components/FilesListHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
-->
<template>
<tr>
<th class="files-list__column files-list__row-checkbox">
<th class="files-list__column files-list__row-checkbox"
scope="col">
<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
</th>

Expand All @@ -34,7 +35,8 @@
<template v-else>
<!-- Link to file -->
<th class="files-list__column files-list__row-name files-list__column--sortable"
@click.stop.prevent="toggleSortBy('basename')">
@click.stop.prevent="toggleSortBy('basename')"
scope="col">
<!-- Icon or preview -->
<span class="files-list__row-icon" />

Expand All @@ -43,26 +45,29 @@
</th>

<!-- Actions -->
<th class="files-list__row-actions" />
<th class="files-list__row-actions" scope="col" />

<!-- Size -->
<th v-if="isSizeAvailable"
:class="{'files-list__column--sortable': isSizeAvailable}"
class="files-list__column files-list__row-size">
class="files-list__column files-list__row-size"
scope="col">
<FilesListHeaderButton :name="t('files', 'Size')" mode="size" />
</th>

<!-- Mtime -->
<th v-if="isMtimeAvailable"
:class="{'files-list__column--sortable': isMtimeAvailable}"
class="files-list__column files-list__row-mtime">
class="files-list__column files-list__row-mtime"
scope="col">
<FilesListHeaderButton :name="t('files', 'Modified')" mode="mtime" />
</th>

<!-- Custom views columns -->
<th v-for="column in columns"
:key="column.id"
:class="classForColumn(column)">
:class="classForColumn(column)"
scope="col">
<FilesListHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
<span v-else>
{{ column.title }}
Expand Down
4 changes: 3 additions & 1 deletion apps/files/src/components/FilesListHeaderActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
-
-->
<template>
<th class="files-list__column files-list__row-actions-batch" colspan="2">
<th class="files-list__column files-list__row-actions-batch"
colspan="2"
scope="col">
<NcActions ref="actionsMenu"
:disabled="!!loading || areSomeNodesLoading"
:force-title="true"
Expand Down
8 changes: 5 additions & 3 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,10 @@ export default Vue.extend({
mounted() {
// Make the root recycle scroller a table for proper semantics
const slots = this.$el.querySelectorAll('.vue-recycle-scroller__slot')
slots[0].setAttribute('role', 'thead')
Copy link
Member

@skjnldsv skjnldsv Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the thead not needed anymore suddenly?
The first table tr row is exactly a header, no?

https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#the_scope_attribute
image

slots[1].setAttribute('role', 'tfoot')
slots[0].classList.add('files-list__header')
slots[0].setAttribute('role', 'rowgroup')
slots[1].classList.add('files-list__footer')
slots[1].setAttribute('role', 'rowgroup')
},

methods: {
Expand Down Expand Up @@ -182,7 +184,7 @@ export default Vue.extend({
}

// Table header
.vue-recycle-scroller__slot[role='thead'] {
.vue-recycle-scroller__slot.files-list__header {
// Pinned on top when scrolling
position: sticky;
z-index: 10;
Expand Down
4 changes: 2 additions & 2 deletions apps/files/src/views/FilesList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<NcAppContent v-show="!currentView?.legacy"
:class="{'app-content--hidden': currentView?.legacy}"
data-cy-files-content>
<div class="files-list__header">
<div class="files-list__crumbs">
Copy link
Member

@skjnldsv skjnldsv Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please no, more things than breadcrumbs are/will-be in here

<!-- Current folder breadcrumbs -->
<BreadCrumbs :path="dir" @reload="fetchContent" />

Expand Down Expand Up @@ -339,7 +339,7 @@ $margin: 4px;
$navigationToggleSize: 50px;

.files-list {
&__header {
&__crumbs {
display: flex;
align-content: center;
// Do not grow or shrink (vertically)
Expand Down
4 changes: 2 additions & 2 deletions dist/files-main.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/files-main.js.map
View file
Open in desktop

Large diffs are not rendered by default.