Hi
Im making an interactive project showing different fruits and vegetables.
Everything works fine but I have one problem.
I need to be able to jump between the fruits with the tab index.
And that also works fine 
But I don’t want the blue frame to appear if I click it with the mouse pointer only if I use the keys.
Is this possible?
Thanks
Rickard
I
My first instinct was no, but I did a quick search and found a basic solution within this post:
The basic premise is that if the user ever hits tab, then it will start showing a focus ring from that point on.
I wanted to test within Hype and verify it would work, so I came up with this solution:
Step 1: for any element you do not want the focus ring to show up on, give a class name in the Identity inspector of autofocus
Step 2: Add this code to your Head HTML via the Document Inspector:
<style id="focusrule">
.autofocus {
outline: none !important;
}
</style>
<script>
function handleFirstTab(e) {
if (e.keyCode === 9) { // tab
// remove the focus rule
var styleElement = document.getElementById("focusrule");
styleElement.parentNode.removeChild(styleElement);
}
}
window.addEventListener('keydown', handleFirstTab);
</script>
Of course as that post mentions, it might be a bad idea to do this for accessibility reasons. I also haven’t tested with voiceover to see if it makes any difference there.
Hi
Thanks for the answer. I searched for hours and could not find anything describing the problem in such a good way (and funny).
I tried your solution, thank you for making it easy to grasp for a none programmer.
But the problem still remains?
When I have pressed the tab button and then click with the mouse again the blue frame appears every where. So it does not reset when I click with the mouse.
What I tried before was just putting this code / document.getElementById(“13apple”).tabIndex = 0;/
Under SCENE/Key pressed.
It gave the same result. That there is no blue border until I hit a key, but I can’t figure out how to turn it of again.
Or am I missing something?
Rickard
Testscen.zip (15.0 KB)
Working with @jonathan 's suggestion.
This does seem to work.
We give the elements you want to have a focus rule on a class name of: focusrule
In the head:
We add a listener for key down/tab
The callback will get all elements with the class focusrule and add the class user-is-tabbing:focus
The style will stop the outline ring showing for those elements.
<style id="focusrule">
.user-is-tabbing:focus {
outline: none!important;
}
</style>
<script>
function handleFirstTab(e) {
var focusrules_ = document.querySelectorAll('.focusrule')
var i;
if (e.keyCode === 9) { // tab
// add the focus rule
for (i = 0; i < focusrules_.length; i++) {
focusrules_[i].classList.add('user-is-tabbing');
}
}
}
// JUST TO SHOW ITS WORKING
document.addEventListener('focusin', function() {
document.getElementById('felem').innerHTML =document.activeElement.id
}, true);
window.addEventListener('keydown', handleFirstTab);
</script>
If the user clicks on one of the elements that element will run the hype function removeNoFocusClassForMouse which will remove the class for that element user-is-tabbing:focus and therefor allowing the focus ring on that element.
element.classList.remove('user-is-tabbing');
Testscen.hype.zip (24.8 KB)
I have added in the example project a text box and a little bit of code to show which element is active/focused. ( element id)
Hi Mark
Thanks a lot for the help.
It works as you describes it, but I want it to work the other way around
When you tab, everything should get the blue box but when you click the mouse nothing should get the blue box.
I changed the code (probably very ugly) so that the objects get a blue box when you tab but not when you click. And i removed the hype function on the object level and put it in the Head HTML because I want all the objects to react the same way.
Thanks again
Rickard
Testscen 3.zip (26.1 KB)
no prob. misread but glad it helped.