feat(components): Make <Text> and <Headline> accessible by allowi…

…ng ARIA labelling props (#4194)

* feat(components): Make `<Text>` and `<Headline>` accessible by allowing ARIA labelling props

* Create wet-parents-burn.md

.changeset/wet-parents-burn.md

@@ -0,0 +1,8 @@
+---
+"@marigold/components": minor
+"@marigold/types": minor
+---
+
+feat(components): Make `<Text>` and `<Headline>` accessible by allowing ARIA labelling props
+
+`<Text>` and `<Headline>` will no longer cause type errors when ARIA labelling is used (`aria-label`, `id`, ...).

packages/components/src/Headline/Headline.tsx

@@ -9,8 +9,9 @@ import {
   useClassNames,
   useTheme,
 } from '@marigold/system';
+import type { AriaLabelingProps } from '@marigold/types';
 
-export interface HeadlineProps extends TextAlignProp {
+export interface HeadlineProps extends AriaLabelingProps, TextAlignProp {
   /**
    * Set the color of the headline.
    */

packages/components/src/Text/Text.tsx

@@ -17,11 +17,13 @@ import {
   useClassNames,
   useTheme,
 } from '@marigold/system';
+import type { AriaLabelingProps } from '@marigold/types';
 
 // Props
 // ---------------
 export interface TextProps
-  extends Omit<RAC.TextProps, 'elementType'>,
+  extends AriaLabelingProps,
+    Omit<RAC.TextProps, 'elementType'>,
     TextAlignProp,
     FontSizeProp,
     FontWeightProp,

packages/types/src/html.ts

@@ -0,0 +1,32 @@
+/**
+ * Properties that are required on elements to enable good accessibility. Make sure
+ * all components allow these attributes.
+ *
+ * Copy/pasted from `@react-types/shared` and added the `id` prop to it.
+ */
+export interface AriaLabelingProps {
+  /**
+   * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+   */
+  id?: string;
+
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: string;
+
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   */
+  'aria-labelledby'?: string;
+
+  /**
+   * Identifies the element (or elements) that describes the object.
+   */
+  'aria-describedby'?: string;
+
+  /**
+   * Identifies the element (or elements) that provide a detailed, extended description for the object.
+   */
+  'aria-details'?: string;
+}

packages/types/src/index.ts

@@ -1,4 +1,5 @@
 export * from 'type-fest';
+export * from './html';
 export * from './react';
 
 /**