fix: remove role attribute from elements

PiperOrigin-RevId: 526712160
material-components · Apr 24, 2023 · 0a35ff5 · 0a35ff5
1 parent eb24edf
commit 0a35ff5
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 33 deletions.
diff --git a/list/lib/list.ts b/list/lib/list.ts
@@ -7,7 +7,7 @@
 // Required for @ariaProperty
 // tslint:disable:no-new-decorators
 
-import {html, LitElement, TemplateResult} from 'lit';
+import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
@@ -46,11 +46,7 @@ export class List extends LitElement {
   @property({attribute: 'data-aria-activedescendant', noAccessor: true})
   ariaActivedescendant!: string;
 
-  @ariaProperty
-  // tslint:disable-next-line
-  @property({attribute: 'data-role', noAccessor: true})
-  // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-  role: ARIARole = 'list';
+  @property() type: ARIARole|'' = 'list';
 
   /**
    * The tabindex of the underlying list.
@@ -82,7 +78,7 @@ export class List extends LitElement {
     <ul class="md3-list ${classMap(this.getListClasses())}"
         aria-label="${ifDefined(this.ariaLabel)}"
         tabindex=${this.listTabIndex}
-        role=${this.role}
+        role=${this.type || nothing}
         @keydown=${this.handleKeydown}
         >
       ${this.renderContent()}

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
@@ -33,11 +33,6 @@ export type ListItem = ListItemSelf&HTMLElement;
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemEl extends LitElement implements ListItem {
-  @ariaProperty
-  // tslint:disable-next-line
-  @property({attribute: 'data-role', noAccessor: true})
-  // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-  role: ARIARole = 'listitem';
   @ariaProperty
   @property({attribute: 'data-aria-selected', noAccessor: true})
   override ariaSelected!: 'true'|'false';
@@ -97,6 +92,7 @@ export class ListItemEl extends LitElement implements ListItem {
   @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;
   @query('.list-item') protected listItemRoot!: HTMLElement;
 
+  protected readonly listItemRole: ARIARole = 'listitem';
   @state() protected showFocusRing = false;
   @state() protected showRipple = false;
 
@@ -151,7 +147,7 @@ export class ListItemEl extends LitElement implements ListItem {
     return html`
       <li
           tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.role}
+          role=${this.listItemRole}
           aria-selected=${this.ariaSelected || nothing}
           aria-checked=${this.ariaChecked || nothing}
           class="list-item ${classMap(this.getRenderClasses())}"

diff --git a/list/lib/listitemlink/list-item-link.ts b/list/lib/listitemlink/list-item-link.ts
@@ -28,7 +28,7 @@ export class ListItemLink extends ListItemEl {
     return html`
       <a
           tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.role}
+          role=${this.listItemRole}
           aria-selected=${this.ariaSelected || nothing}
           aria-checked=${this.ariaChecked || nothing}
           class="list-item ${classMap(this.getRenderClasses())}"
@@ -43,4 +43,4 @@ export class ListItemLink extends ListItemEl {
           @keydown=${this.onKeydown}
           ${ripple(this.getRipple)}>${content}</a>`;
   }
-}
+}
diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts
@@ -131,9 +131,7 @@ export abstract class Menu extends LitElement {
   /**
    * The role of the underlying list element.
    */
-  @ariaProperty
-  @property({attribute: 'data-role', noAccessor: true})
-  override role: ARIARole = 'menu';
+  @property() type: ARIARole = 'menu';
   /**
    * The max time between the keystrokes of the typeahead menu behavior before
    * it clears the typeahead buffer.
@@ -270,7 +268,7 @@ export abstract class Menu extends LitElement {
     return html`
       <md-list
           .ariaLabel=${this.ariaLabel}
-          .role=${this.role}
+          type=${this.type}
           listTabIndex=${this.listTabIndex}
           @focus=${this.handleListFocus}
           @blur=${this.handleListBlur}

diff --git a/menu/lib/menuitem/menu-item.ts b/menu/lib/menuitem/menu-item.ts
@@ -14,7 +14,6 @@ import {CLOSE_REASON, DefaultCloseMenuEvent, isClosableKey, MenuItem} from '../s
  * @fires close-menu {CloseMenuEvent}
  */
 export class MenuItemEl extends ListItemEl implements MenuItem {
-  override role: ARIARole = 'menuitem';
   /**
    * READONLY: self-identifies as a menu item and sets its identifying attribute
    */
@@ -31,6 +30,8 @@ export class MenuItemEl extends ListItemEl implements MenuItem {
    */
   protected keepOpenOnClick = false;
 
+  protected override readonly listItemRole: ARIARole = 'menuitem';
+
   protected override onClick() {
     if (this.keepOpen || this.keepOpenOnClick) return;
 

diff --git a/menu/lib/menuitemlink/menu-item-link.ts b/menu/lib/menuitemlink/menu-item-link.ts
@@ -7,14 +7,12 @@
 import {property} from 'lit/decorators.js';
 
 import {ListItemLink} from '../../../list/lib/listitemlink/list-item-link.js';
-import {ARIARole} from '../../../types/aria.js';
 import {CLOSE_REASON, DefaultCloseMenuEvent, isClosableKey, MenuItem, SELECTION_KEY} from '../shared.js';
 
 /**
  * @fires close-menu {CloseMenuEvent}
  */
 export class MenuItemLink extends ListItemLink implements MenuItem {
-  override role: ARIARole = 'menuitem';
   /**
    * READONLY: self-identifies as a menu item and sets its identifying attribute
    */

diff --git a/menu/lib/submenuitem/sub-menu-item.ts b/menu/lib/submenuitem/sub-menu-item.ts
@@ -8,7 +8,6 @@ import {html} from 'lit';
 import {property, queryAssignedElements} from 'lit/decorators.js';
 
 import {List} from '../../../list/lib/list.js';
-import {ARIARole} from '../../../types/aria.js';
 import {Corner, Menu} from '../menu.js';
 import {MenuItemEl} from '../menuitem/menu-item.js';
 import {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';
@@ -26,7 +25,6 @@ function stopPropagation(e: Event) {
  *     activate the typeahead functionality when a submenu closes
  */
 export class SubMenuItem extends MenuItemEl {
-  override role: ARIARole = 'menuitem';
   /**
    * The anchorCorner to set on the submenu.
    */

diff --git a/select/lib/select.ts b/select/lib/select.ts
@@ -275,7 +275,7 @@ export abstract class Select extends LitElement {
           id="listbox"
           default-focus="NONE"
           listTabIndex="-1"
-          list-role="listbox"
+          type="listbox"
           stay-open-on-focusout
           .anchor=${this.field}
           .open=${this.open}

diff --git a/select/lib/selectoption/select-option.ts b/select/lib/selectoption/select-option.ts
@@ -20,8 +20,6 @@ import {RequestDeselectionEvent, RequestSelectionEvent, SelectOption} from '../s
  * md-select to deselect this element when `selected` changed to `false`.
  */
 export class SelectOptionEl extends MenuItemEl implements SelectOption {
-  override role: ARIARole = 'option';
-
   /**
    * Form value of the option.
    */
@@ -32,6 +30,8 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
    */
   @property({type: Boolean, reflect: true}) selected = false;
 
+  protected override readonly listItemRole: ARIARole = 'option';
+
   override willUpdate(changed: PropertyValues<this>) {
     if (changed.has('selected')) {
       // Synchronize selected -> active but not the other way around because

diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -15,7 +15,7 @@ import {redispatchEvent} from '../../controller/events.js';
 import {FormController, getFormValue} from '../../controller/form-controller.js';
 import {stringConverter} from '../../controller/string-converter.js';
 import {ariaProperty} from '../../decorators/aria-property.js';
-import {ARIAAutoComplete, ARIAExpanded, ARIARole} from '../../types/aria.js';
+import {ARIAAutoComplete, ARIAExpanded} from '../../types/aria.js';
 
 /**
  * Input types that are compatible with the text field.
@@ -125,10 +125,6 @@ export abstract class TextField extends LitElement {
   @ariaProperty  // tslint:disable-line:no-new-decorators
   override ariaLabel!: string;
 
-  @property({attribute: 'data-role', noAccessor: true})
-  @ariaProperty  // tslint:disable-line:no-new-decorators
-  override role: ARIARole|null = null;
-
   // FormElement
   get form() {
     return this.closest('form');
@@ -608,7 +604,6 @@ export abstract class TextField extends LitElement {
        minlength=${this.minLength > -1 ? this.minLength : nothing}
        pattern=${this.pattern || nothing}
        placeholder=${this.placeholder || nothing}
-       role=${this.role || nothing}
        ?readonly=${this.readOnly}
        ?required=${this.required}
        step=${(this.step || nothing) as unknown as number}