Fix/layer options tabbing

packages/plugins/LayerChooser/CHANGELOG.md

@@ -5,6 +5,7 @@
 - Feature: Change configuration of `layer.type` to be set to `background` or any other String. All layers that have their `type` not set to `background` are considered "overlays". For the type `mask` locales are already implemented. For any additional type, these have to be added separately.
 - Feature: Add new exported type `DisabledLayers` describing an object structure mapping layerIds to whether the respective layer is disabled or not.
 - Fix: Layer options layer names are now translated if they're locale keys.
+- Fix: Resolve an issue of loosing visible focus when using the keyboard to open or close the layer options menu.
 
 ## 2.1.0
 

packages/plugins/LayerChooser/src/components/LayerWrapper.vue

@@ -4,12 +4,13 @@
       <div class="polar-layer-chooser-option-line" v-on="disabled && on">
         <slot></slot>
         <v-btn
+          :id="`polar-layer-chooser-options-${layerId}-button`"
           class="ml-1"
           :class="!hasOptions && 'polar-layer-chooser-option-invisible'"
           :aria-label="$t('plugins.layerChooser.layerOptions')"
           icon
           small
-          @click="setOpenedOptions(layerId)"
+          @click="updateOpenedOptions(layerId)"
         >
           <v-icon small>{{ icon }}</v-icon>
         </v-btn>
@@ -55,6 +56,14 @@ export default Vue.extend({
   },
   methods: {
     ...mapMutations('plugin/layerChooser', ['setOpenedOptions']),
+    updateOpenedOptions(layerId: string) {
+      this.setOpenedOptions(layerId)
+      this.$nextTick(() =>
+        (document.querySelector('[data-app]') as ShadowRoot)
+          .getElementById('polar-layer-chooser-options-back-button')
+          ?.focus()
+      )
+    },
   },
 })
 </script>

packages/plugins/LayerChooser/src/components/Options.vue

@@ -2,10 +2,11 @@
   <v-card class="layer-chooser-options">
     <v-card-actions>
       <v-btn
+        id="polar-layer-chooser-options-back-button"
         icon
         small
         :aria-label="$t('plugins.layerChooser.returnToLayers')"
-        @click="setOpenedOptions(null)"
+        @click="closeOptions"
       >
         <v-icon small>fa-chevron-left</v-icon>
       </v-btn>
@@ -56,11 +57,11 @@ import { mapGetters, mapMutations, mapActions } from 'vuex'
 export default Vue.extend({
   name: 'LayerChooserOptions',
   computed: {
-    ...mapGetters(['clientWidth']),
     ...mapGetters('plugin/layerChooser', [
+      'activeLayerIds',
+      'openedOptions',
       'openedOptionsService',
       'openedOptionsServiceLayers',
-      'activeLayerIds',
     ]),
     activeLayers: {
       get() {
@@ -74,6 +75,19 @@ export default Vue.extend({
   methods: {
     ...mapMutations('plugin/layerChooser', ['setOpenedOptions']),
     ...mapActions('plugin/layerChooser', ['toggleOpenedOptionsServiceLayer']),
+    closeOptions() {
+      const previousOptions = this.openedOptions
+      this.setOpenedOptions(null)
+      this.$nextTick(() => {
+        const button = (
+          document.querySelector('[data-app]') as ShadowRoot
+        ).getElementById(
+          `polar-layer-chooser-options-${previousOptions}-button`
+        )
+        // Sadly needed as the button is not focused otherwise.
+        setTimeout(() => button?.focus(), 0)
+      })
+    },
   },
 })
 </script>