fix(ld-typo): apply code review suggestions

src/liquid/components/ld-typo/ld-typo.tsx

@@ -63,9 +63,21 @@ export class LdTypo {
   @Prop() ariaLabel: string
 
   private applyAriaLabel() {
-    const isBrandHeading =
-      this.variant.includes('b') && !this.variant.includes('body')
-    if (isBrandHeading) {
+    const isUppercase = [
+      'cap-m',
+      'cap-l',
+      'b1',
+      'b2',
+      'b3',
+      'b4',
+      'b5',
+      'b6',
+      'xb1',
+      'xb2',
+      'xb3',
+    ].includes(this.variant)
+
+    if (isUppercase) {
       this.root.setAttribute(
         'aria-label',
         this.ariaLabel || this.el.innerHTML.trim()
@@ -75,6 +87,10 @@ export class LdTypo {
 
   private getDefaultTag = () =>
     ({
+      'cap-m': 'span',
+      'cap-l': 'span',
+      'label-s': 'span',
+      'label-m': 'span',
       h1: 'h1',
       h2: 'h2',
       h3: 'h3',

src/liquid/components/ld-typo/readme.md

@@ -7,15 +7,11 @@ title: Typography
 permalink: components/ld-typo/
 ---
 
-# ld-typo
-
 <link rel="stylesheet" href="/css_components/ld-typo.css">
 
-Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.
+# ld-typo
 
-> **Note**: A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
-> 
-> If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the `variant` property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the `level` prop. 
+To give text a certain style of typography, you can use the `ld-typo` component. Every variant has its own semantic HTML tag that it gets rendered with. Heading styles render with their respective heading tag (`h1`, `h2`, etc). You can use the `tag` attribute, to render the variant with a different HTML tag, while keeping the visual variant style.
 
 ---
 
@@ -127,6 +123,12 @@ Headings are used as an introduction into a topic or a content section and for v
 
 ### Headings
 
+Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.
+
+> **Note**: A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
+> 
+> If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the `variant` property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the `level` prop. 
+
 {% example "html", true %}
 <ld-typo variant="h1">
   Almost before we knew it, we had left the ground.