Merge pull request #299 from Smithsonian/accessibility-fix

Bug fix for unintentional auto focusing of annotations

source/client/components/CVViewer.ts

@@ -46,6 +46,7 @@ export default class CVViewer extends Component
     protected static readonly ins = {
         annotationsVisible: types.Boolean("Annotations.Visible"),
         annotationExit: types.Event("Annotations.Exit"),
+        annotationFocus: types.Boolean("Annotations.Focus", false),
         activeAnnotation: types.String("Annotations.ActiveId"),
         activeTags: types.String("Tags.Active"),
         sortedTags: types.String("Tags.Sorted"),
@@ -176,9 +177,10 @@ export default class CVViewer extends Component
             this.getGraphComponents(CVAnnotationView).forEach(view => view.ins.visible.setValue(visible));
 
             const setup = this.getGraphComponent(CVSetup);
-            if(setup) {
+            if(setup && ins.annotationFocus.value) {
                 const tourIns = setup.tours.ins;
                 this._needsAnnoFocus = ins.annotationsVisible.value && !tourIns.enabled.value;
+                ins.annotationFocus.setValue(false);
             }
         }
         if (ins.activeTags.changed) {
@@ -202,7 +204,7 @@ export default class CVViewer extends Component
     tock() {
         if(this._needsAnnoFocus) {
             let elem = null;
-            if(this.ins.sortedTags.value.length > 0) { // handle annotation tag groups
+            if(this.outs.tagCloud.value.length > 0) { // handle annotation tag groups
                 const tagElement = this.rootElement.shadowRoot.querySelector('.sv-tag-buttons');
                 elem = tagElement.getElementsByClassName("ff-button")[0] as HTMLElement;
             }
@@ -363,15 +365,17 @@ export default class CVViewer extends Component
     }
 
     protected focusTags() {
+        const ins = this.ins;
         const setup = this.getGraphComponent(CVSetup);
         if(setup && setup.tours.ins.enabled.value) {
             return;
         }
 
         const overlayElement = this.rootElement.shadowRoot.querySelector('ff-viewport-overlay') as HTMLElement;
         const elems = getFocusableElements(overlayElement) as HTMLElement[];
-        if(elems.length > 0) {
+        if(ins.annotationFocus.value && elems.length > 0) {
             elems[0].focus();
+            ins.annotationFocus.setValue(false);
         }
     }
 }

source/client/ui/SceneView.ts

@@ -238,7 +238,7 @@ export default class SceneView extends SystemView
         const viewer = this.system.getComponent(CVSetup).viewer;
         if (e.code === "Escape") {
             e.preventDefault();
-            if(viewer.ins.sortedTags.value.length > 0) {
+            if(viewer.outs.tagCloud.value.length > 0) {
                 const tagElement = viewer.rootElement.shadowRoot.querySelector('.sv-tag-buttons');
                 const elem = tagElement.getElementsByClassName("ff-button")[0] as HTMLElement;
                 if(elem) {

source/client/ui/explorer/MainMenu.ts

@@ -204,6 +204,7 @@ export default class MainMenu extends DocumentView
         }
 
         viewerIns.annotationsVisible.setValue(!viewerIns.annotationsVisible.value);
+        viewerIns.annotationFocus.setValue(true);
         this.analytics.sendProperty("Annotations_Visible", viewerIns.annotationsVisible.value);
     }
 

source/client/ui/explorer/TagCloud.ts

@@ -89,6 +89,7 @@ export default class TagCloud extends DocumentView
             }
         }
 
+        this.viewer.ins.annotationFocus.setValue(true);
         this.viewer.ins.activeTags.setValue(activeTags.join(", "));
     }