aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorzeroinformatique2020-10-18 00:22:04 +0200
committerGitHub2020-10-18 00:22:04 +0200
commit5e179a35b23282c4613582755de06a91f6991309 (patch)
tree0d532e8e277d3d9708016b01e17e55632a74612c /viewer
parentb27e11e96fab44bb78da21a1937a60661856e73a (diff)
downloadldgallery-5e179a35b23282c4613582755de06a91f6991309.tar.gz
viewer: accessibility: set focus on the main area (#273)
github: resolves #177
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/views/MainLayout.vue20
1 files changed, 16 insertions, 4 deletions
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 6ef9a3b..9cd518b 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -22,7 +22,7 @@
22 <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" /> 22 <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
23 <panel-top v-if="isReady" class="layout layout-top" /> 23 <panel-top v-if="isReady" class="layout layout-top" />
24 <panel-left v-if="isReady" class="layout layout-left" /> 24 <panel-left v-if="isReady" class="layout layout-left" />
25 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" /> 25 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" tabindex="01" />
26 <b-loading :active="isLoading" is-full-page /> 26 <b-loading :active="isLoading" is-full-page />
27 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" /> 27 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
28 </div> 28 </div>
@@ -43,6 +43,10 @@ export default class MainLayout extends Vue {
43 isLoading: boolean = true; 43 isLoading: boolean = true;
44 scrollPositions: ScrollPosition = {}; 44 scrollPositions: ScrollPosition = {};
45 45
46 get contentDiv() {
47 return this.content.$el as HTMLDivElement;
48 }
49
46 mounted() { 50 mounted() {
47 history.replaceState({ ldgallery: "ENTRYPOINT" }, ""); 51 history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
48 this.fetchGalleryItems(); 52 this.fetchGalleryItems();
@@ -53,11 +57,15 @@ export default class MainLayout extends Vue {
53 document.body.removeEventListener("fullscreenchange", this.onFullscreenChange); 57 document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
54 } 58 }
55 59
60 moveFocusToContentDiv() {
61 setTimeout(() => this.contentDiv.focus());
62 }
63
56 @Watch("$route") 64 @Watch("$route")
57 routeChanged(newRoute: Route, oldRoute: Route) { 65 routeChanged(newRoute: Route, oldRoute: Route) {
58 const el = this.content.$el; 66 this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop;
59 this.scrollPositions[oldRoute.path] = el.scrollTop; 67 this.$nextTick(() => (this.contentDiv.scrollTop = this.scrollPositions[newRoute.path]));
60 this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path])); 68 this.moveFocusToContentDiv();
61 } 69 }
62 70
63 fetchGalleryItems() { 71 fetchGalleryItems() {
@@ -66,6 +74,7 @@ export default class MainLayout extends Vue {
66 .fetchConfig() 74 .fetchConfig()
67 .then(this.$uiStore.initFromConfig) 75 .then(this.$uiStore.initFromConfig)
68 .then(this.$galleryStore.fetchGalleryItems) 76 .then(this.$galleryStore.fetchGalleryItems)
77 .then(this.moveFocusToContentDiv)
69 .finally(() => (this.isLoading = false)) 78 .finally(() => (this.isLoading = false))
70 .catch(this.displayError); 79 .catch(this.displayError);
71 } 80 }
@@ -130,6 +139,9 @@ html {
130 left: var(--layout-left); 139 left: var(--layout-left);
131 z-index: 3; 140 z-index: 3;
132 overflow-x: hidden; 141 overflow-x: hidden;
142 &:focus {
143 outline: none;
144 }
133 } 145 }
134} 146}
135.fullscreen { 147.fullscreen {