fix(menu,select): fix final aria issues

PiperOrigin-RevId: 568326002

docs/components/menu.md

@@ -277,7 +277,7 @@ The role of the `md-list` inside the menu can be set with the `type` attribute.
 The role of each individual `md-menu-item` can also be set with the `type`
 attribute. Anything else slotted into the menu that is not a list item in most
 cases should be set to `role="none"`, and `md-divider` should have
-`role="separator"`.
+`role="separator"` and `tabindex="-1"`.
 
 ```html
 <!--
@@ -301,7 +301,7 @@ cases should be set to `role="none"`, and `md-divider` should have
   <md-menu-item type="option" id="0">
     <div slot="headline">Alabama</div>
   </md-menu-item>
-  <md-divider role="separator"></md-divider>
+  <md-divider role="separator" tabindex="-1"></md-divider>
   <md-menu-item type="option" id="1" selected aria-selected="true">
     <div slot="headline">Alabama</div>
   </md-menu-item>

menu/demo/stories.ts

@@ -150,9 +150,6 @@ const linkable: MaterialStoryInit<StoryKnobs> = {
   styles: sharedStyle,
   render(knobs) {
     const items = fruitNames.map((name, index) => {
-      // we want to render dividers between items, so we need to know whether
-      // it's the last item or not.
-      const isLastItem = index === fruitNames.length - 1;
       return html`
         <md-menu-item
             id=${index}
@@ -165,7 +162,10 @@ const linkable: MaterialStoryInit<StoryKnobs> = {
             ${knobs['link icon']}
           </md-icon>
         </md-menu-item>
-        ${!isLastItem ? html`<md-divider role="separator"></md-divider>` : ''}`;
+        ${
+          index === 2 ?
+              html`<md-divider role="separator" tabindex="-1"></md-divider>` :
+              ''}`;
     });
 
     return html`
@@ -471,8 +471,8 @@ function displayCloseEvent(event: CloseMenuEvent) {
 
 function setButtonAriaExpandedFalse(e: Event) {
   const root = (e.target as HTMLElement).getRootNode() as ShadowRoot;
-  // get the button element and set aria-expaned="false" if exists
-  root.querySelector('#button')?.setAttribute('aria-expanded', 'false');
+  // get the button element and remove aria-expaned if exists
+  root.querySelector('#button')?.removeAttribute('aria-expanded');
 }
 
 /** Menu stories. */

menu/internal/menu.ts

@@ -7,7 +7,7 @@
 import '../../focus/md-focus-ring.js';
 import '../../elevation/elevation.js';
 
-import {html, isServer, LitElement} from 'lit';
+import {html, isServer, LitElement, PropertyValues} from 'lit';
 import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
@@ -345,6 +345,19 @@ export abstract class Menu extends LitElement {
     return this.listController.items;
   }
 
+  protected override willUpdate(changed: PropertyValues<Menu>) {
+    if (!changed.has('open')) {
+      return;
+    }
+
+    if (this.open) {
+      this.removeAttribute('aria-hidden');
+      return;
+    }
+
+    this.setAttribute('aria-hidden', 'true');
+  }
+
   protected override render() {
     return this.renderSurface();
   }
@@ -363,7 +376,6 @@ export abstract class Menu extends LitElement {
             ${this.renderMenuItems()}
           </div>
         </div>
-        ${this.renderFocusRing()}
        </div>
      `;
   }
@@ -390,14 +402,6 @@ export abstract class Menu extends LitElement {
     return html`<md-elevation part="elevation"></md-elevation>`;
   }
 
-  /**
-   * Renders the focus ring component.
-   */
-  private renderFocusRing() {
-    return html`<md-focus-ring part="focus-ring" .control=${this}>
-      </md-focus-ring>`;
-  }
-
   private getSurfaceClasses() {
     return {
       open: this.open,

select/demo/demo.ts

@@ -15,7 +15,7 @@ import {stories, StoryKnobs} from './stories.js';
 const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Select', [
       new Knob('md-select', {ui: title()}),
-      new Knob('label', {ui: textInput(), defaultValue: ''}),
+      new Knob('label', {ui: textInput(), defaultValue: 'Fruit'}),
       new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),
       new Knob('quick', {ui: boolInput(), defaultValue: false}),
       new Knob('required', {ui: boolInput(), defaultValue: false}),

select/demo/stories.ts

@@ -35,6 +35,7 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     return html`
       <md-outlined-select
+          aria-label="select a fruit"
           .label=${knobs.label}
           .quick=${knobs.quick}
           .required=${knobs.required}
@@ -57,6 +58,7 @@ const filled: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     return html`
       <md-filled-select
+          aria-label="select a fruit"
           .label=${knobs.label}
           .quick=${knobs.quick}
           .required=${knobs.required}

select/internal/_shared.scss

@@ -17,6 +17,7 @@
   :host {
     color: unset;
     min-width: 210px;
+    display: flex;
   }
 
   .field {
@@ -26,6 +27,7 @@
 
   .select {
     position: relative;
+    flex-direction: column;
   }
 
   .icon.trailing svg,
@@ -64,6 +66,7 @@
     min-width: inherit;
     width: inherit;
     max-width: inherit;
+    display: flex;
   }
 
   .field,

select/internal/select.ts

@@ -12,6 +12,8 @@ import {classMap} from 'lit/directives/class-map.js';
 import {html as staticHtml, StaticValue} from 'lit/static-html.js';
 
 import {Field} from '../../field/internal/field.js';
+import {ARIAMixinStrict} from '../../internal/aria/aria.js';
+import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../internal/controller/events.js';
 import {getActiveItem} from '../../list/internal/list-navigation-helpers.js';
 import {CloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/internal/controllers/shared.js';
@@ -36,6 +38,10 @@ const VALUE = Symbol('value');
  * closed.
  */
 export abstract class Select extends LitElement {
+  static {
+    requestUpdateOnAriaChange(Select);
+  }
+
   /** @nocollapse  */
   static readonly formAssociated = true;
 
@@ -423,7 +429,9 @@ export abstract class Select extends LitElement {
           part="field"
           id="field"
           tabindex=${this.disabled ? '-1' : '0'}
-          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
+          aria-describedby="description"
+          aria-expanded=${this.open ? 'true' : nothing}
           aria-controls="listbox"
           class="field"
           label=${this.label}
@@ -440,7 +448,8 @@ export abstract class Select extends LitElement {
           @click=${this.handleClick}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}>
-        ${this.renderFieldContent()}
+         ${this.renderFieldContent()}
+         <div id="description" slot="aria-describedby"></div>
       </${this.fieldTag}>`;
   }
 
@@ -484,9 +493,9 @@ export abstract class Select extends LitElement {
       <md-menu
           id="listbox"
           default-focus="none"
-          tabindex="-1"
           role="listbox"
-          aria-hidden=${this.open ? nothing : 'true'}
+          tabindex="-1"
+          aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
           stay-open-on-focusout
           part="menu"
           exportparts="focus-ring: menu-focus-ring"