From 3e175706ff79a27e21192bea28a7a06d34f29e97 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Wed, 4 Jan 2023 17:00:04 +0800 Subject: [PATCH 1/2] MDL-76601 blocks: Always display course card menus Displaying the course card menu only on hover is bad in terms of accessibility as it prevents keyboard-only users from accessing the menu. So it's better to always display them. --- theme/boost/scss/moodle/blocks.scss | 21 --------------------- theme/boost/style/moodle.css | 12 ------------ theme/classic/style/moodle.css | 12 ------------ 3 files changed, 45 deletions(-) diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss index 2b043aa033a..2b20f6d1e2d 100644 --- a/theme/boost/scss/moodle/blocks.scss +++ b/theme/boost/scss/moodle/blocks.scss @@ -136,16 +136,6 @@ $card-gutter : $card-deck-margin * 2; .progress-text { color: $gray-600; } - .dashboard-card-footer.menu { - opacity: 0; - } - .dashboard-card { - @include hover-focus { - .dashboard-card-footer.menu { - opacity: 1; - } - } - } .multiline { white-space: normal; } @@ -182,17 +172,6 @@ $card-gutter : $card-deck-margin * 2; } } -.course-listitem .menu { - opacity: 0; -} -.course-listitem { - @include hover-focus { - .menu { - opacity: 1; - } - } -} - .dashboard-card-deck { .dashboard-card { margin-bottom: $card-gutter; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 5c104f90a75..b930dc717ec 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -13103,12 +13103,6 @@ body.dragging .dragging { .block .block-cards .progress-text { color: #6a737b; } -.block .block-cards .dashboard-card-footer.menu { - opacity: 0; } - -.block .block-cards .dashboard-card:hover .dashboard-card-footer.menu, .block .block-cards .dashboard-card:focus .dashboard-card-footer.menu { - opacity: 1; } - .block .block-cards .multiline { white-space: normal; } @@ -13139,12 +13133,6 @@ body.dragging .dragging { .dashboard-list-img { width: 100%; } } -.course-listitem .menu { - opacity: 0; } - -.course-listitem:hover .menu, .course-listitem:focus .menu { - opacity: 1; } - .dashboard-card-deck .dashboard-card { margin-bottom: 0.5rem; flex-basis: auto; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 79abfae5890..9ce61676e79 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -13103,12 +13103,6 @@ body.dragging .dragging { .block .block-cards .progress-text { color: #6a737b; } -.block .block-cards .dashboard-card-footer.menu { - opacity: 0; } - -.block .block-cards .dashboard-card:hover .dashboard-card-footer.menu, .block .block-cards .dashboard-card:focus .dashboard-card-footer.menu { - opacity: 1; } - .block .block-cards .multiline { white-space: normal; } @@ -13139,12 +13133,6 @@ body.dragging .dragging { .dashboard-list-img { width: 100%; } } -.course-listitem .menu { - opacity: 0; } - -.course-listitem:hover .menu, .course-listitem:focus .menu { - opacity: 1; } - .dashboard-card-deck .dashboard-card { margin-bottom: 0.5rem; flex-basis: auto; From c380811bb2acf7a4160a79899a784be762611a67 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Wed, 4 Jan 2023 17:21:47 +0800 Subject: [PATCH 2/2] MDL-76601 block_myoverview: Remove hover action before clicking on menu With the course card menu now always displayed, there's no need to hover first before clicking on the menus on block_myoverview Behat tests. --- .../behat/block_myoverview_dashboard.feature | 6 ---- .../behat/block_myoverview_favourite.feature | 3 -- .../behat/block_myoverview_hidden.feature | 32 ++++++------------- 3 files changed, 10 insertions(+), 31 deletions(-) diff --git a/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature b/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature index b4b495250d0..11a13950cd2 100644 --- a/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature +++ b/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature @@ -130,7 +130,6 @@ Feature: The my overview block allows users to easily access their courses Scenario: View favourite courses - w/ persistence Given I am on the "My courses" page logged in as "student1" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "All" "button" in the "Course overview" "block" @@ -201,7 +200,6 @@ Feature: The my overview block allows users to easily access their courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "In progress" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I reload the page @@ -215,7 +213,6 @@ Feature: The my overview block allows users to easily access their courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "Past" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element" And I reload the page @@ -229,7 +226,6 @@ Feature: The my overview block allows users to easily access their courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "Future" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I reload the page @@ -243,7 +239,6 @@ Feature: The my overview block allows users to easily access their courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I reload the page @@ -261,7 +256,6 @@ Feature: The my overview block allows users to easily access their courses And I click on "All" "button" in the "Course overview" "block" # We have to click on the data attribute instead of the button element text as we might risk to click on the false positive "All (including removed from view)" element instead When I click on "[data-value='allincludinghidden']" "css_element" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I reload the page diff --git a/blocks/myoverview/tests/behat/block_myoverview_favourite.feature b/blocks/myoverview/tests/behat/block_myoverview_favourite.feature index 880a50d1a40..0d318f2e773 100644 --- a/blocks/myoverview/tests/behat/block_myoverview_favourite.feature +++ b/blocks/myoverview/tests/behat/block_myoverview_favourite.feature @@ -25,7 +25,6 @@ Feature: The my overview block allows users to favourite their courses Scenario: Favourite a course on a course card Given I am on the "My courses" page logged in as "student1" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I reload the page @@ -36,7 +35,6 @@ Feature: The my overview block allows users to favourite their courses Scenario: Star a course and switch display to list Given I am on the "My courses" page logged in as "student1" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Display drop-down menu" "button" in the "Course overview" "block" @@ -48,7 +46,6 @@ Feature: The my overview block allows users to favourite their courses Scenario: Star a course and switch display to summary Given I am on the "My courses" page logged in as "student1" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element" And I click on "Display drop-down menu" "button" in the "Course overview" "block" diff --git a/blocks/myoverview/tests/behat/block_myoverview_hidden.feature b/blocks/myoverview/tests/behat/block_myoverview_hidden.feature index c0bb19069a6..ac6ead53c10 100644 --- a/blocks/myoverview/tests/behat/block_myoverview_hidden.feature +++ b/blocks/myoverview/tests/behat/block_myoverview_hidden.feature @@ -27,7 +27,6 @@ Feature: The my overview block allows users to hide their courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I reload the page @@ -36,33 +35,29 @@ Feature: The my overview block allows users to hide their courses Scenario: Test hide toggle functionality w/ favorites Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" - When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" + And I click on "All" "link" in the "Course overview" "block" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" When I reload the page - Then I should not see "Course 2" in the "Course overview" "block" + And I should not see "Course 2" in the "Course overview" "block" And I click on "All" "button" in the "Course overview" "block" And I click on "Starred" "link" in the "Course overview" "block" Then I should not see "Course 2" in the "Course overview" "block" And I click on "Starred" "button" in the "Course overview" "block" And I click on "Removed from view" "link" in the "Course overview" "block" - Then I should see "Course 2" in the "Course overview" "block" + And I should see "Course 2" in the "Course overview" "block" Scenario: Test show toggle functionality Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" - When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" + And I click on "All" "link" in the "Course overview" "block" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" - When I click on "All" "button" in the "Course overview" "block" + And I click on "All" "button" in the "Course overview" "block" And I click on "Removed from view" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" - When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" + And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I reload the page And I click on "Removed from view" "button" in the "Course overview" "block" @@ -72,33 +67,29 @@ Feature: The my overview block allows users to hide their courses Scenario: Test show toggle functionality w/ favorites Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" - When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" + And I click on "All" "link" in the "Course overview" "block" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "All" "button" in the "Course overview" "block" And I click on "Removed from view" "link" in the "Course overview" "block" And I should see "Course 2" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" When I reload the page Then I should not see "Course 2" in the "Course overview" "block" And I click on "Removed from view" "button" in the "Course overview" "block" And I click on "All" "link" in the "Course overview" "block" - Then I should see "Course 2" in the "Course overview" "block" + And I should see "Course 2" in the "Course overview" "block" And I click on "All" "button" in the "Course overview" "block" And I click on "Starred" "link" in the "Course overview" "block" - Then I should see "Course 2" in the "Course overview" "block" + And I should see "Course 2" in the "Course overview" "block" Scenario: Test a course is hidden directly with "All" courses Given I am on the "My courses" page logged in as "student1" And I click on "All" "button" in the "Course overview" "block" When I click on "All" "link" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" Then I should not see "Course 2" in the "Course overview" "block" @@ -111,17 +102,14 @@ Feature: The my overview block allows users to hide their courses And I click on "All" "button" in the "Course overview" "block" # We have to click on the data attribute instead of the button element text as we might risk to click on the false positive "All (except hidden)" element instead When I click on "[data-value='allincludinghidden']" "css_element" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" Then I should see "Course 2" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I should not see "Remove from view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I should see "Restore to view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" - Then I should see "Course 2" in the "Course overview" "block" - And I hover "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" + And I should see "Course 2" in the "Course overview" "block" And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I should see "Remove from view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element" And I should not see "Restore to view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"