Ensure heading components use semantic elements (#1014)

* Restrict headline components' as prop to heading elements * Add changeset
sumup-oss · Jul 2, 2021 · 2e0e438 · 2e0e438
1 parent e76f2d0
commit 2e0e438
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/strange-buckets-teach.md b/.changeset/strange-buckets-teach.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Restricted the `Headline`'s and `SubHeadline`'s `as` prop to heading elements.
diff --git a/packages/circuit-ui/components/Headline/Headline.tsx b/packages/circuit-ui/components/Headline/Headline.tsx
@@ -32,7 +32,7 @@ export interface HeadlineProps
    * without skipping any levels. Learn more at
    * https://www.w3.org/WAI/tutorials/page-structure/headings/.
    */
-  as: string;
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 const baseStyles = ({ theme }: StyleProps) => css`

diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
@@ -26,7 +26,7 @@ export interface SubHeadlineProps
    * without skipping any levels. Learn more at
    * https://www.w3.org/WAI/tutorials/page-structure/headings/.
    */
-  as: string;
+  as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 const baseStyles = ({ theme }: StyleProps) => css`