chore[actionbutton, actiongroup]: fix application of aria-labels (#3230)

* chore: aria-label only appears on icon-only button

* chore: refactors action group to use different args

- ensures that actiongroup arg types are used in some of the documentation
template instead of actionbutton args
- removes white space from stories file
- corrects some sentence-case instances for story names

* chore: fix context passing to template and indentation

Author: marissahuysentruyt

components/actionbutton/stories/actionbutton.stories.js

@@ -99,26 +99,22 @@ Default.args = {};
 Default.tags = ["!autodocs"];
 
 // ********* DOCS ONLY ********* //
-
 /**
  * Action buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text.
  *
  * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the label will appear in a tooltip on hover.
  */
-
 export const Standard = TreatmentTemplate.bind({});
 Standard.args = Default.args;
 Standard.tags = ["!dev"];
 Standard.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-
 Standard.storyName = "Default";
 
 /**
  * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. This is optimal for when the selection should call attention, such as within a tool bar.
  */
-
 export const Emphasized = TreatmentTemplate.bind({});
 Emphasized.tags = ["!dev"];
 Emphasized.args = {
@@ -133,7 +129,6 @@ Emphasized.parameters = {
 /**
  * Adding the `.spectrum-ActionButton--emphasized` class to a quiet action button can be effective in calling attention.
  */
-
 export const EmphasizedQuiet = TreatmentTemplate.bind({});
 EmphasizedQuiet.tags = ["!dev"];
 EmphasizedQuiet.args = {
@@ -150,7 +145,6 @@ EmphasizedQuiet.storyName = "Emphasized (quiet)";
 /**
  * Quiet action buttons have no visible background until they’re interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read.
  */
-
 export const Quiet = TreatmentTemplate.bind({});
 Quiet.tags = ["!dev"];
 Quiet.args = {
@@ -165,7 +159,6 @@ Quiet.parameters = {
 /**
  * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup.
  */
-
 export const HoldIcon = IconOnlyOption.bind({});
 HoldIcon.tags = ["!dev"];
 HoldIcon.parameters = {
@@ -177,9 +170,7 @@ StaticWhiteDocs.tags = ["!dev"];
 StaticWhiteDocs.args = {
 	staticColor: "white",
 };
-
 StaticWhiteDocs.storyName = "Static white";
-
 StaticWhiteDocs.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -190,9 +181,7 @@ StaticWhiteQuiet.args = {
 	staticColor: "white",
 	isQuiet: true,
 };
-
 StaticWhiteQuiet.storyName = "Static white (quiet)";
-
 StaticWhiteQuiet.parameters = {
 	chromatic: { disableSnapshot: true }
 };
@@ -203,7 +192,6 @@ StaticBlackDocs.args = {
 	staticColor: "black",
 };
 StaticBlackDocs.storyName = "Static black";
-
 StaticBlackDocs.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -214,17 +202,14 @@ StaticBlackQuiet.args = {
 	staticColor: "black",
 	isQuiet: true,
 };
-
 StaticBlackQuiet.storyName = "Static black (quiet)";
-
 StaticBlackQuiet.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
 /**
  * Action buttons come in five different sizes: extra-small, small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
  */
-
 export const Sizing = (args, context) => Sizes({
 	Template: ActionButtonsWithIconOptions,
 	withHeading: false,
@@ -237,7 +222,6 @@ Sizing.parameters = {
 	chromatic: { disableSnapshot:  true },
 };
 
-
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionButtonGroup.bind({});
 WithForcedColors.args = Default.args;

components/actionbutton/stories/template.js

@@ -69,7 +69,7 @@ export const Template = ({
 	const { updateArgs } = context;
 	return html`
 		<button
-			aria-label=${ifDefined(label)}
+			aria-label=${ifDefined(hideLabel ? label : undefined)}
 			aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
 			aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
 			aria-pressed=${isSelected ? "true" : "false"}

components/actiongroup/stories/actiongroup.stories.js

@@ -48,7 +48,7 @@ export default {
 			control: "boolean",
 		},
 		iconOnly: {
-			name: "Icon Only",
+			name: "Icon-only",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -103,17 +103,14 @@ Default.tags = ["!autodocs"];
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
-
 /**
  * An action group in a disabled state shows that the action buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action group may become available later.
 */
-
 export const Disabled = ActionGroups.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {
 	areDisabled: true
 };
-
 Disabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -126,19 +123,16 @@ Emphasized.tags = ["!dev"];
 Emphasized.args = {
 	areEmphasized: true
 };
-
 Emphasized.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
 export const Horizontal = TreatmentTemplate.bind({});
 Horizontal.tags = ["!dev"];
 Horizontal.args = {};
-
 Horizontal.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-
 Horizontal.storyName = "Default";
 
 /**
@@ -149,37 +143,33 @@ HorizontalCompact.tags = ["!dev"];
 HorizontalCompact.args = {
 	compact: true
 };
-
 HorizontalCompact.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HorizontalCompact.storyName = "Horizontal compact";
 
 /**
  * The vertical option should be reserved for when horizontal space is limited.
 */
-
 export const Vertical = TreatmentTemplate.bind({});
 Vertical.tags = ["!dev"];
 Vertical.args = {
 	vertical: true
 };
-
 Vertical.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-
 export const VerticalCompact = TreatmentTemplate.bind({});
 VerticalCompact.tags = ["!dev"];
 VerticalCompact.args = {
 	compact: true,
 	vertical: true
 };
-
 VerticalCompact.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-
+VerticalCompact.storyName = "Vertical compact";
 
 export const HorizontalSizing = (args, context) => Sizes({
 	Template: ActionGroups,
@@ -192,6 +182,7 @@ HorizontalSizing.tags = ["!dev"];
 HorizontalSizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+HorizontalSizing.storyName = "Horizontal sizing";
 
 export const VerticalSizing = (args, context) => Sizes({
 	Template: ActionGroups,
@@ -206,11 +197,11 @@ VerticalSizing.tags = ["!dev"];
 VerticalSizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+VerticalSizing.storyName = "Vertical sizing";
 
 /**
  * When an action group is justified, it takes up the entire available container width, divided equally for each action button that is inside the group.
 */
-
 export const Justified = ActionGroups.bind({});
 Justified.tags = ["!dev"];
 Justified.args = {
@@ -219,15 +210,14 @@ Justified.args = {
 	content: [
 		{
 			iconName: "AlignTop",
-			label: "Align Top",
+			label: "Align top",
 		},
 		{
 			iconName: "AlignBottom",
-			label: "Align Bottom",
+			label: "Align bottom",
 		},
 	]
 };
-
 Justified.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -237,24 +227,23 @@ JustifiedIconOnly.tags = ["!dev"];
 JustifiedIconOnly.args = {
 	customStyles: {"width": "300px"},
 	justified: true,
+	iconOnly: true,
 	content: [
 		{
 			iconName: "AlignTop",
-			label: "",
+			label: "Align top",
 		},
 		{
 			iconName: "AlignBottom",
-			label: "",
+			label: "Align bottom",
 		},
 		{
 			iconName: "AlignMiddle",
-			label: "",
+			label: "Align middle",
 		},
 	]
 };
-
 JustifiedIconOnly.storyName = "Justified (icon-only)";
-
 JustifiedIconOnly.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -265,40 +254,36 @@ JustifiedIconOnlyCompact.args = {
 	customStyles: {"width": "300px"},
 	justified: true,
 	compact: true,
+	iconOnly: true,
 	content: [
 		{
 			iconName: "AlignTop",
-			label: "",
+			label: "Align top",
 		},
 		{
 			iconName: "AlignBottom",
-			label: "",
+			label: "Align bottom",
 		},
 		{
 			iconName: "AlignMiddle",
-			label: "",
+			label: "Align middle",
 		},
 	]
 };
-
 JustifiedIconOnlyCompact.storyName = "Justified (compact, icon-only)";
-
 JustifiedIconOnlyCompact.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-
 /**
  * When space is limited in an action group, there are 2 options for the group's overflow behavior: wrap or collapse. By default, an action group is set to wrap, meaning that the action buttons inside the group wrap to form another line. Alternatively, an action group can be set to collapse inside a **More (...)** action button.
 */
 export const Overflow = OverflowOption.bind({});
 Overflow.tags = ["!dev"];
-
 Overflow.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionGroups.bind({});
 WithForcedColors.args = Default.args;