fix(illustrated-message): use accessibile tagnames

adobe · Jul 20, 2020 · e47b469 · e47b469
1 parent b990b54
commit e47b469
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/illustrated-message/src/IllustratedMessage.ts b/packages/illustrated-message/src/IllustratedMessage.ts
@@ -40,8 +40,8 @@ export class IllustratedMessage extends LitElement {
     protected render(): TemplateResult {
         return html`
             <div id="illustration"><slot></slot></div>
-            <div id="heading">${this.heading}</div>
-            <div id="description">${this.description}</div>
+            <h2 id="heading">${this.heading}</h2>
+            <p id="description">${this.description}</p>
         `;
     }
 }
diff --git a/packages/illustrated-message/src/illustrated-message.css b/packages/illustrated-message/src/illustrated-message.css
@@ -35,6 +35,36 @@ governing permissions and limitations under the License.
     text-transform: var(--spectrum-heading-quiet-2-text-transform, none);
     margin-top: 0;
     margin-bottom: 0;
+    color: var(
+        --spectrum-heading-page-title-text-color,
+        var(--spectrum-global-color-gray-700)
+    );
+}
+
+#description {
+    font-size: var(
+        --spectrum-body-4-text-size,
+        var(--spectrum-alias-font-size-default)
+    );
+    font-weight: var(
+        --spectrum-body-4-text-font-weight,
+        var(--spectrum-alias-body-text-font-weight)
+    );
+    line-height: var(
+        --spectrum-body-4-text-line-height,
+        var(--spectrum-alias-body-text-line-height)
+    );
+    letter-spacing: var(
+        --spectrum-body-4-text-letter-spacing,
+        var(--spectrum-global-font-letter-spacing-none)
+    );
+    text-transform: var(--spectrum-body-4-text-transform, none);
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(
+        --spectrum-body-secondary-text-color,
+        var(--spectrum-global-color-gray-700)
+    );
 }
 
 /* Ensure that SVGs with viewBox attributes size correctly. */