fix(Copy): avoid label text mismatch (#6428)

* chore: prettier

* fix(Copy): avoid label text mismatch

* chore: prettier

Co-authored-by: Alessandra Davila <aledavila@ibm.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/components/src/components/copy-button/_copy-button.scss

@@ -30,6 +30,10 @@
     top: 1.2rem;
     left: 50%;
 
+    &:focus {
+      border: 2px solid $support-01;
+    }
+
     &::before {
       @include box-shadow;
       @include type-style('body-short-01');
@@ -71,6 +75,10 @@
   }
 
   // TODO: deprecate above styles
+  .#{$prefix}--copy {
+    font-size: 0;
+  }
+
   .#{$prefix}--copy-btn {
     @include reset;
 
@@ -121,6 +129,7 @@
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
       .#{$prefix}--copy-btn__feedback {
+      // https://github.com/stylelint/stylelint/issues/2363
       animation: $duration--fast-02 motion(standard, productive) hide-feedback;
     }
 

packages/react/src/components/Copy/Copy.js

@@ -24,7 +24,7 @@ export default function Copy({
   ...other
 }) {
   const [animation, setAnimation] = useState('');
-  const classNames = classnames(className, {
+  const classNames = classnames(className, `${prefix}--copy`, {
     [`${prefix}--copy-btn--animating`]: animation,
     [`${prefix}--copy-btn--${animation}`]: animation,
   });
@@ -64,9 +64,13 @@ export default function Copy({
       ])}
       {...other}
       aria-live="polite"
-      aria-label={animation ? feedback : other['aria-label']}>
+      aria-label={
+        (!children && (animation ? feedback : other['aria-label'])) || null
+      }>
       {children}
+      {animation ? feedback : other['aria-label']}
       <span
+        aria-hidden="true"
         className={`${prefix}--assistive-text ${prefix}--copy-btn__feedback`}>
         {feedback}
       </span>