Merge pull request #704 from equalizedigital/william/694/contrast-iss…

…ue-on-callout-button-firefox Wraps the pro callout button and tweak z-index to handle stacking contexts
equalizedigital · Jul 9, 2024 · 1ceddc4 · 1ceddc4
2 parents 51522bd + e5e7678
commit 1ceddc4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/partials/pro-callout.php b/partials/pro-callout.php
@@ -7,9 +7,9 @@
 
 ?>
 <div class="edac-pro-callout">
-	<img 
-		class="edac-pro-callout-icon" 
-		src="<?php echo esc_url( plugin_dir_url( __DIR__ ) ); ?>assets/images/edac-emblem.png" 
+	<img
+		class="edac-pro-callout-icon"
+		src="<?php echo esc_url( plugin_dir_url( __DIR__ ) ); ?>assets/images/edac-emblem.png"
 		alt="<?php esc_attr_e( 'Equalize Digital Logo', 'accessibility-checker' ); ?>"
 	>
 	<h4 class="edac-pro-callout-title">
@@ -27,18 +27,20 @@ class="edac-pro-callout-icon"
 			<li><?php esc_html_e( '...and more', 'accessibility-checker' ); ?></li>
 		</ul>
 	</div>
-	<a 
-		class="edac-pro-callout-button" 
-		href="https://equalizedigital.com/accessibility-checker/pricing/" 
-		target="_blank"
-	>
-		<?php esc_html_e( 'Get Accessibility Checker Pro', 'accessibility-checker' ); ?>
-	</a>
+	<div class="edac-pro-callout-button--wrapper">
+		<a
+			class="edac-pro-callout-button"
+			href="https://equalizedigital.com/accessibility-checker/pricing/"
+			target="_blank"
+		>
+			<?php esc_html_e( 'Get Accessibility Checker Pro', 'accessibility-checker' ); ?>
+		</a>
+	</div>
 
 	<?php if ( is_plugin_active( 'accessibility-checker-pro/accessibility-checker-pro.php' ) ) : ?>
 		<br />
-		<a 
-			class="edac-pro-callout-activate" 
+		<a
+			class="edac-pro-callout-activate"
 			href="<?php echo esc_url( admin_url( 'admin.php?page=accessibility_checker_settings&tab=license' ) ); ?>"
 		>
 			<?php esc_html_e( 'Or activate your license key here.', 'accessibility-checker' ); ?>

diff --git a/partials/welcome-page.php b/partials/welcome-page.php
@@ -207,10 +207,12 @@
 					<li><?php esc_html_e( '...and more', 'accessibility-checker' ); ?></li>
 				</ul>
 			</div>
-			<a class="edac-pro-callout-button" href="https://equalizedigital.com/accessibility-checker/pricing/?utm_source=accessibility-checker&utm_medium=software&utm_campaign=welcome-page" target="_blank">
-				<?php esc_html_e( 'Get Accessibility Checker Pro', 'accessibility-checker' ); ?>
-				<span class="screen-reader-text"><?php esc_html_e( '(opens in a new window)', 'accessibility-checker' ); ?></span>
-			</a>
+			<div class="edac-pro-callout-button--wrapper">
+				<a class="edac-pro-callout-button" href="https://equalizedigital.com/accessibility-checker/pricing/?utm_source=accessibility-checker&utm_medium=software&utm_campaign=welcome-page" target="_blank">
+					<?php esc_html_e( 'Get Accessibility Checker Pro', 'accessibility-checker' ); ?>
+					<span class="screen-reader-text"><?php esc_html_e( '(opens in a new window)', 'accessibility-checker' ); ?></span>
+				</a>
+			</div>
 		<?php
 		if ( edac_check_plugin_installed( 'accessibility-checker-pro/accessibility-checker-pro.php' ) ) {
 			?>

diff --git a/src/admin/sass/accessibility-checker-admin.scss b/src/admin/sass/accessibility-checker-admin.scss
@@ -1022,9 +1022,20 @@
     border: 3px solid #072446;
     border-radius: 0;
     position: relative;
-    z-index: 1;
     @include transition(background .3s, color .3s);
 
+    // firefox sizing fix to prevent wrapping due to differences in
+    // font sizing and paddings with different fonts
+    @-moz-document url-prefix() {
+      padding: 15px 22px;
+    }
+
+    &--wrapper {
+		position: relative;
+		z-index: 1;
+		display: inline;
+    }
+
     &:after {
       content: '';
       position: absolute;