Scenario Branching and Focus

tmichael9734
tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
Hello!
I've a list page that has 4 buttons (attached). Each button navigates to several pages, then the user returns back to the main list page. Visually the list and branched pages run well, but when users return to the list page, the focus goes to the very beginning of the page. So the AT users has to hear the same elements every time they come back to the list page. 508 testers request that the focus would go to the next unselected button directly when the user returns back to list page. I wonder if there's any resolution for this issue through Java Script. I'm not an expert in Java Script and would appreciate any advice.
Thank you.

Comments

  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    That is actually a 508 requirement, which makes me think that ELB must have a way to support it. I don't see one, however.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Thank you Carl. Yeah, I agree with you and hopefully I can find a solution for this issue because it is a "show stopper" for all our trainings.
  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    @tmichael9734 , you can certainly do it in JavaScript, but I have never mastered JS in Lectora and can't give specific advice ... and you shouldn't have to, it should be built in.

    You might consider reposting in the Web Accessibility area (https://rockstars.elearningbrothers.com/categories/screen-readers).
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Thanks again Carl. It's a great idea to repost it to Web Accessibility page and hopefully someone will be able to help. I cannot get the training passed the 508 testing until this issue is fixed.
  • trog
    trog Community Member Posts: 25 ♪ Opening Act ♪
    Just thinking out loud here but could you use a variable and run a JS action.

    Something like:

    Action On Show: Run JS
    triv$('#button1392btn', getDisplayDocument()).focus()
    Condition: If variable equals X

    where '#button1392btn' is the ID of your button you want the browser to focus on when it returns.

    On the last page before the learner returns to the Main list page, set that variable to X.

    Have multiple actions based on the variable number set in each section.

    Hope that helps

    Cheers
    Trev
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    edited November 22
    I have attached an example which shows a few different ways to set focus. It can be imported to Lectora Desktop or Online.

    On Show actions are used to set known names for the buttons, this helps make the solution portable to other projects where object id's may change.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    @trog Thank you, I tried your method but it didn't work, but many thanks thoug
    @wheels Will it be possible to put down the steps here? I cannot open zip files.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    @wheels I'm sorry, hit Post prematurely... Thank you for help and time
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    If you can download the zip file and rename it to SetFocusProject.pkg then you can import the Lectora Online PKG format directly into Lectora on the file tab.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    @wheels thanks a lot for the help. I'm getting these messages after following the steps:



    What's wrong?
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    Interesting what version of Lectora are you using?
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Thank you. I use Lectora desktop L21.
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    It sounds like you are missing the action that sets mybutton1 in JavaScript. I'm attaching a screenshot of what the Project Explorer should look like. It should work when you go into run mode, is that what you are trying? It's a pretty simple project so I'm not sure what could have happened.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    @wheels Thank you. You're right, the one you sent me doesn't have the very top action in Pag1 (OnTimedSetFocus). What does that action do? I can add it and test it. It actually runs right only when I publish it, but not in any other mode. Here's my screenshot
    Thanks a lot,
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    @tmichael9734 I have updated the file attachment with a new one, please give that a try.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    @wheels, thank you so much for your time and effort to help me, I really appreciate it so much.

    I tried to plug in your JS into my project, but I still have no luck.

    Here's the way I changed the button name using your script:
    getDisplayWindow().mybutton1 = triv$('button18142'.div)[0];

    Is that correct? I think this replacement is wrong and that may be causing the error.
    Many thanks again!
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    We are working on an action to set the focus, sorry you have to use JavaScript for this.

    That should remain getDisplayWindow().mybutton1 = triv$(%HTMLNAME%.div)[0]; the %HTMLNAME% is resolved when this is published. That way you don't have to fuss with object names.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Ahh! Thank you @wheels! I did change the script as per advice, but here's the focus route:

    1- I select Button 1, go to the branched page and return to list page;
    2- the focus goes first to Skip Nav (that's fine) then, after I hit Enter;
    3- it goes to Button 1 (again), and then Button 2

    When the focus returns to the list page after visiting the branched page, I'm trying to force the focus to go to Button 2, after Skip Nav.

    Even when I excluded Skip Nav, still the focus navigates to the header elements after returning to list page. It doesn't focus on Button 2.

    I tried both methods.

    Many many thanks again,
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    That is most definitely the most difficult part, coordinating when and where to set the focus.

    Set up a known name in JavaScript for each of the buttons
    1. Add an action on Button 1 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton1 = triv$('button',%HTMLNAME%.div)[0];
    2. Add an action on Button 2 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton2 = triv$('button',%HTMLNAME%.div)[0];
    3. Add an action on Button 3 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton3 = triv$('button',%HTMLNAME%.div)[0];
    Set a value into a variable to indicate where the focus should go on return to the page.
    1. Create a Lectora Variable named SetFocusTo with initial value of 0.
    2. Add an action to Button 1 On Click -> Modify Variable -> SetFocusTo set it to 2
    3. Make sure that action on Button 1 is before the On Click navigate to branched page
    (repeat this for other buttons)

    To set the focus when returning to the button page:
    1. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton1.focus(); [condition SetFocusTo is equal to 1] [Delay 1 second]
    2. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton2.focus(); [condition SetFocusTo is equal to 2] [Delay 1 second]
    3. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton3.focus(); [condition SetFocusTo is equal to 3] [Delay 1 second]
    4. Add an action to the button page On Show -> Modify Variable -> SetFocusTo set it to 0
    High level that will set the focus based on the value of the SetFocusTo variable when you return to the button page. Hopefully this will give you enough pieces to build your accessible page.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Yeah, I'm sorry @Wheels for the difficult part, that's why I resorted to the pros :)
    When I pasted your scripts as instructed, I'm getting a syntax error (see image), did I miss anything? I actually copied and pasted the script from this post.
    Millions of thanks again and again!
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    It actually gives the same error with the button page scripts. I still pasted them on the button page and when I tried to preview it in browser or preview mode, it rendered a blank page.
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    edited November 22
    Hi @tmichael9734 I think the syntax error is from the button page scripts. The part in [brackets] is not part of the JavaScript, it just is an indicator to put a Lectora Action Condition so that the action to focus an element will only happen when the SetFocusTo Lectora Variable is equal to 1.

    Maybe you can post your project here. Go to File -> Export -> Export as Zip and then upload it here.
  • tmichael9734
    tmichael9734 Community Member Posts: 135 ♪ Opening Act ♪
    Thank you @wheels. Can you just give me on example of how to add the condition to the JS? I don't think our system will allow me to share a zip file.
  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    @wheels , may I suggest you create an example project that uses your code, and let @tmichael9734 copy the working setup in that AWT file?
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 598 eLearning ROCKSTAR Admin Team
    Thanks @carlfink give this a try @tmichael9734 (see attached Lectora project)