Forum Discussion

DeveloperIgniti's avatar
DeveloperIgniti
Community Member
1 day ago

Groups can't have Hidden states; grouped items which start Hidden are visible to Accessibility tools

Hi,

Steps to reproduce:

  1. Create a button using grouped objects such as a text label and icon.
  2. Add a logic trigger to that Group (not the objects in the group) such as "Jump to next slide on click".
  3. Set the default state on the objects in the Group to Hidden (this must be done on the objects because Groups can't have states).
  4. Preview the page.
  5. Using the Tab key, the button can be brought into focus despite all objects in the group starting as hidden.

How do we prevent Tab key access to the group?

Many thanks in advance.

storyline 360

3 Replies

  • Nedim's avatar
    Nedim
    Community Member
    12 hours ago

    As long as a Group object has any event attached to it, it will be accessible using the Tab key. It doesn't matter whether the trigger is enabled or disabled, which is rather odd. In fact, the Group shouldn't have any trigger attached to it at all to prevent Tab key access to the group.

    If I want to hide the Group, I use an Execute JavaScript trigger to add the hidden class to it, and then remove the class when I want to show it again. This is the same approach Storyline uses for any object that is set to the Hidden state.

    // Hide the group
const group1 = document.querySelector('[data-model-id="6hJ8RTBQg2v"]');
group1.classList.add('hidden');
    // Show the group
const group1 = document.querySelector('[data-model-id="6hJ8RTBQg2v"]');
group1.classList.remove('hidden');

    However, it's very odd that even after the Group is hidden, it is still accessible using the Tab key. I don't think this is the most logical behavior, because an individual object that is in the Hidden state is no longer accessible via the Tab key, even if it has events or triggers attached to it.

    My suggestion would be to avoid using Group objects as interactive event targets if the grouped content is intended to be dynamically hidden or shown during runtime. 

  • JudyNollet's avatar
    JudyNollet
    Super Hero
    1 day ago

    The only way I know to avoid that problem is to avoid using a Group. 

    For example, you could insert a text box with extra space. Go into the Edit States mode, and insert the icon directly into the text box's Normal state. If desired, add additional states. 

    Because that's one object, it won't be available for tab access when it's Hidden. 

    Here's more info: 

    TIP: Making icons easier to program and easier to click | E-Learning Heroes