[patch] INTENG-22824: fix keyboard access to journeys and remove tabindex=-1 (#1122)

# Pull Request Template

## Description

A customer's automation has found our journeys to not be WCAG compliant
because our iframe that we load the journey into has tabindex = -1.

What they think this is doing is making it so that the user can not tab
into the journey using the keyboard. The real issues are as follows:

Issue 1: CSS in the journey template
at the bottom of the template (this being the template in the dashboard
that the customer has the ability to edit)

```
*:focus {
  outline: none !important;
}
```

what this is doing is making it so that when the journey is tabbed onto,
you dont actually see what is being highlighted. In my own template, I
updated it to


```
*:focus {
  outline: 2px solid blue;
}
```

and now i can see that when tabbing i am actually highlighting onto
various parts of the journey.

 

Issue 2: our handling of keyboard input on the journey

We created special logic to handle tabs in the journey. This function
though is handling all keyboard input. So, since it is handling all
keyboard input, including enter, but without any specific way to handle
enter, then pressing the enter key will not do anything


So, i fix the issue of keyboard input in this PR. I also removed the
tabindex and added some other WCAG tags because they dont change
anything, but will hopefully make the customer happy.

Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration

- [ ] Unit test
- [ ] Integration test

## JS Budget Check

Please mention the size in kb before abd after this PR

| Files            | Before      | After       | 
| -----------      | ----------- | ----------- |
| dist/build.js.   |             |             |
| dist/build.min.js|             |             |

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
- [ ] I have checked my code and corrected any misspellings

## Mentions: 
List the person or team responsible for reviewing proposed changes.

cc @BranchMetrics/saas-sdk-devs for visibility.

Author: bredmond5

src/0_config.js

@@ -9,4 +9,4 @@ config.app_service_endpoint = 'https://app.link';
 config.link_service_endpoint = 'https://bnc.lt';
 config.api_endpoint = DEFAULT_API_ENDPOINT;
 // will get overwritten by gha on actual deploy
-config.version = '2.85.2';
+config.version = '2.86.1';

src/journeys_utils.js

@@ -248,7 +248,8 @@ journeys_utils.createIframe = function() {
 	iframe.scrolling = 'no';
 	iframe.id = 'branch-banner-iframe';
 	iframe.className = 'branch-animation';
-	iframe.setAttribute('tabindex', '-1');
+	iframe.title = 'Branch Banner Frame';
+	iframe.setAttribute('aria-label', 'Branch Banner Frame');
 	utils.addNonceAttribute(iframe);
 
 	return iframe;
@@ -286,36 +287,52 @@ journeys_utils.addHtmlToIframe = function(iframe, html, userAgent) {
 			var focusableContent = modal.querySelectorAll(focusableElements);
 			var focusElementIdx = 0;
 
-			function handleTabKey(e) {
+			function handleKeyboardNavigation(e) {
 				var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
-			
-				if (!isTabPressed) {
-					return;
-				}
-
-				if (e.shifKey) {
-					if (focusElementIdx <= 0) {
-						focusElementIdx = focusableContent.length - 1;
+				var isEnterPressed = e.key === 'Enter' || e.keyCode === 13;
+				
+				// Handle Tab key for focus navigation
+				if (isTabPressed) {
+					if (e.shiftKey) {
+						if (focusElementIdx <= 0) {
+							focusElementIdx = focusableContent.length - 1;
+						} else {
+							focusElementIdx = focusElementIdx - 1;
+						}
 					} else {
-						focusElementIdx = focusElementIdx - 1;
+						if (focusElementIdx >= focusableContent.length - 1) {
+							focusElementIdx = 0;
+						} else {
+							focusElementIdx = focusElementIdx + 1;
+						}
 					}
-				} else {
-					if (focusElementIdx >= focusableContent.length - 1) {
-						focusElementIdx = 0;
-					} else {
-						focusElementIdx = focusElementIdx + 1;
+
+					focusableContent[focusElementIdx].focus();
+					e.preventDefault();
+					return;
+				}
+				
+				// Handle Enter key for activation
+				if (isEnterPressed) {
+					// Get the currently focused element
+					var focusedElement = document.activeElement;
+					if (focusedElement && (
+						focusedElement.tagName === 'BUTTON' || 
+						focusedElement.getAttribute('role') === 'button' ||
+						focusedElement.tagName === 'A'
+					)) {
+						// Simulate a click on the element
+						focusedElement.click();
+						e.preventDefault();
 					}
 				}
-
-				focusableContent[focusElementIdx].focus();
-				e.preventDefault();
 			}
 
 			function autoFocus(delay) {
 				setTimeout(function() { focusableContent[focusElementIdx].focus() }, delay);
 			}
 
-			document.addEventListener('keydown', handleTabKey);
+			document.addEventListener('keydown', handleKeyboardNavigation);
 			autoFocus(100);
 			
 		`;

test/web-config.js

@@ -7,4 +7,4 @@ config.app_service_endpoint = 'https://app.link';
 config.link_service_endpoint = 'https://bnc.lt';
 config.api_endpoint = 'https://api.branch.io';
 // will get overwritten by gha on actual deploy
-config.version = '2.85.2';
+config.version = '2.86.1';