@cloudron/pankow 4.4.0 → 4.4.2

package/components/BottomBar.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="pankow-bottom-bar">
     <slot>
-      © 2024  &nbsp;  <a href="https://cloudron.io" rel="noopener noreferrer" target="_blank">Cloudron</a> &nbsp; &nbsp; &nbsp;  <a href="https://forum.cloudron.io" rel="noopener noreferrer" target="_blank">Forum <i class="fa fa-comments"></i></a>
+      © 2024  &nbsp;  <a href="https://cloudron.io" rel="noopener noreferrer" target="_blank">Cloudron</a> &nbsp; &nbsp; &nbsp;  <a href="https://forum.cloudron.io" rel="noopener noreferrer" target="_blank" aria-label="Forum">Forum <i class="fa fa-comments" aria-hidden="true"></i></a>
     </slot>
   </div>
 </template>

package/components/BreadCrumb.vue

@@ -25,13 +25,13 @@ function onClick() {
 </script>
 
 <template>
-  <div class="pankow-breadcrumb">
+  <div class="pankow-breadcrumb" aria-label="Breadcrumb">
     <a class="pankow-breadcrumb-item" :href="home.route" @click="home.action ? home.action(home, $event) : null" @keydown.enter="home.action ? home.action(home, $event) : null" tabindex="0">
       <Icon :class="home.icon"/> {{ home.label }}
     </a>
-    <span v-for="item in items">
+    <span v-for="(item, index) in items">
       <Icon icon="fa-solid fa-chevron-right" class="pankow-breadcrumb-separator"/>
-      <a class="pankow-breadcrumb-item" :href="item.route" @click="item.action ? item.action(home, $event) : null" @keydown.enter="item.action ? item.action(home, $event) : null" tabindex="0">
+      <a class="pankow-breadcrumb-item" :href="item.route" @click="item.action ? item.action(home, $event) : null" @keydown.enter="item.action ? item.action(home, $event) : null" tabindex="0" :aria-current="index === items.length - 1 ? 'page' : null">
         <Icon v-if="item.icon" :class="item.icon"/> {{ item.label }}
       </a>
     </span>

package/components/Button.vue

@@ -53,6 +53,7 @@ function onClick(event) {
 <template>
   <component ref="elem" :is="href ? 'a' : 'div'" class="pankow-button" role="button" type="button" :class="{ 'pankow-button-disabled': disabled }"
     @click="onClick" @keydown.enter="onClick" :href="disabled ? null : href" :target="target" tabindex="0"
+    :aria-label="!$slots['default'] && icon ? icon : undefined"
     :success="success || undefined" :danger="danger || undefined">
     <Menu ref="menuItem" :model="menu" v-if="menu"></Menu>
     <Spinner v-show="loading" style="stroke: white;" :class="{ 'pankow-button-icon-with-text': $slots['default'] }"/>
@@ -108,6 +109,11 @@ a.pankow-button:visited {
   line-height: inherit;
 }
 
+.pankow-button .pankow-spinner {
+  width: 1.2em;
+  height: 1.2em;
+}
+
 .pankow-button-icon-right-with-text {
   padding-left: 7px;
 }

package/components/ClipboardAction.vue

@@ -19,7 +19,7 @@ function onClipboard() {
 </script>
 
 <template>
-  <i class="pankow-clipboard-action fa-solid fa-copy" @click="onClipboard()"></i>
+  <i class="pankow-clipboard-action fa-solid fa-copy" tabindex="0" role="button" aria-label="Copy to clipboard" @click="onClipboard()" @keydown.enter="onClipboard()" @keydown.space.prevent="onClipboard()"></i>
 </template>
 
 <style>

package/components/DateTimeInput.vue

@@ -2,6 +2,7 @@
 
 const model = defineModel();
 const props = defineProps({
+  id: String,
   readonly: {
     type: Boolean,
     default: false
@@ -15,7 +16,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <input class="pankow-text-input" :type="dateOnly ? 'date' : 'datetime-local'" :readonly="readonly" v-model="model"/>
+  <input :id="id" class="pankow-text-input" :type="dateOnly ? 'date' : 'datetime-local'" :readonly="readonly" v-model="model"/>
 </template>
 
 <style>

package/components/Dialog.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef, nextTick, computed } from 'vue';
+import { uuidv4 } from '../utils.js';
 import Button from './Button.vue';
 import Icon from './Icon.vue';
 
@@ -60,6 +61,7 @@ const mergedStyle = computed(() => {
 })
 
 const visible = ref(false);
+const dialogTitleId = ref(uuidv4());
 const dialog = useTemplateRef('dialog');
 const dialogBody = useTemplateRef('dialogBody');
 const confirmButton = useTemplateRef('confirmButton');
@@ -117,8 +119,8 @@ defineExpose({ open, close });
         <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
       </Transition>
       <Transition :name="center ? 'pankow-bounce-center' : 'pankow-bounce-center-top'">
-        <div ref="dialog" class="pankow-dialog" v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
-          <div class="pankow-dialog-header" v-show="title">
+        <div ref="dialog" class="pankow-dialog" role="dialog" aria-modal="true" :aria-labelledby="title ? dialogTitleId : null" v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
+          <div :id="dialogTitleId" class="pankow-dialog-header" v-show="title">
             {{ title }}
           </div>
           <div class="pankow-dialog-body" ref="dialogBody" :class="{ 'pankow-dialog-body-no-header': !title, 'pankow-dialog-body-no-buttons': !(rejectLabel || confirmLabel) }">

package/components/DirectoryView.vue

@@ -3,6 +3,7 @@
     class="directory-view"
     :class="{ 'drop-target-active': dropTargetActive }"
     tabindex="0"
+    role="grid"
     ref="main"
     @keydown.up.prevent="onKeyUp($event)"
     @keydown.down.prevent="onKeyDown($event)"

package/components/DirectoryViewGridItem.vue

@@ -8,15 +8,19 @@
 
     <div class="grid-item" :class="{ 'focused': item.focused, 'selected': item.selected, 'drop-target-active': dropTargetActive }">
       <div v-if="visible && showStar" class="grid-item-star" @dblclick.stop.prevent @click.stop.prevent="onToggleStar">
-        <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" />
+        <span tabindex="0" role="button" :aria-label="item.star ? 'Unstar' : 'Star'" @keydown.enter.prevent="onToggleStar" @keydown.space.prevent="onToggleStar">
+          <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" />
+        </span>
       </div>
       <div v-if="visible" class="grid-item-actions" @mouseup.stop="onActionMenu($event)">
-        <i class="fa-solid fa-ellipsis-vertical"/>
+        <span tabindex="0" role="button" aria-label="Actions" @click="onActionMenu($event)" @keydown.enter="onActionMenu($event)" @keydown.space.prevent="onActionMenu($event)">
+          <i class="fa-solid fa-ellipsis-vertical"/>
+        </span>
       </div>
 
       <div class="grid-item-icon">
         <template v-if="visible">
-          <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
+          <img :src="item.previewUrl || item.icon" ref="iconImage" :alt="item.name" @error="iconError($event)"/>
           <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
           <i v-show="fileDropIndicatorProperty !== '' && !!item[fileDropIndicatorProperty]" class="fa-solid fa-cloud-arrow-up is-filedrop"></i>
         </template>

package/components/DirectoryViewListItem.vue

@@ -11,7 +11,7 @@
       <div v-if="!visible" class="col label"></div>
 
       <div v-if="visible" class="col icon">
-        <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
+        <img :src="item.previewUrl || item.icon" ref="iconImage" :alt="item.name" @error="iconError($event)"/>
         <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
         <i v-show="fileDropIndicatorProperty !== '' && !!item[fileDropIndicatorProperty]" class="fa-solid fa-cloud-arrow-up is-filedrop"></i>
       </div>
@@ -26,13 +26,15 @@
       </div>
 
       <div v-if="visible && showStar" class="col star">
-        <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" @dblclick.stop.prevent @click.stop.prevent="onToggleStar" />
+        <span tabindex="0" role="button" :aria-label="item.star ? 'Unstar' : 'Star'" @dblclick.stop.prevent @click.stop.prevent="onToggleStar" @keydown.enter.prevent="onToggleStar" @keydown.space.prevent="onToggleStar">
+          <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" />
+        </span>
       </div>
       <div v-if="visible && showOwner" class="col owner">{{ item.owner }}</div>
       <div v-if="visible && showSize" class="col size">{{ prettyFileSize(item.size) }}</div>
       <div v-if="visible && showModified" class="col modified" :title="item.modified.toLocaleString()">{{ prettyDate(item.modified) }}</div>
       <div v-if="visible" class="col actions">
-        <div @mouseup.stop="onActionMenu($event)"><i class="fa-solid fa-ellipsis-vertical"/></div>
+        <div @mouseup.stop="onActionMenu($event)"><span tabindex="0" role="button" aria-label="Actions" @click="onActionMenu($event)" @keydown.enter="onActionMenu($event)" @keydown.space.prevent="onActionMenu($event)"><i class="fa-solid fa-ellipsis-vertical"/></span></div>
       </div>
     </div>
   </div>

package/components/EmailInput.vue

@@ -4,6 +4,7 @@ import { useTemplateRef } from 'vue';
 
 const model = defineModel();
 const props = defineProps({
+  id: String,
   placeholder: String,
   readonly: {
     type: Boolean,
@@ -21,7 +22,7 @@ defineExpose({ focus });
 </script>
 
 <template>
-  <input ref="inputElement" class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" :required="$attrs['required']" v-model.trim="model"/>
+  <input :id="id" ref="inputElement" class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" :required="$attrs['required']" v-model.trim="model"/>
 </template>
 
 <style>

package/components/FileUploader.vue

@@ -6,8 +6,8 @@
       <Button danger small tool @click="onCancelUpload" icon="fa-solid fa-xmark"></Button>
     </div>
 
-    <input type="file" ref="uploadFileInput" style="display: none" multiple/>
-    <input type="file" ref="uploadFolderInput" style="display: none" multiple webkitdirectory directory/>
+    <input type="file" ref="uploadFileInput" style="display: none" multiple aria-label="Upload files"/>
+    <input type="file" ref="uploadFolderInput" style="display: none" multiple webkitdirectory directory aria-label="Upload folder"/>
 
     <InputDialog ref="inputDialog" />
   </div>

package/components/MaskedInput.vue

@@ -5,6 +5,7 @@ import { computed } from 'vue';
 const model = defineModel({ type: [String, null], default: null });
 
 const props = defineProps({
+  id: String,
   multiline: {
     type: Boolean,
     default: false
@@ -27,7 +28,7 @@ const displayValue = computed({
 
 <template>
   <template v-if="!multiline">
-    <input class="pankow-masked-input" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
+    <input :id="id" class="pankow-masked-input" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
   </template>
   <template v-else>
     <textarea :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>

package/components/Menu.vue

@@ -325,7 +325,7 @@ defineExpose({
   <teleport to="#app">
     <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
     <Transition :name="rollUp ? 'pankow-roll-up' : 'pankow-roll-down'">
-      <div class="pankow-menu" :class="{ 'pankow-menu-keyboard-nav': keyboardNav }" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown" @mousemove="onMouseMove">
+      <div class="pankow-menu" role="menu" :aria-label="searchThreshold < model.length ? 'Filterable menu' : 'Menu'" :class="{ 'pankow-menu-keyboard-nav': keyboardNav }" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown" @mousemove="onMouseMove">
         <TextInput placeholder="Filter ..." autocomplete="off" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="width: 100%; border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
         <component v-for="item in visibleItems" ref="itemElements" :is="item.type || (item.href ? MenuItemLink : MenuItem)" @activated="onItemActivated(item)" :item="item" :has-icons="hasIcons" />
         <MenuItem v-if="model.length === 0" :item="emptyItem"/>

package/components/MenuItem.vue

@@ -42,7 +42,7 @@ function onActivated() {
 </script>
 
 <template>
-  <div class="pankow-menu-item" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
+  <div class="pankow-menu-item" role="menuitem" :aria-checked="item.checkbox ? item.checked : undefined" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
     <CheckBox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
     <span v-if="!item.separator" :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
     <div class="pankow-menu-item-separator-line" v-if="item.separator"></div>

package/components/MenuItemLink.vue

@@ -40,7 +40,7 @@ function onActivated() {
 </script>
 
 <template>
-  <a class="pankow-menu-item" style="display: block" :href="isDisabled ? null : item.href" :target="item.target || null" @click="onActivated" :class="{ 'pankow-menu-item-disabled': isDisabled }" v-if="isVisible">
+  <a class="pankow-menu-item" role="menuitem" style="display: block" :href="isDisabled ? null : item.href" :target="item.target || null" @click="onActivated" :class="{ 'pankow-menu-item-disabled': isDisabled }" v-if="isVisible">
     <span :style="{ width: hasIcons ? '29px' : 0 }" style="display: inline-block;"><Icon v-show="hasIcons" :icon="item.icon" /></span>{{ item.label }}
   </a>
 </template>

package/components/MultiSelect.vue

@@ -162,7 +162,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pankow-multiselect" :class="{ 'pankow-multiselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop="onOpen" @keydown.up.stop="onOpen" @keydown.esc="onEscape">
+  <div class="pankow-multiselect" role="combobox" :aria-expanded="menu?.isOpen ?? false" aria-haspopup="listbox" :class="{ 'pankow-multiselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop="onOpen" @keydown.up.stop="onOpen" @keydown.esc="onEscape">
     <!-- native select for required and accessibility handling -->
     <select ref="nativeSelect" :required="$attrs['required']" multiple style="display: none">
       <option value=""></option>

package/components/Notification.vue

@@ -1,9 +1,11 @@
 <template>
-  <TransitionGroup name="pankow-notification-fade" :class="`pankow-notification-container ${position}`" tag="div">
+  <TransitionGroup name="pankow-notification-fade" :class="`pankow-notification-container ${position}`" tag="div" role="alert" aria-live="polite">
     <div v-for="message in messages" :key="message.id">
       <div class="pankow-notification" :[message.type]="''">
         {{ message.text }}
-        <Icon @click="removeNotify(message.id)" icon="fa-solid fa-xmark" class="pankow-notification-close"/>
+        <span tabindex="0" role="button" aria-label="Close notification" @keydown.enter="removeNotify(message.id)" @keydown.space.prevent="removeNotify(message.id)" @click="removeNotify(message.id)" class="pankow-notification-close">
+          <Icon icon="fa-solid fa-xmark"/>
+        </span>
       </div>
     </div>
   </TransitionGroup>

package/components/NumberInput.vue

@@ -2,6 +2,7 @@
 
 const model = defineModel();
 const props = defineProps({
+  id: String,
   placeholder: String,
   readonly: {
     type: Boolean,
@@ -21,7 +22,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <input class="pankow-text-input" type="number" :step="step" :min="min" :max="max" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', parseInt($event.target.value))"/>
+  <input :id="id" class="pankow-text-input" type="number" :step="step" :min="min" :max="max" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', parseInt($event.target.value))"/>
 </template>
 
 <style>

package/components/OfflineBanner.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 
 <template>
   <Transition name="pankow-roll-down">
-    <a class="pankow-offline-banner" v-show="active" :href="href" target="_blank">
+    <a class="pankow-offline-banner" role="alert" v-show="active" :href="href" target="_blank">
       <i class="fa fa-solid fa-spin fa-circle-notch"/> {{ label }}
     </a>
   </Transition>

package/components/PasswordInput.vue

@@ -30,7 +30,7 @@ function toggleReveal() {
 <template>
   <div class="pankow-password">
     <input class="pankow-password-input" :id="id" :type="revealed ? 'text' : 'password'" :disabled="disabled ? true : undefined" :placeholder="placeholder" :autofocus="$attrs['autofocus']" :required="$attrs['required']" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
-    <i class="pankow-password-reveal" v-html="revealIcon" @click="toggleReveal"></i>
+    <span class="pankow-password-reveal" tabindex="0" role="button" :aria-label="revealed ? 'Hide password' : 'Show password'" @keydown.enter="toggleReveal" @keydown.space.prevent="toggleReveal" @click="toggleReveal" v-html="revealIcon"></span>
   </div>
 </template>
 

package/components/Popover.vue

@@ -144,7 +144,7 @@ defineExpose({
   <teleport to="#app">
     <div class="pankow-popover-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
     <Transition :name="rollUp ? 'pankow-animation-pop-up' : 'pankow-animation-pop-down'">
-      <div v-show="isOpen" class="pankow-popover" ref="container" :style="{ 'max-width': width || null, 'max-height': height || null }">
+      <div v-show="isOpen" class="pankow-popover" ref="container" role="dialog" aria-label="Popover" :style="{ 'max-width': width || null, 'max-height': height || null }">
         <slot></slot>
       </div>
     </Transition>

package/components/ProgressBar.vue

@@ -35,7 +35,7 @@ const normalizedValue = computed(() => {
 </script>
 
 <template>
-  <div class="pankow-progress-bar">
+  <div class="pankow-progress-bar" role="progressbar" :aria-valuenow="normalizedValue" aria-valuemin="0" aria-valuemax="100" :aria-label="'Progress: ' + normalizedValue + '%'">
     <div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
     <div :class="{ 'pankow-progress-bar-background': showTrack }">
       <div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }">

package/components/SaveIndicator.vue

@@ -42,7 +42,7 @@ defineExpose({ success: showSuccess, error: showError });
   <div class="pankow-save-indicator-wrapper">
     <slot />
     <Transition name="pankow-save-indicator-bounce">
-      <div class="pankow-save-indicator" v-if="visible" :class="{ success: success, error: !success }"><Icon :icon="success ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/></div>
+      <div class="pankow-save-indicator" role="status" aria-live="polite" v-if="visible" :class="{ success: success, error: !success }"><Icon :icon="success ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/></div>
     </Transition>
   </div>
 </template>

package/components/SideBar.vue

@@ -38,8 +38,8 @@ defineExpose({ open, close });
     </Transition>
     <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
       <Transition name="pankow-scale">
-        <div class="pankow-sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
-        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" @click="open()"><i class="fa-solid fa-bars"></i></div>
+        <div class="pankow-sidebar-close-action" v-if="isVisible" tabindex="0" role="button" aria-label="Close sidebar" @click="close()" @keydown.enter="close()" @keydown.space.prevent="close()"><i class="fa-solid fa-xmark"></i></div>
+        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" tabindex="0" role="button" aria-label="Open sidebar" @click="open()" @keydown.enter="open()" @keydown.space.prevent="open()"><i class="fa-solid fa-bars"></i></div>
       </Transition>
       <div class="pankow-sidebar-inner">
         <slot></slot>

package/components/SingleSelect.vue

@@ -176,7 +176,7 @@ watchEffect(handleDefaultSelect);
 </script>
 
 <template>
-  <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown="onKeyDown($event)">
+  <div class="pankow-singleselect" role="combobox" :aria-expanded="menu?.isOpen ?? false" aria-haspopup="listbox" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
     <select v-model="selectedKey" :id="id" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>

package/components/Spinner.vue

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <div class="pankow-spinner"></div>
+  <div class="pankow-spinner" role="status" aria-label="Loading"></div>
 </template>
 
 <style>

package/components/SplitLayout.vue

@@ -2,6 +2,11 @@
 import { ref, computed, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 const props = defineProps({
+    orientation: {
+        type: String,
+        default: 'horizontal'
+    },
+    // horizontal mode props
     leftWidth: {
         type: Number,
         default: 50
@@ -13,40 +18,88 @@ const props = defineProps({
     minRightWidth: {
         type: Number,
         default: 20
+    },
+    // vertical mode props
+    topHeight: {
+        type: Number,
+        default: 50
+    },
+    minTopHeight: {
+        type: Number,
+        default: 20
+    },
+    minBottomHeight: {
+        type: Number,
+        default: 20
+    },
+    opaque: {
+        type: Boolean,
+        default: false
     }
 });
 
-const emit = defineEmits(['update:leftWidth']);
+const emit = defineEmits(['update:leftWidth', 'update:topHeight']);
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
 
 const containerRef = useTemplateRef('container');
 const isDragging = ref(false);
-const dragStartX = ref(0);
-const dragStartWidth = ref(0);
-const currentLeftWidth = ref(props.leftWidth);
+const dragStartCoord = ref(0);
+const dragStartSize = ref(0);
+
+const currentFirstSize = ref(
+    isHorizontal.value ? props.leftWidth : props.topHeight
+);
 
 watch(() => props.leftWidth, (val) => {
+    if (!isDragging.value && isHorizontal.value) {
+        currentFirstSize.value = val;
+    }
+});
+
+watch(() => props.topHeight, (val) => {
+    if (!isDragging.value && !isHorizontal.value) {
+        currentFirstSize.value = val;
+    }
+});
+
+watch(() => props.orientation, () => {
     if (!isDragging.value) {
-        currentLeftWidth.value = val;
+        currentFirstSize.value = isHorizontal.value ? props.leftWidth : props.topHeight;
     }
 });
 
+const minFirst = computed(() =>
+    isHorizontal.value ? props.minLeftWidth : props.minTopHeight
+);
+
+const minSecond = computed(() =>
+    isHorizontal.value ? props.minRightWidth : props.minBottomHeight
+);
+
 function startDrag(e) {
     isDragging.value = true;
-    dragStartX.value = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
-    dragStartWidth.value = currentLeftWidth.value;
-    document.body.style.cursor = 'col-resize';
+    dragStartCoord.value = isHorizontal.value
+        ? (e.clientX ?? e.touches?.[0]?.clientX ?? 0)
+        : (e.clientY ?? e.touches?.[0]?.clientY ?? 0);
+    dragStartSize.value = currentFirstSize.value;
+    document.body.style.cursor = isHorizontal.value ? 'col-resize' : 'row-resize';
     document.body.style.userSelect = 'none';
     e.preventDefault();
 }
 
 function onDrag(e) {
     if (!isDragging.value || !containerRef.value) return;
-    const clientX = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
-    const containerWidth = containerRef.value.getBoundingClientRect().width;
-    if (containerWidth === 0) return;
-    const delta = ((clientX - dragStartX.value) / containerWidth) * 100;
-    const newWidth = dragStartWidth.value + delta;
-    currentLeftWidth.value = Math.max(props.minLeftWidth, Math.min(100 - props.minRightWidth, newWidth));
+    const coord = isHorizontal.value
+        ? (e.clientX ?? e.touches?.[0]?.clientX ?? 0)
+        : (e.clientY ?? e.touches?.[0]?.clientY ?? 0);
+    const containerSize = isHorizontal.value
+        ? containerRef.value.getBoundingClientRect().width
+        : containerRef.value.getBoundingClientRect().height;
+    if (containerSize === 0) return;
+    const delta = ((coord - dragStartCoord.value) / containerSize) * 100;
+    const newSize = dragStartSize.value + delta;
+    currentFirstSize.value = Math.max(minFirst.value, Math.min(100 - minSecond.value, newSize));
 }
 
 function stopDrag() {
@@ -54,7 +107,11 @@ function stopDrag() {
     isDragging.value = false;
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
-    emit('update:leftWidth', Math.round(currentLeftWidth.value));
+    if (isHorizontal.value) {
+        emit('update:leftWidth', Math.round(currentFirstSize.value));
+    } else {
+        emit('update:topHeight', Math.round(currentFirstSize.value));
+    }
 }
 
 onMounted(() => {
@@ -71,21 +128,35 @@ onUnmounted(() => {
     document.removeEventListener('touchend', stopDrag);
 });
 
-const leftStyle = computed(() => ({
-    flex: `0 0 ${currentLeftWidth.value}%`,
-    maxWidth: `${currentLeftWidth.value}%`
-}));
+const firstStyle = computed(() => {
+    const size = currentFirstSize.value;
+    return isHorizontal.value
+        ? { flex: `0 0 ${size}%`, maxWidth: `${size}%` }
+        : { flex: `0 0 ${size}%`, maxHeight: `${size}%` };
+});
 </script>
 
 <template>
-    <div ref="container" class="pankow-split-layout" :class="{ 'pankow-split-layout-dragging': isDragging }">
-        <div class="pankow-split-layout-left" :style="leftStyle">
+    <div
+        ref="container"
+        class="pankow-split-layout"
+        :class="{
+            'pankow-split-layout-dragging': isDragging,
+            'pankow-split-layout-vertical': !isHorizontal,
+            'pankow-split-layout-divider-opaque': opaque
+        }"
+    >
+        <div class="pankow-split-layout-first" :style="firstStyle">
             <slot name="left" />
         </div>
-        <div class="pankow-split-layout-divider" @mousedown="startDrag" @touchstart.prevent="startDrag">
+        <div
+            class="pankow-split-layout-divider"
+            @mousedown="startDrag"
+            @touchstart.prevent="startDrag"
+        >
             <div class="pankow-split-layout-handle"><span></span><span></span></div>
         </div>
-        <div class="pankow-split-layout-right">
+        <div class="pankow-split-layout-second">
             <slot name="right" />
         </div>
     </div>
@@ -100,15 +171,22 @@ const leftStyle = computed(() => ({
     overflow: hidden;
 }
 
-.pankow-split-layout-left {
-    height: 100%;
+.pankow-split-layout-vertical {
+    flex-direction: column;
+}
+
+.pankow-split-layout-first {
     min-width: 0;
     overflow: hidden;
 }
 
+.pankow-split-layout-vertical .pankow-split-layout-first {
+    height: auto;
+    min-height: 0;
+    min-width: 0;
+}
+
 .pankow-split-layout-divider {
-    width: 6px;
-    cursor: col-resize;
     background: transparent;
     position: relative;
     flex-shrink: 0;
@@ -117,6 +195,20 @@ const leftStyle = computed(() => ({
     justify-content: center;
 }
 
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-divider {
+    width: 6px;
+    cursor: col-resize;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-divider {
+    height: 6px;
+    cursor: row-resize;
+}
+
+.pankow-split-layout-divider-opaque .pankow-split-layout-divider {
+    background: var(--pankow-color-background);
+}
+
 .pankow-split-layout-divider:hover,
 .pankow-split-layout-dragging .pankow-split-layout-divider {
     background: var(--pankow-input-border-color);
@@ -128,13 +220,20 @@ const leftStyle = computed(() => ({
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
-    flex-direction: column;
     gap: 2px;
     opacity: 0;
     transition: opacity 0.15s;
     pointer-events: none;
 }
 
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle {
+    flex-direction: column;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-handle {
+    flex-direction: row;
+}
+
 .pankow-split-layout-divider:hover .pankow-split-layout-handle,
 .pankow-split-layout-dragging .pankow-split-layout-handle {
     opacity: 0.5;
@@ -142,21 +241,34 @@ const leftStyle = computed(() => ({
 
 .pankow-split-layout-handle span {
     display: block;
-    width: 2px;
-    height: 16px;
     border-radius: 1px;
     background: var(--pankow-color-text);
 }
 
-.pankow-split-layout-right {
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle span {
+    width: 2px;
+    height: 16px;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-handle span {
+    width: 16px;
+    height: 2px;
+}
+
+.pankow-split-layout-second {
     flex: 1;
-    height: 100%;
     min-width: 0;
     overflow: hidden;
 }
 
-.pankow-split-layout-dragging .pankow-split-layout-left,
-.pankow-split-layout-dragging .pankow-split-layout-right {
+.pankow-split-layout-vertical .pankow-split-layout-second {
+    height: auto;
+    min-height: 0;
+    min-width: 0;
+}
+
+.pankow-split-layout-dragging .pankow-split-layout-first,
+.pankow-split-layout-dragging .pankow-split-layout-second {
     pointer-events: none;
 }
 </style>

package/components/Switch.vue

@@ -22,7 +22,7 @@ function onChange(event) {
 
 <template>
   <label :for="id || internalId" class="pankow-switch" :class="{ 'pankow-switch-disabled': disabled }">
-    <input :id="id || internalId" class="pankow-switch-input" type="checkbox" v-model="model" :disabled="disabled" @change="onChange"/>
+    <input :id="id || internalId" class="pankow-switch-input" type="checkbox" role="switch" :aria-checked="model" v-model="model" :disabled="disabled" @change="onChange"/>
     <span></span>
     <div class="pankow-switch-input-label">
       <slot>{{ label }}</slot>

package/components/TabView.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="pankow-tabview" :top="tabPosition === 'top' ? true : null" :left="tabPosition === 'left' ? true : null" :right="tabPosition === 'right' ? true : null" :bottom="tabPosition === 'bottom' ? true : null">
-    <div class="pankow-tabview-tabs" v-if="tabPosition === 'top' || tabPosition === 'left'">
-      <div class="pankow-tabview-tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)">{{ tabs[tab] }}</div>
+    <div class="pankow-tabview-tabs" role="tablist" :aria-label="tabPosition === 'top' || tabPosition === 'bottom' ? 'Tabs' : 'Tabs'" v-if="tabPosition === 'top' || tabPosition === 'left'">
+      <div class="pankow-tabview-tab" role="tab" :tabindex="active === tab ? 0 : -1" :aria-selected="active === tab ? 'true' : 'false'" :aria-controls="'tabpanel-'+tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)" @keydown="onTabKeydown($event, tab)">{{ tabs[tab] }}</div>
     </div>
     <div class="pankow-tabview-content">
-      <div v-for="tab in Object.keys(tabs)">
+      <div v-for="tab in Object.keys(tabs)" :id="'tabpanel-'+tab" role="tabpanel" :aria-labelledby="tab" tabindex="0">
         <slot :name="tab" v-if="active === tab"/>
       </div>
     </div>
-    <div class="pankow-tabview-tabs" v-if="tabPosition === 'bottom' || tabPosition === 'right'">
-      <div class="pankow-tabview-tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)">{{ tabs[tab] }}</div>
+    <div class="pankow-tabview-tabs" role="tablist" :aria-label="tabPosition === 'top' || tabPosition === 'bottom' ? 'Tabs' : 'Tabs'" v-if="tabPosition === 'bottom' || tabPosition === 'right'">
+      <div class="pankow-tabview-tab" role="tab" :tabindex="active === tab ? 0 : -1" :aria-selected="active === tab ? 'true' : 'false'" :aria-controls="'tabpanel-'+tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)" @keydown="onTabKeydown($event, tab)">{{ tabs[tab] }}</div>
     </div>
   </div>
 </template>
@@ -43,6 +43,42 @@ function open(key) {
   emit('changed', key);
 }
 
+function onTabKeydown(event, currentKey) {
+  const keys = Object.keys(props.tabs);
+  const index = keys.indexOf(currentKey);
+  const isVertical = props.tabPosition === 'left' || props.tabPosition === 'right';
+
+  if (isVertical) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const next = index + 1 >= keys.length ? 0 : index + 1;
+      open(keys[next]);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const prev = index <= 0 ? keys.length - 1 : index - 1;
+      open(keys[prev]);
+    }
+  } else {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const next = index + 1 >= keys.length ? 0 : index + 1;
+      open(keys[next]);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prev = index <= 0 ? keys.length - 1 : index - 1;
+      open(keys[prev]);
+    }
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault();
+    open(keys[0]);
+  } else if (event.key === 'End') {
+    event.preventDefault();
+    open(keys[keys.length - 1]);
+  }
+}
+
 </script>
 
 <style>
@@ -153,4 +189,4 @@ function open(key) {
   margin-right: 10px;
 }
 
-</style>
+</style>

package/components/TableView.vue

@@ -103,7 +103,13 @@ onMounted(() => {
               class="pankow-table-header-column"
               :class="{ 'pankow-table-header-column-sortable': columns[column].sort, 'pankow-table-cell-hide-mobile': columns[column].hideMobile }"
               :style="{ 'text-align': columns[column].align || null, width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }"
+              :aria-sort="sortBy === column ? (sortOrder === SORT_ORDER.ASC ? 'ascending' : 'descending') : 'none'"
+              scope="col"
+              :tabindex="columns[column].sort ? 0 : null"
+              :aria-label="columns[column].sort ? 'Sort by ' + columns[column].label : columns[column].label"
               @click="toggleSort(column)"
+              @keydown.enter="toggleSort(column)"
+              @keydown.space.prevent="toggleSort(column)"
             >
               <Icon v-if="columns[column].icon" :icon="columns[column].icon" />
               {{ columns[column].label }}

package/components/TagInput.vue

@@ -41,7 +41,7 @@ function onRemoveIndex(index) {
 
 <template>
   <div class="pankow-tag-input">
-    <div class="pankow-tag-input-tag" v-for="(tag, index) in model" :key="index">{{ tag }} <i class="fa-solid fa-xmark pankow-tag-input-tag-remove" @click="onRemoveIndex(index)"></i></div>
+      <div class="pankow-tag-input-tag" v-for="(tag, index) in model" :key="index">{{ tag }} <span tabindex="0" role="button" :aria-label="'Remove ' + tag" class="pankow-tag-input-tag-remove" @click="onRemoveIndex(index)" @keydown.enter="onRemoveIndex(index)" @keydown.space.prevent="onRemoveIndex(index)"><i class="fa-solid fa-xmark"></i></span></div>
     <input class="pankow-tag-input-input" :id="id" :placeholder="placeholder" :autofocus="$attrs['autofocus']" @keydown="onKey($event)" @blur="onBlur"/>
   </div>
 </template>

package/components/TextInput.vue

@@ -6,6 +6,7 @@ import { useTemplateRef } from 'vue';
 
 const model = defineModel();
 const props = defineProps({
+  id: String,
   placeholder: String,
   readonly: {
     type: Boolean,
@@ -23,7 +24,7 @@ defineExpose({ focus });
 </script>
 
 <template>
-  <input ref="inputElement" class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
+  <input :id="id" ref="inputElement" class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
 </template>
 
 <style>

package/components/TextInputRaw.vue

@@ -4,6 +4,7 @@
 
 const model = defineModel();
 const props = defineProps({
+  id: String,
   placeholder: String,
   readonly: {
     type: Boolean,
@@ -14,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <input class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model="model"/>
+  <input :id="id" class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model="model"/>
 </template>
 
 <style>

package/components/TreeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tree-view">
+  <div class="tree-view" role="tree">
     <TreeViewNode
       :entry="rootEntry"
       :list-files="listFiles"

package/components/TreeViewNode.vue

@@ -4,7 +4,13 @@
       class="tree-view-node-row"
       :class="{ 'active': isActive, 'drop-target': dropTargetActive }"
       :style="{ paddingLeft: (props.depth * 16 + 4) + 'px' }"
+      tabindex="0"
+      role="treeitem"
+      :aria-expanded="expanded"
+      :aria-selected="isActive"
       @click="onRowClick"
+      @keydown.enter="onRowClick"
+      @keydown.space.prevent="onRowClick"
       @dragover.stop.prevent="onDragOver"
       @dragenter.stop.prevent="onDragEnter"
       @dragleave="onDragLeave"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.0",
+  "version": "4.4.2",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",

package/viewers/GenericViewer.vue

@@ -13,7 +13,7 @@
     <template #body>
       <div class="content">
         <div>
-          <img class="preview-icon" :src="entry.previewUrl" />
+          <img class="preview-icon" :src="entry.previewUrl" :alt="entry.fileName" />
           <h1>{{ entry.fileName }}</h1>
           <Button icon="fa-solid fa-download" :href="entry.downloadFileUrl">Download</Button>
         </div>