fix(menu): improve keyboard accessibility on firefox

.changeset/large-kings-drop.md

@@ -0,0 +1,6 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-menu>`: improved focus accessibility for keyboard navigation users on firefox
+`<rh-button>`: improved focus accessibility on firefox

elements/rh-button/rh-button.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { query } from 'lit/decorators/query.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -48,6 +49,8 @@ export class RhButton extends LitElement {
   /** Shorthand for the `icon` slot, the value is icon name */
   @property() icon?: string;
 
+  @query('button') private _button!: HTMLButtonElement;
+
   /**
    * Changes the style of the button.
    * - Primary: Used for the most important call to action on a page. Try to
@@ -150,6 +153,10 @@ export class RhButton extends LitElement {
         return '';
     }
   }
+
+  focus() {
+    this._button?.focus();
+  }
 }
 
 declare global {

elements/rh-menu/demo/color-context.html

@@ -1,6 +1,5 @@
 <rh-context-demo>
   <rh-menu>
-    <rh-button>Toggle Links</rh-button>
     <a href="#">Link1</a>
     <a href="#">Link2</a>
     <a href="#">Link3</a>
@@ -13,4 +12,3 @@
   import '@rhds/elements/rh-button/rh-button.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 </script>
-

elements/rh-menu/demo/position-left.html

@@ -1,5 +1,4 @@
 <rh-menu position="left" persistent>
-  <rh-button slot="button">Toggle Settings</rh-button>
   <rh-button variant="link">Menuitem1</rh-button>
   <rh-button variant="link">Menuitem2</rh-button>
   <rh-button variant="link">Menuitem3</rh-button>

elements/rh-menu/demo/position-right.html

@@ -1,5 +1,4 @@
 <rh-menu position="right">
-  <rh-button slot="button">Toggle Links</rh-button>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>

elements/rh-menu/demo/position-top.html

@@ -1,5 +1,4 @@
 <rh-menu position="top">
-  <rh-button slot="button">Toggle Menu</rh-button>
   <rh-button variant="link">Menuitem1</rh-button>
   <rh-button variant="link">Menuitem2</rh-button>
   <rh-button variant="link">Menuitem3</rh-button>

elements/rh-menu/demo/rh-menu.html

@@ -1,5 +1,4 @@
 <rh-menu id="rh-buttons">
-  <rh-button slot="button">Toggle Menu</rh-button>
   <rh-button data-item="1" variant="link">Menuitem1</rh-button>
   <rh-button data-item="2" variant="link">Menuitem2</rh-button>
   <rh-button data-item="3" variant="link">Menuitem3</rh-button>

elements/rh-menu/rh-menu.css

@@ -9,9 +9,12 @@ slot {
   width: max-content;
 }
 
+::slotted(a) {
+  padding: 5px !important; /* WARNING: not a token value */
+}
+
 .dark::slotted(a) {
   color: var(--rh-color-interactive-blue-lightest, #b9dafc) !important;
-  padding: 5px !important; /* WARNING: not a token value */
 }
 
 .dark::slotted(a:hover) {

elements/rh-menu/rh-menu.ts

@@ -27,6 +27,8 @@ export class MenuToggleEvent extends Event {
 export class RhMenu extends LitElement {
   static readonly styles = [styles];
 
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
   @queryAssignedElements() private _menuItems!: HTMLElement[];
 
   @colorContextConsumer() private on?: ColorTheme;
@@ -64,6 +66,10 @@ export class RhMenu extends LitElement {
   activateItem(item: HTMLElement) {
     this.#tabindex.setActiveItem(item);
   }
+
+  focus() {
+    this.#tabindex.activeItem?.focus();
+  }
 }
 
 declare global {