Fix percy failure and target issue on filters modal

[run percy]
Princeton-CDH · Jul 31, 2024 · 1122cd8 · 1122cd8
1 parent b890139
commit 1122cd8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/geniza/common/management/commands/visual_tests.py b/geniza/common/management/commands/visual_tests.py
@@ -79,22 +79,17 @@ def take_snapshots(self, browser, dark_mode=False):
         )
         percy_snapshot(browser, "Content Page%s" % dark_mode_str)
 
-        # document search with document type filter expanded
+        # document search with filters expanded
         browser.get(
             "http://localhost:8000/en/documents/?per_page=2&sort=scholarship_desc#filters"
         )
-        # open document type filter programatically
-        doctype_filter = browser.find_element(By.CSS_SELECTOR, ".doctype-filter")
-        browser.execute_script("arguments[0].open = true", doctype_filter)
-        # click the first option
+        # click the first doctype filter option
         browser.find_element(
-            By.CSS_SELECTOR, ".doctype-filter li:nth-child(1) label"
+            By.CSS_SELECTOR, "#id_doctype li:nth-child(1) label"
         ).click()
-        filter_modal_css = "fieldset#filters { display: flex !important; }"
         percy_snapshot(
             browser,
             "Document Search filter%s" % dark_mode_str,
-            percy_css=filter_modal_css,
         )
 
         # document search

diff --git a/sitemedia/scss/components/_peopleform.scss b/sitemedia/scss/components/_peopleform.scss
@@ -15,7 +15,7 @@ main.search {
     fieldset#filters {
         // only display if targeted/expanded
         display: none;
-        &:target,
+        &:target:not([aria-expanded="false"]),
         &[aria-expanded="true"] {
             // mobile view: flex column
             display: flex;
@@ -366,7 +366,7 @@ html[dir="rtl"] main.search {
         padding-right: 0;
         padding-left: 0.5rem;
     }
-    fieldset#filters:target,
+    fieldset#filters:target:not([aria-expanded="false"]),
     fieldset#filters[aria-expanded="true"] {
         right: auto;
         left: 0;

diff --git a/sitemedia/scss/components/_searchform.scss b/sitemedia/scss/components/_searchform.scss
@@ -262,7 +262,7 @@ main.people {
         }
     }
     // filter modal backdrop (mobile)
-    .modal-backdrop:has(~ fieldset#filters:target),
+    .modal-backdrop:has(~ fieldset#filters:target:not([aria-expanded="false"])),
     .modal-backdrop:has(~ fieldset#filters[aria-expanded="true"]) {
         position: fixed;
         top: 0;