improve dialog/drawer a11y

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Fixed a bug that caused `<sl-progress-ring>` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656)
 - Implemented stricter linting to improve consistency and reduce errors, which resulted in many small refactors throughout the codebase [#647](https://github.com/shoelace-style/shoelace/pull/647)
+- Improved accessibility of `<sl-dialog>` and `<sl-drawer>` by making the title an `<h2>` and adding a label to the close button
 - Restored the nicer animation on `<sl-spinner>` and verified it works in Safari
 - Updated minimum Node version to 14.17
 

src/components/dialog/dialog.styles.ts

@@ -61,9 +61,11 @@ export default css`
 
   .dialog__title {
     flex: 1 1 auto;
+    font: inherit;
     font-size: var(--sl-font-size-large);
     line-height: var(--sl-line-height-dense);
     padding: var(--header-spacing);
+    margin: 0;
   }
 
   .dialog__close {

src/components/dialog/dialog.ts

@@ -12,6 +12,7 @@ import { HasSlotController } from '~/internal/slot';
 import { isPreventScrollSupported } from '~/internal/support';
 import { watch } from '~/internal/watch';
 import { setDefaultAnimation, getAnimation } from '~/utilities/animation-registry';
+import { LocalizeController } from '~/utilities/localize';
 
 const hasPreventScroll = isPreventScrollSupported();
 
@@ -64,6 +65,7 @@ export default class SlDialog extends LitElement {
   @query('.dialog__overlay') overlay: HTMLElement;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
+  private readonly localize = new LocalizeController(this);
   private modal: Modal;
   private originalTrigger: HTMLElement | null;
 
@@ -230,13 +232,14 @@ export default class SlDialog extends LitElement {
           ${!this.noHeader
             ? html`
                 <header part="header" class="dialog__header">
-                  <span part="title" class="dialog__title" id="title">
+                  <h2 part="title" class="dialog__title" id="title">
                     <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
-                  </span>
+                  </h2>
                   <sl-icon-button
                     exportparts="base:close-button"
                     class="dialog__close"
                     name="x"
+                    label=${this.localize.term('close')}
                     library="system"
                     @click="${this.requestClose}"
                   ></sl-icon-button>

src/components/drawer/drawer.styles.ts

@@ -92,9 +92,11 @@ export default css`
 
   .drawer__title {
     flex: 1 1 auto;
+    font: inherit;
     font-size: var(--sl-font-size-large);
     line-height: var(--sl-line-height-dense);
     padding: var(--header-spacing);
+    margin: 0;
   }
 
   .drawer__close {

src/components/drawer/drawer.ts

@@ -13,6 +13,7 @@ import { uppercaseFirstLetter } from '~/internal/string';
 import { isPreventScrollSupported } from '~/internal/support';
 import { watch } from '~/internal/watch';
 import { setDefaultAnimation, getAnimation } from '~/utilities/animation-registry';
+import { LocalizeController } from '~/utilities/localize';
 
 const hasPreventScroll = isPreventScrollSupported();
 
@@ -72,6 +73,7 @@ export default class SlDrawer extends LitElement {
   @query('.drawer__overlay') overlay: HTMLElement;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
+  private readonly localize = new LocalizeController(this);
   private modal: Modal;
   private originalTrigger: HTMLElement | null;
 
@@ -256,14 +258,15 @@ export default class SlDrawer extends LitElement {
           ${!this.noHeader
             ? html`
                 <header part="header" class="drawer__header">
-                  <span part="title" class="drawer__title" id="title">
+                  <h2 part="title" class="drawer__title" id="title">
                     <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
                     <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
-                  </span>
+                  </h2>
                   <sl-icon-button
                     exportparts="base:close-button"
                     class="drawer__close"
                     name="x"
+                    label=${this.localize.term('close')}
                     library="system"
                     @click=${this.requestClose}
                   ></sl-icon-button>