From 1d2d07d6710dc81f8da3b30a22189bb2bb2728d9 Mon Sep 17 00:00:00 2001
From: nmanu1 <88398086+nmanu1@users.noreply.github.com>
Date: Tue, 20 Feb 2024 09:45:16 -0500
Subject: [PATCH] Remove styling to allow switching answers-search-ui icon divs
to spans (#1169)
This PR removes styling that targets arbitrary `span`s in `Answers-resultsHeader`. This styling was being automatically applied to icons using the answers-search-ui partial (or other icons) when the `div`s were changed to `span`s for accessibility reasons, which caused visual regressions. This was only an issue on vertical full page map templates which include the search bar and nav tabs in `Answers-resultsHeader`, instead of just the results count and applied filters.
Based on the [PR](https://github.com/yext/answers-hitchhiker-theme/pull/900) that initially added this styling, this was needed to ensure results count elements had the correct ordering on both ltr and rtl experiences. I checked a vertical template and vertical full page map template for `en` and `ar` locales in the test site and the results count elements seem to still be flipped, as expected. The only other `span`s that I saw within `Answers-resultsHeader` seemed to be the nav More icon and applied filters, both of which seemed fine after removing this styling.
J=TECHOPS-11042
TEST=manual
Since we no longer have a paid Percy subscription, our snapshots are not being generated. So I've included some screenshots of pages after the changes in this PR, pointing to v1.16.6 of answers-search-ui which contains the icon `div` to `span` change:
**en:**
**ar:**
---
static/scss/answers/theme.scss | 4 ----
1 file changed, 4 deletions(-)
diff --git a/static/scss/answers/theme.scss b/static/scss/answers/theme.scss
index 41ecbe3f7..6ce0ad2b4 100644
--- a/static/scss/answers/theme.scss
+++ b/static/scss/answers/theme.scss
@@ -134,10 +134,6 @@
margin-top: calc(var(--yxt-base-spacing) / 2);
margin-bottom: calc(var(--yxt-base-spacing) / 4);
}
-
- span {
- display: inline-block;
- }
}
&-results {