fix: add iconOnly prop to button, #noissue

src/Button/index.js

@@ -16,6 +16,7 @@ import {alignMap} from '../styleProps/flexProps';
 
 import ButtonCore from '../ButtonCore';
 import Icon from '../Icon';
+import VisuallyHidden from '../VisuallyHidden';
 
 import 'focus-visible';
 
@@ -254,6 +255,7 @@ const ButtonText = styled.span.withConfig({
 
 const Button = forwardRef((props, ref) => {
 	const {
+		iconOnly,
 		align,
 		as,
 		children,
@@ -285,11 +287,14 @@ const Button = forwardRef((props, ref) => {
 				{icon && iconRight !== true && (
 					<Icon disablePointerEvents name={icon} />
 				)}
-				{children && (
-					<ButtonText textOverflow={textOverflow}>
-						{children}
-					</ButtonText>
-				)}
+				{children &&
+					(iconOnly ? (
+						<VisuallyHidden>{children}</VisuallyHidden>
+					) : (
+						<ButtonText textOverflow={textOverflow}>
+							{children}
+						</ButtonText>
+					))}
 				{iconRight && (
 					<Icon
 						disablePointerEvents
@@ -314,6 +319,10 @@ Button.propTypes = {
 	 * Adds the ARIA attribute `aria-pressed="true"`
 	 */
 	isActive: PropTypes.bool,
+	/**
+	 * Visually hides the label but uses it for accessibility.
+	 */
+	iconOnly: PropTypes.bool,
 	/**
 	 * Renders the button in its disabled state. Uses
 	 * `aria-disabled` to make sure the button label

src/CenterContent/index.js

@@ -141,6 +141,7 @@ CenterContent.propTypes = {
 		PropTypes.number,
 		PropTypes.string,
 		PropTypes.array,
+		PropTypes.func,
 	]),
 	/**
 	 * In IE11, content will be aligned to the top of the screen by default.

src/Pill/index.js

@@ -327,15 +327,18 @@ const Pill = forwardRef((props, ref) => {
 			</Wrapper>
 			{hasSideButton && (
 				<SideButton
+					iconOnly
 					round
-					icon="x"
 					id={sideButtonId}
+					icon="x"
 					size="small"
 					color="shaded"
 					background={background}
 					onClick={onDelete}
-					aria-label={`${deleteLabel} ${children}`}
-				/>
+					aria-labelledby={[sideButtonId, wrapperId].join(' ')}
+				>
+					{deleteLabel}
+				</SideButton>
 			)}
 		</ConditionalFlexWrapper>
 	);