Add aria-label to icon only menu button stories

.changeset/unlucky-adults-push.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/menu': patch
+---
+
+Add label property to menu button, which set's the aria-label on the button

packages/components/menu/src/menu-button.spec.ts

@@ -38,6 +38,18 @@ describe('sl-menu-button', () => {
         expect(button).to.exist;
       });
 
+      it('should not have a label', () => {
+        expect(el.label).to.be.undefined;
+        expect(button).not.to.have.attribute('aria-label');
+      });
+
+      it('should have an label when set', async () => {
+        el.label = 'Label';
+        await el.updateComplete;
+
+        expect(button).to.have.attribute('aria-label', 'Label');
+      });
+
       it('should not have a disabled button', () => {
         expect(button).not.to.have.attribute('disabled');
         expect(button.disabled).not.to.be.true;

packages/components/menu/src/menu-button.stories.ts

@@ -18,7 +18,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import '../register.js';
 import { type MenuButton } from './menu-button.js';
 
-type Props = Pick<MenuButton, 'disabled' | 'fill' | 'position' | 'size' | 'variant'> & {
+type Props = Pick<MenuButton, 'disabled' | 'fill' | 'label' | 'position' | 'size' | 'variant'> & {
   alignSelf: string;
   body: string | TemplateResult;
   justifySelf: string;
@@ -35,7 +35,8 @@ export default {
     alignSelf: 'center',
     body: 'Button',
     disabled: false,
-    justifySelf: 'center'
+    justifySelf: 'center',
+    label: 'Label'
   },
   argTypes: {
     alignSelf: {
@@ -86,7 +87,7 @@ export default {
     // Disables Chromatic's snapshotting on a story level
     chromatic: { disableSnapshot: true }
   },
-  render: ({ alignSelf, body, disabled, fill, justifySelf, menuItems, position, size, variant }) => {
+  render: ({ alignSelf, body, disabled, fill, justifySelf, label, menuItems, position, size, variant }) => {
     return html`
       <style>
         #root-inner {
@@ -98,6 +99,7 @@ export default {
       <sl-menu-button
         ?disabled=${disabled}
         fill=${ifDefined(fill)}
+        label=${ifDefined(label)}
         position=${ifDefined(position)}
         size=${ifDefined(size)}
         style=${styleMap({ alignSelf, justifySelf })}

packages/components/menu/src/menu-button.ts

@@ -51,6 +51,9 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
   /** The fill of the button. */
   @property() fill: ButtonFill = 'outline';
 
+  /** If the menu button is icon only, use this to set the `aria-label` on the button. */
+  @property() label?: string;
+
   /** @internal The menu. */
   @query('sl-menu') menu!: Menu;
 
@@ -80,6 +83,7 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
         @click=${this.#onClick}
         @keydown=${this.#onKeydown}
         ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.label)}
         fill=${ifDefined(this.fill)}
         part="button"
         size=${ifDefined(this.size)}