Add aria_labelledby and aria_describedby properties to button component (#1979)

Author: calebeby

.changeset/big-feet-live.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `aria_labelledby` and `aria_describedby` properties to button component

src/components/button/button.stories.mdx

@@ -212,6 +212,8 @@ You can override the `content_start_icon` value to a different icon.
 
 - `aria_disabled` (string, `'true'`/`'false'`): Sets the button's `aria-disabled` attribute.
 - `aria_expanded` (string, `'true'`/`'false'`): Sets the button's `aria-expanded` attribute.
+- `aria_labelledby` (string): Sets the button's `aria-labelledby` attribute.
+- `aria_describedby` (string): Sets the button's `aria-describedby` attribute.
 - `class` (string): Append a class to the root element.
 - `content_start_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_start` block.
 - `content_end_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_end` block.

src/components/button/button.twig

@@ -21,6 +21,12 @@
   {% if aria_expanded %}
     aria-expanded="{{ aria_expanded }}"
   {% endif %}
+  {% if aria_labelledby %}
+    aria-labelledby="{{ aria_labelledby }}"
+  {% endif %}
+  {% if aria_describedby %}
+    aria-describedby="{{ aria_describedby }}"
+  {% endif %}
   {% if tag_name == 'a' %}
     href="{{ href|default('#') }}"
   {% elseif tag_name == 'button' %}