@core @javascript
Feature: Navigate action menu subpanels
  In order to navigate an action menu subpanel
  As a user
  I need to be able to use both keyboard and mouse to open the subpanel

  Background:
    Given I log in as "admin"
    And I am on fixture page "/lib/tests/behat/fixtures/action_menu_subpanel_output_testpage.php"

  Scenario: Navigate several action menus subpanels with mouse
    Given I click on "Actions menu" "button" in the "regularscenario" "region"
    And I click on "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I should see "Status A" in the "regularscenario" "region"
    And I should see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    When I click on "Another subpanel" "menuitem" in the "regularscenario" "region"
    Then I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should see "Status C" in the "regularscenario" "region"
    And I should see "Status D" in the "regularscenario" "region"
    And I click on "Status D" "link" in the "regularscenario" "region"
    And I should see "Foo param value: Donkey" in the "paramcheck" "region"

  Scenario: Check extra data in subpanel action menu items
    When I should see "Adding data attributes to menu item" in the "dataattributes" "region"
    # the page have a javascript script to check that for us.
    Then "[data-extra='some other value']" "css_element" should exist in the "dataattributes" "region"
    And "[data-extra='some other value']" "css_element" should exist in the "dataattributes" "region"
    And I should see "Extra data attribute detected: some extra value" in the "datachecks" "region"
    And I should see "Extra data attribute detected: some other value" in the "datachecks" "region"

  Scenario: User can navigate left menus subpanels
    Given I click on "Actions menu" "button" in the "menuleft" "region"
    And I click on "Subpanel example" "menuitem" in the "menuleft" "region"
    And I should see "Status A" in the "menuleft" "region"
    And I should see "Status B" in the "menuleft" "region"
    And I should not see "Status C" in the "menuleft" "region"
    And I should not see "Status D" in the "menuleft" "region"
    When I click on "Another subpanel" "menuitem" in the "menuleft" "region"
    Then I should not see "Status A" in the "menuleft" "region"
    And I should not see "Status B" in the "menuleft" "region"
    And I should see "Status C" in the "menuleft" "region"
    And I should see "Status D" in the "menuleft" "region"
    And I click on "Status D" "link" in the "menuleft" "region"
    And I should see "Foo param value: Donkey" in the "paramcheck" "region"

  Scenario: User can show the subpanels content using keyboard
    Given I click on "Actions menu" "button" in the "regularscenario" "region"
    # Move to the first subpanel element.
    And I press the down key
    And I press the down key
    And I press the down key
    And I should see "Status A" in the "regularscenario" "region"
    And I should see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    # Move to the next subpanel.
    When I press the down key
    Then I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should see "Status C" in the "regularscenario" "region"
    And I should see "Status D" in the "regularscenario" "region"

  Scenario: User can browse the subpanel content using the arrow keys
    Given I click on "Actions menu" "button" in the "regularscenario" "region"
    # Move to the first subpanel element.
    And I press the down key
    And I press the down key
    And I press the down key
    # Move in the subpanel with arrow keys and loop the links with up and down.
    When I press the right key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Status B" "link" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I press the up key
    And the focused element is "Status B" "link" in the "regularscenario" "region"
    # Leave the subpanel with right and left key.
    Then I press the right key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I press the right key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I press the left key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I press the left key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I press the left key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    # Move to the next subpanel with enter.
    And I press the down key
    And I press the right key
    And the focused element is "Status C" "link" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Status D" "link" in the "regularscenario" "region"
    # Select the current link of the panel with enter.
    And I press the enter key
    And I should see "Foo param value: Donkey" in the "paramcheck" "region"

  Scenario: User can open and close subpanels in mobile
    Given I change the viewport size to "mobile"
    And I click on "Actions menu" "button" in the "regularscenario" "region"
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    When I click on "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I should see "Status A" in the "regularscenario" "region"
    And I should see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    # In mobile click the menu item toggles the subpanel.
    Then I click on "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    And I click on "Another subpanel" "menuitem" in the "regularscenario" "region"
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should see "Status C" in the "regularscenario" "region"
    And I should see "Status D" in the "regularscenario" "region"
    And I click on "Status D" "link" in the "regularscenario" "region"
    And I should see "Foo param value: Donkey" in the "paramcheck" "region"

  Scenario: User can browse the subpanels using keys in extra small windows
    Given I change the viewport size to "mobile"
    And I click on "Actions menu" "button" in the "regularscenario" "region"
    # Go to the seconds subpanel and open it with enter.
    And I press the down key
    And I press the down key
    And I press the down key
    And I press the down key
    And the focused element is "Another subpanel" "menuitem" in the "regularscenario" "region"
    And I press the enter key
    When I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should see "Status C" in the "regularscenario" "region"
    And I should see "Status D" in the "regularscenario" "region"
    And the focused element is "Status C" "link" in the "regularscenario" "region"
    # Loop the subpanel links wand the menu item with up and down.
    Then I press the down key
    And the focused element is "Status D" "link" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Another subpanel" "menuitem" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Status C" "link" in the "regularscenario" "region"
    And I press the down key
    And the focused element is "Status D" "link" in the "regularscenario" "region"
    And I press the up key
    And the focused element is "Status C" "link" in the "regularscenario" "region"
    And I press the up key
    And the focused element is "Another subpanel" "menuitem" in the "regularscenario" "region"
    # Use up in the item to close the panel.
    And I press the up key
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I should not see "Status C" in the "regularscenario" "region"
    And I should not see "Status D" in the "regularscenario" "region"
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    # Enter the panel and select the second link.
    And I press the enter key
    And I press the down key
    And the focused element is "Status B" "link" in the "regularscenario" "region"
    And I press the enter key
    And I should see "Foo param value: Beetle" in the "paramcheck" "region"

  Scenario: action menu subpanels can display optional icons in the menu item
    Given I click on "Actions menu" "button" in the "regularscenario" "region"
    And "Locked icon" "icon" should not exist in the "regularscenario" "region"
    And "Message icon" "icon" should not exist in the "regularscenario" "region"
    And I click on "Actions menu" "button" in the "menuleft" "region"
    And "Locked icon" "icon" should not exist in the "menuleft" "region"
    And "Message icon" "icon" should not exist in the "menuleft" "region"
    When I click on "Actions menu" "button" in the "itemicon" "region"
    Then "Locked icon" "icon" should exist in the "itemicon" "region"
    And "Message icon" "icon" should exist in the "itemicon" "region"
    And I click on "Actions menu" "button" in the "itemiconleft" "region"
    And "Locked icon" "icon" should exist in the "itemiconleft" "region"
    And "Message icon" "icon" should exist in the "itemiconleft" "region"

  @accessibility
  Scenario: User can browse the subpanels using keys in a drawer action menu
    Given I click on "Actions menu" "button" in the "drawersimulation" "region"
    # Go to the seconds subpanel and open it with enter.
    And I press the down key
    And I press the down key
    And I press the down key
    And I press the down key
    And the focused element is "Another subpanel" "menuitem" in the "drawersimulation" "region"
    And I press the enter key
    When I should not see "Status A" in the "drawersimulation" "region"
    And I should not see "Status B" in the "drawersimulation" "region"
    And I should see "Status C" in the "drawersimulation" "region"
    And I should see "Status D" in the "drawersimulation" "region"
    And the focused element is "Status C" "link" in the "drawersimulation" "region"
    # Loop the subpanel links wand the menu item with up and down.
    Then I press the down key
    And the focused element is "Status D" "link" in the "drawersimulation" "region"
    And I press the down key
    And the focused element is "Another subpanel" "menuitem" in the "drawersimulation" "region"
    And I press the down key
    And the focused element is "Status C" "link" in the "drawersimulation" "region"
    And I press the down key
    And the focused element is "Status D" "link" in the "drawersimulation" "region"
    And I press the up key
    And the focused element is "Status C" "link" in the "drawersimulation" "region"
    And I press the up key
    And the focused element is "Another subpanel" "menuitem" in the "drawersimulation" "region"
    # Use up in the item to close the panel.
    And I press the up key
    And I should not see "Status A" in the "drawersimulation" "region"
    And I should not see "Status B" in the "drawersimulation" "region"
    And I should not see "Status C" in the "drawersimulation" "region"
    And I should not see "Status D" in the "drawersimulation" "region"
    And the focused element is "Subpanel example" "menuitem" in the "drawersimulation" "region"
    And the page should meet accessibility standards with "wcag143" extra tests
    # Enter the panel and select the second link.
    And I press the enter key
    And I press the down key
    And the focused element is "Status B" "link" in the "drawersimulation" "region"
    And I press the enter key
    And I should see "Foo param value: Beetle" in the "paramcheck" "region"

  Scenario: User can browse the menu using the WCAG recommended compount keyboard navigation
    Given I click on "Actions menu" "button" in the "regularscenario" "region"
    And I press the down key
    And I press the down key
    And I press the down key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    When I press the tab key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I should see "Status A" in the "regularscenario" "region"
    And I should see "Status B" in the "regularscenario" "region"
    And I press the down key
    Then I press the shift tab key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"
    And I press the enter key
    And the focused element is "Status A" "link" in the "regularscenario" "region"
    And I should see "Status A" in the "regularscenario" "region"
    And I should see "Status B" in the "regularscenario" "region"
    And I press the escape key
    And the focused element is "Subpanel example" "menuitem" in the "regularscenario" "region"
    And I should not see "Status A" in the "regularscenario" "region"
    And I should not see "Status B" in the "regularscenario" "region"