Merge pull request #2358 from hashicorp/hds-3773/update-title-defaults

`Modal`, `Flyout`: make the title an H1

Author: shleewhite

Diff for: .changeset/old-pots-argue.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Flyout`: Changed the HTML element wrapping the tagline and title from a `<div>` to a `<h1>`
+
+`Modal`: Changed the HTML element wrapping the tagline and title from a `<div>` to a `<h1>`

Diff for: packages/components/src/components/hds/flyout/index.hbs

@@ -15,7 +15,11 @@
     {{yield
       (hash
         Header=(component
-          "hds/dialog-primitive/header" id=this.id onDismiss=this.onDismiss contextualClassPrefix="hds-flyout"
+          "hds/dialog-primitive/header"
+          id=this.id
+          onDismiss=this.onDismiss
+          contextualClassPrefix="hds-flyout"
+          titleTag="h1"
         )
         Description=(component "hds/dialog-primitive/description" contextualClass="hds-flyout__description")
       )

Diff for: packages/components/src/components/hds/modal/index.hbs

@@ -15,7 +15,11 @@
     {{yield
       (hash
         Header=(component
-          "hds/dialog-primitive/header" id=this.id onDismiss=this.onDismiss contextualClassPrefix="hds-modal"
+          "hds/dialog-primitive/header"
+          id=this.id
+          onDismiss=this.onDismiss
+          contextualClassPrefix="hds-modal"
+          titleTag="h1"
         )
       )
     }}

Diff for: showcase/app/templates/components/flyout.hbs

@@ -74,7 +74,7 @@
 
   <Shw::Divider @level={{2}} />
 
-  <Shw::Text::H3>Body</Shw::Text::H3>
+  <Shw::Text::H3 @tag="h2">Body</Shw::Text::H3>
 
   <Shw::Flex @direction="column" as |SF|>
     <SF.Item @label="With basic style" class="shw-component-flyout-sample-item">
@@ -108,7 +108,7 @@
 
   <Shw::Divider @level={{2}} />
 
-  <Shw::Text::H3>Footer</Shw::Text::H3>
+  <Shw::Text::H3 @tag="h2">Footer</Shw::Text::H3>
 
   <Shw::Flex @direction="column" as |SF|>
     <SF.Item @label="One action" class="shw-component-flyout-sample-item">

Diff for: showcase/tests/integration/components/hds/flyout/index-test.js

@@ -113,6 +113,15 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     assert.dom('.hds-flyout__tagline').doesNotExist();
   });
 
+  test('it renders the title as an h1', async function (assert) {
+    await render(
+      hbs`<Hds::Flyout id="test-flyout" as |F|>
+            <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
+          </Hds::Flyout>`
+    );
+    assert.dom('.hds-flyout__title').hasTagName('h1');
+  });
+
   // DISMISS
 
   test('it should always render the "dismiss" button', async function (assert) {

Diff for: showcase/tests/integration/components/hds/modal/index-test.js

@@ -100,6 +100,15 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     assert.dom('.hds-modal__tagline').hasText('Tagline');
   });
 
+  test('it renders the title as an h1', async function (assert) {
+    await render(
+      hbs`<Hds::Modal id="test-modal" as |M|>
+            <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
+          </Hds::Modal>`
+    );
+    assert.dom('.hds-modal__title').hasTagName('h1');
+  });
+
   // DISMISS
 
   test('it should always render the "dismiss" button', async function (assert) {