chore: tweak button position, a11y, and add button text

ui/core/app/components/copyable/index.hbs

@@ -1,7 +1,6 @@
 {{#if this.isClipboardLibrarySupported}}
   <span
     id={{this.id}}
-    aria-labelledby={{this.copyableButtonId}}
     class="copyable"
     {{did-insert this.register}}
     {{will-destroy this.destroy}}
@@ -12,10 +11,12 @@
 
     <Rose::Button
       id={{this.copyableButtonId}}
+      aria-describedby={{this.id}}
       class="copyable-button"
       @style="ghost"
       @iconOnly={{this.icon}}
-    >{{@text}}</Rose::Button>
+      title={{@buttonText}}
+    >{{@buttonText}}</Rose::Button>
   </span>
 {{else}}
   {{yield}}

ui/core/app/styles/app.scss

@@ -81,7 +81,11 @@
   }
 }
 
-.copyable .copyable-button {
-  padding: 0 sizing.rems(xxs);
-  margin: 0;
+.copyable {
+  .copyable-button {
+    position: relative;
+    top: -2px;
+    padding: 0 sizing.rems(xxs);
+    margin: 0;
+  }
 }

ui/core/app/templates/scopes/scope/projects/project/index.hbs

@@ -7,7 +7,11 @@
   <page.header>
     <h2>{{t "resources.project.title"}}</h2>
     <p>{{t "resources.project.description"}}</p>
-    <Copyable @text={{@model.id}}>
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t "actions.copy-to-clipboard"}}
+      @acknowledgeText={{t "states.copied"}}
+    >
       <code>{{@model.id}}</code>
     </Copyable>
   </page.header>

ui/core/translations/actions/en-us.yaml

@@ -7,6 +7,7 @@ save: Save
 manage: Manage
 help: Need help?
 back: Back
+copy-to-clipboard: Copy to Clipboard
 authenticate: Authenticate
 deauthenticate: Deauthenticate
 choose-org: Choose Scope
@@ -27,4 +28,4 @@ add-members: Add Members
 add-hosts: Add Hosts
 set-password: Set Password
 change-password: Change Password
-edit-form: Edit Form
+edit-form: Edit Form

ui/core/translations/states/en-us.yaml

@@ -2,3 +2,4 @@ info: Info
 success: Success
 warning: Warning
 error: Error
+copied: Copied