fix button a11y check issues

metmuseum · Dec 27, 2021 · eca9330 · eca9330
1 parent e380cc5
commit eca9330
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/.storybook/helpers/backgroundOverride.js b/.storybook/helpers/backgroundOverride.js
@@ -3,7 +3,7 @@ import scssExports from "../../src/global/exports.scss";
 
 // This is only needed because Chromatic does not (yet) support snapshot tests that respect the backgrounds add-on
 
-const backgroundOverride = (color = scssExports.colorGrey500) => html`<style>
+const backgroundOverride = (color = scssExports.colorGrey900) => html`<style>
 	.sb-show-main {
 		background: ${color};
 	}

diff --git a/src/global/buttons/primary/primary.stories.js b/src/global/buttons/primary/primary.stories.js
@@ -88,6 +88,7 @@ const buttonStoryTemplate = (options) => {
 	};
 
 	return html`
+		${finalOptions.styleMode === "Ghost-Light" ? backgroundOverride() : ""}
 		${viewMode == "Give it some breathing room" ? "<div class='_sb-breathing-room'>" : ""}
 
 		${finalOptions.elementTag === "Anchor"
@@ -102,15 +103,14 @@ const buttonStoryTemplate = (options) => {
 
 const anchorTagTemplate = (options) => {
 	return html`
-		${backgroundOverride()}
 		<a
 			class="button primary-button
 			primary-button--${options.sizeMode.toLowerCase()}
 			primary-button--${options.styleMode.toLowerCase()}
 			${options.state === "Hover" ? "_sb--hover" : ""}
 			${options.state === "Focus" ? "_sb--focus" : ""}"
 			role="button"
-			tabindex="1"
+			tabindex="0"
 			${options.state === "Inactive" ? "disabled" : ""}
 		>
 			${text("Label", "Primary Button")}
@@ -120,7 +120,6 @@ const anchorTagTemplate = (options) => {
 
 const buttonTagTemplate = (options) => {
 	return html`
-		${backgroundOverride()}
 		<button
 			class="button primary-button
 			primary-button--${options.sizeMode.toLowerCase()}

diff --git a/src/global/buttons/secondary/secondary.stories.js b/src/global/buttons/secondary/secondary.stories.js
@@ -71,7 +71,7 @@ const buttonStoryTemplate = (options) => {
 
 
 	return html`
-		${backgroundOverride()}
+		${finalOptions.styleMode === "Ghost-Light" ? backgroundOverride() : ""}
 
 		${viewMode == "Give it some breathing room" ? "<div class='_sb-breathing-room'>" : ""}
 
@@ -96,7 +96,7 @@ const anchorTagTemplate = (options) => {
 			${options.state === "Hover" ? "_sb--hover" : ""}
 			${options.state === "Focus" ? "_sb--focus" : ""}"
 			role="button"
-			tabindex="1"
+			tabindex="0"
 			${options.state === "Inactive" ? "disabled" : ""}
 		>
 			${text("Label", "Secondary Button")}