fix(components): remove duplicate Tag name from Tag removal IconButton accessible name (#1759)

Author: pheggeseth

.changeset/proud-peas-invent.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Remove Tag textValue from Tag removal IconButton aria-label, as it results in the Tag textValue getting included twice in the accessible name of the removal button, such as "Remove tag-name tag-name" instead of "Remove tag-name"

.vscode/settings.json

@@ -7,5 +7,8 @@
 		"quickfix.biome": "explicit",
 		"source.organizeImports.biome": "explicit"
 	},
-	"editor.tabSize": 2
+	"editor.tabSize": 2,
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
 }

packages/components/__tests__/TagGroup.spec.tsx

@@ -18,7 +18,7 @@ describe('TagGroup', () => {
 		expect(screen.getByRole('grid')).toBeVisible();
 	});
 
-	it('renders remove buttons', () => {
+	it('renders remove buttons with correct accessible names', () => {
 		render(
 			<TagGroup onRemove={() => undefined}>
 				<Label>Label</Label>
@@ -29,10 +29,20 @@ describe('TagGroup', () => {
 				</TagList>
 			</TagGroup>,
 		);
+
+		// Verify all buttons are visible
 		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(3);
 		for (const button of buttons) {
 			expect(button).toBeVisible();
 		}
-		expect(buttons[0].getAttribute('aria-label')).toBe('Remove One');
+
+		// Verify accessible names are correct for each tag
+		expect(screen.getByRole('button', { name: 'Remove One' })).toBeVisible();
+		expect(screen.getByRole('button', { name: 'Remove Two' })).toBeVisible();
+		expect(screen.getByRole('button', { name: 'Remove Three' })).toBeVisible();
+
+		// Verify the aria-label attribute is just "Remove"
+		expect(buttons[0].getAttribute('aria-label')).toBe('Remove');
 	});
 });

packages/components/src/TagGroup.tsx

@@ -110,7 +110,7 @@ const Tag = ({ size = 'medium', variant = 'default', ref, ...props }: TagProps)
 					{children}
 					{allowsRemoving && (
 						<IconButton
-							aria-label={`Remove ${textValue ?? ''}`.trim()}
+							aria-label="Remove"
 							size="small"
 							variant="minimal"
 							icon="cancel-circle-outline"