improve screen reader experience

docs/resources/changelog.md

@@ -12,6 +12,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
 - Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
+- Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
 
 ## 2.0.0-beta.85
 

src/components/alert/alert.ts

@@ -194,8 +194,6 @@ export default class SlAlert extends ShoelaceElement {
           'alert--danger': this.variant === 'danger'
         })}
         role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
         aria-hidden=${this.open ? 'false' : 'true'}
         @mousemove=${this.handleMouseMove}
       >
@@ -203,7 +201,7 @@ export default class SlAlert extends ShoelaceElement {
           <slot name="icon"></slot>
         </span>
 
-        <span part="message" class="alert__message">
+        <span part="message" class="alert__message" aria-live="polite">
           <slot></slot>
         </span>
 
@@ -215,6 +213,7 @@ export default class SlAlert extends ShoelaceElement {
                 class="alert__close-button"
                 name="x"
                 library="system"
+                label=${this.localize.term('close')}
                 @click=${this.handleCloseClick}
               ></sl-icon-button>
             `