From dd4ac3d2cee47cf486382f33fefb875a205edd76 Mon Sep 17 00:00:00 2001 From: Andrew Nicols Date: Thu, 25 Jan 2018 12:45:56 +0800 Subject: [PATCH] MDL-60078 tool_usertours: Adjust accessibility checks for all themes --- .../tests/behat/tour_accessibility.feature | 101 ++++++------------ lib/behat/classes/partial_named_selector.php | 18 +++- 2 files changed, 47 insertions(+), 72 deletions(-) diff --git a/admin/tool/usertours/tests/behat/tour_accessibility.feature b/admin/tool/usertours/tests/behat/tour_accessibility.feature index 2aedf5bd2e6..4cfd3b599f4 100644 --- a/admin/tool/usertours/tests/behat/tour_accessibility.feature +++ b/admin/tool/usertours/tests/behat/tour_accessibility.feature @@ -1,18 +1,31 @@ @tool @tool_usertours Feature: Apply accessibility to a tour + Background: + Given I log in as "admin" + And I add a new user tour with: + | Name | First tour | + | Description | My first tour | + | Apply to URL match | FRONTPAGE | + | Tour is enabled | 1 | + | Show with backdrop | 1 | + And I add steps to the "First tour" tour: + | targettype | Title | Content | + | Display in middle of page | Welcome | Welcome tour. | + And I add steps to the tour: + | targettype | targetvalue_selector | Title | Content | + | Selector | .usermenu | User menu | Next page | + | Selector | input,button | Page 2 | Next page | + And I add steps to the tour: + | targettype | Title | Content | + | Display in middle of page | Page 3 | Final page. | @javascript Scenario: Check tabbing working correctly. - Given the following "courses" exist: - | fullname | shortname | - | Course 1 | C1 | - And I log in as "admin" - And I open the User tour settings page - And I click on "Enable" "link" in the "Boost - course view" "table_row" - And I am on "Course 1" course homepage + Given I am on site homepage + And I wait "1" seconds + And I should see "Welcome" # First dialogue of the tour, "Welcome". It has Close, Next and End buttons. # Nothing highlighted on the page. Initially whole dialogue focused. - And I wait "1" seconds When I press tab Then the focused element is ".close" "css_element" in the "Welcome" "dialogue" When I press tab @@ -29,82 +42,36 @@ Feature: Apply accessibility to a tour Then the focused element is "End tour" "button" in the "Welcome" "dialogue" When I press "Next" - # Now we are on the "Customisation" step, so Previous is also enabled. - # Also, the "Course Header" section in the page is highlighted, and this - # section contain breadcrumb Dashboard / Course 1 / C1 and setting drop down, - # so the focus have to go though them and back to the dialogue. + # Now we are on the "User menu" step, so Previous is also enabled. + # Also, the user menu section in the page is highlighted, and this + # section contain a hyperlink so the focus have to go though and back to the dialogue. And I wait "1" seconds And I press tab - Then the focused element is ".close" "css_element" in the "Customisation" "dialogue" + Then the focused element is ".close" "css_element" in the "User menu" "dialogue" When I press tab - Then the focused element is "Previous" "button" in the "Customisation" "dialogue" + Then the focused element is "Previous" "button" in the "User menu" "dialogue" When I press tab - Then the focused element is "Next" "button" in the "Customisation" "dialogue" + Then the focused element is "Next" "button" in the "User menu" "dialogue" When I press tab - Then the focused element is "End tour" "button" in the "Customisation" "dialogue" + Then the focused element is "End tour" "button" in the "User menu" "dialogue" # We tab 3 times from "End Tour" button to header container, drop down then go to "Dashboard" link. When I press tab - And I press tab - And I press tab - Then the focused element is "Dashboard" "link" in the ".breadcrumb" "css_element" + Then the focused element is ".usermenu" "css_element" When I press tab - Then the focused element is "Courses" "link" - When I press tab - Then the focused element is "C1" "link" - # Standing at final element of "Course Header" section, tab twice will lead our focus back to - # whole dialog then to close button on dialog header. + Then the focused element is "Admin User" "link" in the ".usermenu" "css_element" When I press tab And I press tab - Then the focused element is ".close" "css_element" in the "Customisation" "dialogue" - # Press shift-tab twice should lead us back to "C1" link. + Then the focused element is ".close" "css_element" in the "User menu" "dialogue" + # Press shift-tab twice should lead us back to "Admin user" link. When I press shift tab And I press shift tab - Then the focused element is "C1" "link" - - When I press "Next" - # Now we are on the "Navigation" step, so Previous is also enabled. - # Also, the "Side panel" button in the page is highlighted, and this comes - # in the tab order after End buttons, and before focus loops back to the popup. - And I wait "1" seconds - And I press tab - Then the focused element is ".close" "css_element" in the "Navigation" "dialogue" - When I press tab - Then the focused element is "Previous" "button" in the "Navigation" "dialogue" - When I press tab - Then the focused element is "Next" "button" in the "Navigation" "dialogue" - When I press tab - Then the focused element is "End tour" "button" in the "Navigation" "dialogue" - When I press tab - Then the focused element is "Side panel" "button" - When I press tab - # Here the focus loops round to the whole dialogue again. - And I press tab - Then the focused element is ".close" "css_element" in the "Navigation" "dialogue" - When I press shift tab - And I press shift tab - Then the focused element is "Side panel" "button" - When I press shift tab - And the focused element is "End tour" "button" in the "Navigation" "dialogue" + Then the focused element is "Admin User" "link" in the ".usermenu" "css_element" @javascript Scenario: Aria tags should not exist - Given I log in as "admin" - And I add a new user tour with: - | Name | First tour | - | Description | My first tour | - | Apply to URL match | FRONTPAGE | - | Tour is enabled | 1 | - And I add steps to the "First tour" tour: - | targettype | Title | Content | - | Display in middle of page | Welcome | Welcome to your course tour. | - And I add steps to the tour: - | targettype | targetvalue_selector | Title | Content | - | Selector | input,button | Page 2 | Next page | - And I add steps to the tour: - | targettype | Title | Content | - | Display in middle of page | Page 3 | Final page. | And I am on site homepage When I click on "Next" "button" + And I click on "Next" "button" Then "input[aria-describedby^='tour-step-tool_usertours'],button[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist And "input[tabindex],button[tabindex]" "css_element" should exist When I click on "Next" "button" diff --git a/lib/behat/classes/partial_named_selector.php b/lib/behat/classes/partial_named_selector.php index cf78531251f..5ce47243b9b 100644 --- a/lib/behat/classes/partial_named_selector.php +++ b/lib/behat/classes/partial_named_selector.php @@ -137,11 +137,19 @@ XPATH .//div[contains(concat(' ', normalize-space(@class), ' '), ' yui-dialog ') and normalize-space(descendant::div[@class='hd']) = %locator%] | -.//div[@data-region='modal' and descendant::*[@data-region='title'] = %locator%] | -.//div[contains(concat(' ', normalize-space(@class), ' '), ' modal-content ') and - normalize-space(descendant::h4[ - contains(concat(' ', normalize-space(@class), ' '), ' modal-title ') - ]) = %locator%] +.//div[@data-region='modal' and descendant::*[@data-region='title'] = %locator%] + | +.//div[ + contains(concat(' ', normalize-space(@class), ' '), ' modal-content ') + and + normalize-space(descendant::h4[contains(concat(' ', normalize-space(@class), ' '), ' modal-title ')]) = %locator% + ] + | +.//div[ + contains(concat(' ', normalize-space(@class), ' '), ' modal ') + and + normalize-space(descendant::*[contains(concat(' ', normalize-space(@class), ' '), ' modal-header ')] = %locator%) + ] XPATH , 'icon' => <<