[bug] <rh-code-block> "Copy" and "Wrap lines" buttons lack an accessible label

[adamjohnson]

Describe the bug

The "Copy and "Wrap lines" buttons in <rh-code-block> lack accessible labels. The <rh-tooltip> adds meaning for sighted users; however, the <button>'s don't have a label for AT users.

Screenshots

Steps to reproduce

1. Visit the Actions demo for code block
2. Right click > Inspect on one of the action buttons (Copy or Wrap Lines)
3. Turn on Accessibility Tree View in DevTools
4. Note the lack of an accessible label for the button

Expected behaviour

The buttons should have an accessible label. eg:

• Copy
• Toggle Word Wrap / Toggle Overflow (depending on state)

Element HTML

<rh-code-block actions="wrap copy">
  <span slot="action-label-copy">Copy to Clipboard</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
  <span slot="action-label-wrap">Toggle word wrap</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<script type="text/css">#content {
  display: block;
  background-color: var(--rh-color-surface-lighter, #f2f2f2);
  border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
  border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
  font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
  color: var(--rh-color-text-primary-on-light, #151515);
  padding: var(--rh-space-xl, 24px);
  height: calc(100% - 2 * var(--rh-space-xl, 24px));
  border-radius: var(--rh-border-radius-default, 3px);
  max-width: 1000px;
  max-height: 640px;
  overflow-y: auto;
}</script>
</rh-code-block>

Operating System (OS)

iOS, macOS, Linux, Windows

Browser

Chrome, Safari, Safari iOS, Microsoft Edge, Firefox

Additional browser or assistive technology info

No response