@aurelia-mdc-web/all 9.3.0-au2 → 9.3.2-au2

package/src/data-table/styles/_index.scss

@@ -0,0 +1 @@
+@forward './mdc-data-table.scss';

package/src/data-table/styles/mdc-data-table.import.scss

@@ -0,0 +1 @@
+@forward './mdc-data-table.scss';

package/src/data-table/styles/mdc-data-table.scss

@@ -0,0 +1,64 @@
+@use "@material/data-table";
+
+
+.mdc-data-table__header-cell {
+  &--resizing {
+    .mdc-data-table__header-cell__hover-indicator {
+      display: block!important;
+    }
+
+    // this puts the column above the other columns so that resizing indicator is visible
+    z-index: 2 !important;
+  }
+
+  &__resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: col-resize;
+    z-index: 1;
+    background-color: transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    transition: background-color 0.2s;
+  }
+
+  .mdc-data-table__header-cell__hover-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    left: 0;
+    background-color: data-table.$row-hover-fill-color;
+    display: none;
+  }
+
+  .mdc-data-table__header-cell__resize-handle-indicator {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background-color: var(--mdc-theme-primary);
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  &:has(.mdc-data-table__header-cell__resize-handle-indicator) {
+    overflow: visible;
+  }
+}
+
+.mdc-data-table:not(.mdc-data-table--column-resized) {
+  .mdc-data-table__header-cell[resizeable] {
+    &:hover {
+      .mdc-data-table__header-cell__hover-indicator {
+        display: block;
+      }
+    }
+  }
+}
+
+.mdc-data-table--column-resized {
+  user-select: none;
+}

package/src/dialog/mdc-dialog-actions.ts

@@ -1,23 +1,23 @@
-import { customElement, inject, slotted } from 'aurelia';
-
-/**
- * Optional. Footer area containing the dialog's action buttons.
- * @selector mdc-dialog-actions
- */
-@inject(Element)
-@customElement({ name: 'mdc-dialog-actions', template: '<template class="mdc-dialog__actions"><au-slot></au-slot></template>' })
-export class MdcDialogActions {
-  @slotted({ query: '.mdc-button' })
-  buttons: HTMLElement[];
-  buttonsChanged() {
-    for (let i = 0; i < this.buttons.length; ++i) {
-      this.buttons[i].classList.add('mdc-dialog__button');
-    }
-  }
-
-  attached() {
-    if (this.buttons) {
-      this.buttonsChanged();
-    }
-  }
-}
+import { customElement, inject, slotted } from 'aurelia';
+
+/**
+ * Optional. Footer area containing the dialog's action buttons.
+ * @selector mdc-dialog-actions
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog-actions', template: '<template class="mdc-dialog__actions"><au-slot></au-slot></template>' })
+export class MdcDialogActions {
+  @slotted({ query: '.mdc-button' })
+  buttons: HTMLElement[];
+  buttonsChanged() {
+    for (let i = 0; i < this.buttons.length; ++i) {
+      this.buttons[i].classList.add('mdc-dialog__button');
+    }
+  }
+
+  attached() {
+    if (this.buttons) {
+      this.buttonsChanged();
+    }
+  }
+}

package/src/dialog/mdc-dialog-content.ts

@@ -1,11 +1,11 @@
-import { customElement, inject } from 'aurelia';
-
-/**
- * Optional. Primary content area. May contain a list, a form, or prose.
- * @selector mdc-dialog-content
- */
-@inject(Element)
-@customElement({ name: 'mdc-dialog-content', template: '<template class="mdc-dialog__content"><au-slot></au-slot></template>' })
-export class MdcDialogContent {
-  constructor(public root: HTMLElement) { }
-}
+import { customElement, inject } from 'aurelia';
+
+/**
+ * Optional. Primary content area. May contain a list, a form, or prose.
+ * @selector mdc-dialog-content
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog-content', template: '<template class="mdc-dialog__content"><au-slot></au-slot></template>' })
+export class MdcDialogContent {
+  constructor(public root: HTMLElement) { }
+}

package/src/dialog/mdc-dialog-service.ts

@@ -49,6 +49,9 @@ export class MdcDialogService {
     };
 
     const dialogContainer = document.createElement('div');
+    if (!this.au.container.has(options.viewModel, false)) {
+      this.au.container.register(options.viewModel);
+    }
     const def = CustomElement.getDefinition(options.viewModel);
     dialogContainer.innerHTML = `<${def.name}></${def.name}>`;
     document.body.appendChild(dialogContainer);

package/src/dialog/mdc-dialog-title.ts

@@ -1,8 +1,8 @@
-import { customElement } from 'aurelia';
-
-/**
- * Optional. The area containing the dialog's title.
- * @selector mdc-dialog-title
- */
-@customElement({ name: 'mdc-dialog-title', template: '<template class="mdc-dialog__title"><au-slot></au-slot></template>' })
-export class MdcDialogTitle { }
+import { customElement } from 'aurelia';
+
+/**
+ * Optional. The area containing the dialog's title.
+ * @selector mdc-dialog-title
+ */
+@customElement({ name: 'mdc-dialog-title', template: '<template class="mdc-dialog__title"><au-slot></au-slot></template>' })
+export class MdcDialogTitle { }

package/src/dialog/mdc-dialog.html

@@ -1,14 +1,14 @@
-<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
-  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
-  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
-  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
-  <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
-      aria-describedby="${contentId}">
-      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
-        data-mdc-dialog-action="close">close</button>
-      <au-slot></au-slot>
-    </div>
-  </div>
-  <div class="mdc-dialog__scrim"></div>
-</template>
+<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
+  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
+  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
+  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
+      aria-describedby="${contentId}">
+      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
+        data-mdc-dialog-action="close">close</button>
+      <au-slot></au-slot>
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</template>

package/src/dialog/mdc-dialog.ts

@@ -1,224 +1,224 @@
-import { MdcComponent, booleanAttr, MdcFocusTrap } from '../base';
-import { MDCDialogFoundation, strings, MDCDialogAdapter, util, MDCDialogCloseEventDetail } from '@material/dialog';
-import { customElement, inject, bindable } from 'aurelia';
-import { closest, matches } from '@material/dom/ponyfill';
-import template from './mdc-dialog.html?raw';
-import { FocusTrap } from '@material/dom/focus-trap';
-
-const LAYOUT_EVENTS = ['resize', 'orientationchange'];
-let dialogId = 0;
-
-strings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();
-strings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();
-strings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();
-strings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();
-
-/**
- * @selector mdc-dialog
- */
-@inject(Element)
-@customElement({ name: 'mdc-dialog', template })
-export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements EventListenerObject {
-
-  id = ++dialogId;
-  contentId = `mdc-dialog-content-${this.id}`;
-  titleId = `mdc-dialog-title-${this.id}`;
-  private buttons!: HTMLElement[]; // assigned in initialize()
-  mdcFocusTrap: MdcFocusTrap;
-
-  /** Action returned when the dialog is closed via the scrim click */
-  @bindable()
-  scrimClickAction: string;
-  scrimClickActionChanged() {
-    this.foundation?.setScrimClickAction(this.scrimClickAction);
-  }
-
-  /** Action returned when the dialog is closed via the ESC key */
-  @bindable()
-  escapeKeyAction: string;
-  escapeKeyActionChanged() {
-    this.foundation?.setEscapeKeyAction(this.escapeKeyAction);
-  }
-
-  @bindable({ set: booleanAttr })
-  fullscreen: boolean;
-
-  @bindable({ set: booleanAttr })
-  sheet: boolean;
-
-  get defaultButton(): HTMLElement | null {
-    return this.root.querySelector<HTMLElement>(`[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);
-  }
-
-  get content(): HTMLElement | null {
-    return this.root.querySelector<HTMLElement>(`${strings.CONTENT_SELECTOR}`);
-  }
-
-  beforeFoundationCreated() {
-    this.buttons = [].slice.call(this.root.querySelectorAll<HTMLElement>(strings.BUTTON_SELECTOR));
-    const content = this.root.querySelector('mdc-dialog-content');
-    content?.setAttribute('id', this.contentId);
-    const title = this.root.querySelector('mdc-dialog-title');
-    title?.setAttribute('id', this.titleId);
-  }
-
-  destroy() {
-    this.handleClosing_();
-    super.destroy();
-  }
-
-  handleClick_(evt: MouseEvent) {
-    this.foundation?.handleClick(evt);
-    return true;
-  }
-
-  handleKeydown_(evt: KeyboardEvent) {
-    this.foundation?.handleKeydown(evt);
-    return true;
-  }
-
-  handleEvent(evt: Event): void {
-    switch (evt.currentTarget) {
-      case window:
-        switch (evt.type) {
-          case 'resize':
-          case 'orientationchange': this.foundation?.layout(); break;
-        }
-        break;
-      case document:
-        switch (evt.type) {
-          case 'keydown': this.foundation?.handleDocumentKeydown(evt as KeyboardEvent); break;
-        }
-        break;
-    }
-  }
-
-  handleOpening_() {
-    LAYOUT_EVENTS.forEach((evtType) => window.addEventListener(evtType, this));
-    document.addEventListener('keydown', this);
-  }
-
-  handleClosing_() {
-    LAYOUT_EVENTS.forEach((evtType) => window.removeEventListener(evtType, this));
-    document.removeEventListener('keydown', this);
-  }
-
-  /** Opens the dialog */
-  open() {
-    this.foundation?.open();
-  }
-
-  /**
-   * Closes the dialog
-   * @param action Action to close the dialog with
-   */
-  close(action = '') {
-    this.foundation?.close(action);
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCDialogAdapter = {
-      addBodyClass: (className) => document.body.classList.add(className),
-      addClass: (className) => this.root.classList.add(className),
-      areButtonsStacked: () => util.areTopsMisaligned(this.buttons),
-      clickDefaultButton: () => {
-        if (this.defaultButton) {
-          this.defaultButton.click();
-        }
-      },
-      eventTargetMatches: (target, selector) =>
-        target ? matches(target as Element, selector) : false,
-      getActionFromEvent: (evt: Event) => {
-        if (!evt.target) {
-          return '';
-        }
-        const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
-        return element?.getAttribute(strings.ACTION_ATTRIBUTE) ?? null;
-      },
-      getInitialFocusEl: () => this.getInitialFocusEl(),
-      hasClass: (className) => this.root.classList.contains(className),
-      isContentScrollable: () => util.isScrollable(this.content),
-      notifyClosed: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSED_EVENT, action ? { action } : {}),
-      notifyClosing: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSING_EVENT, action ? { action } : {}),
-      notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
-      notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
-      releaseFocus: () => {
-        this.mdcFocusTrap?.releaseFocus();
-      },
-      removeBodyClass: (className) => document.body.classList.remove(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      reverseButtons: () => {
-        this.buttons.reverse();
-        this.buttons.forEach((button) => {
-          button.parentElement!.appendChild(button);
-        });
-      },
-      trapFocus: () => {
-        this.mdcFocusTrap?.trapFocus();
-      },
-      registerContentEventHandler: (evt, handler) => {
-        if (this.content instanceof HTMLElement) {
-          this.content.addEventListener(evt, handler);
-        }
-      },
-      deregisterContentEventHandler: (evt, handler) => {
-        if (this.content instanceof HTMLElement) {
-          this.content.removeEventListener(evt, handler);
-        }
-      },
-      isScrollableContentAtTop: () => {
-        return util.isScrollAtTop(this.content);
-      },
-      isScrollableContentAtBottom: () => {
-        return util.isScrollAtBottom(this.content);
-      },
-      registerWindowEventHandler: (evt, handler) => {
-        window.addEventListener(evt, handler);
-      },
-      deregisterWindowEventHandler: (evt, handler) => {
-        window.removeEventListener(evt, handler);
-      },
-    };
-    return new MDCDialogFoundation(adapter);
-  }
-
-  getInitialFocusEl = (): HTMLElement | null => {
-    return this.root.querySelector(`[${strings.INITIAL_FOCUS_ATTRIBUTE}] input, [${strings.INITIAL_FOCUS_ATTRIBUTE}] .mdc-select__anchor`);
-  };
-}
-
-/** @hidden */
-export interface IMdcDialogElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcDialog;
-    };
-  };
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(FocusTrap.prototype as any).getFocusableElements = function (root: HTMLElement): HTMLElement[] {
-  const focusableEls =
-    [].slice.call(root.querySelectorAll(
-      '[autofocus], [tabindex], a, input, textarea, select, button, .mdc-select__anchor')) as
-    HTMLElement[];
-  return focusableEls.filter((el) => {
-    const isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
-      el.getAttribute('disabled') !== null ||
-      el.getAttribute('hidden') !== null ||
-      el.getAttribute('aria-hidden') === 'true';
-    const isTabbableAndVisible = (el.tabIndex >= 0 || el.classList.contains('mdc-select__anchor')) &&
-      el.getBoundingClientRect().width > 0 &&
-      !el.classList.contains('mdc-dom-focus-sentinel') && !isDisabledOrHidden;
-
-    let isProgrammaticallyHidden = false;
-    if (isTabbableAndVisible) {
-      const style = getComputedStyle(el);
-      isProgrammaticallyHidden =
-        style.display === 'none' || style.visibility === 'hidden';
-    }
-    return isTabbableAndVisible && !isProgrammaticallyHidden;
-  });
-};
+import { MdcComponent, booleanAttr, MdcFocusTrap } from '../base';
+import { MDCDialogFoundation, strings, MDCDialogAdapter, util, MDCDialogCloseEventDetail } from '@material/dialog';
+import { customElement, inject, bindable } from 'aurelia';
+import { closest, matches } from '@material/dom/ponyfill';
+import template from './mdc-dialog.html?raw';
+import { FocusTrap } from '@material/dom/focus-trap';
+
+const LAYOUT_EVENTS = ['resize', 'orientationchange'];
+let dialogId = 0;
+
+strings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();
+strings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();
+strings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();
+strings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();
+
+/**
+ * @selector mdc-dialog
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog', template })
+export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements EventListenerObject {
+
+  id = ++dialogId;
+  contentId = `mdc-dialog-content-${this.id}`;
+  titleId = `mdc-dialog-title-${this.id}`;
+  private buttons!: HTMLElement[]; // assigned in initialize()
+  mdcFocusTrap: MdcFocusTrap;
+
+  /** Action returned when the dialog is closed via the scrim click */
+  @bindable()
+  scrimClickAction: string;
+  scrimClickActionChanged() {
+    this.foundation?.setScrimClickAction(this.scrimClickAction);
+  }
+
+  /** Action returned when the dialog is closed via the ESC key */
+  @bindable()
+  escapeKeyAction: string;
+  escapeKeyActionChanged() {
+    this.foundation?.setEscapeKeyAction(this.escapeKeyAction);
+  }
+
+  @bindable({ set: booleanAttr })
+  fullscreen: boolean;
+
+  @bindable({ set: booleanAttr })
+  sheet: boolean;
+
+  get defaultButton(): HTMLElement | null {
+    return this.root.querySelector<HTMLElement>(`[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);
+  }
+
+  get content(): HTMLElement | null {
+    return this.root.querySelector<HTMLElement>(`${strings.CONTENT_SELECTOR}`);
+  }
+
+  beforeFoundationCreated() {
+    this.buttons = [].slice.call(this.root.querySelectorAll<HTMLElement>(strings.BUTTON_SELECTOR));
+    const content = this.root.querySelector('mdc-dialog-content');
+    content?.setAttribute('id', this.contentId);
+    const title = this.root.querySelector('mdc-dialog-title');
+    title?.setAttribute('id', this.titleId);
+  }
+
+  destroy() {
+    this.handleClosing_();
+    super.destroy();
+  }
+
+  handleClick_(evt: MouseEvent) {
+    this.foundation?.handleClick(evt);
+    return true;
+  }
+
+  handleKeydown_(evt: KeyboardEvent) {
+    this.foundation?.handleKeydown(evt);
+    return true;
+  }
+
+  handleEvent(evt: Event): void {
+    switch (evt.currentTarget) {
+      case window:
+        switch (evt.type) {
+          case 'resize':
+          case 'orientationchange': this.foundation?.layout(); break;
+        }
+        break;
+      case document:
+        switch (evt.type) {
+          case 'keydown': this.foundation?.handleDocumentKeydown(evt as KeyboardEvent); break;
+        }
+        break;
+    }
+  }
+
+  handleOpening_() {
+    LAYOUT_EVENTS.forEach((evtType) => window.addEventListener(evtType, this));
+    document.addEventListener('keydown', this);
+  }
+
+  handleClosing_() {
+    LAYOUT_EVENTS.forEach((evtType) => window.removeEventListener(evtType, this));
+    document.removeEventListener('keydown', this);
+  }
+
+  /** Opens the dialog */
+  open() {
+    this.foundation?.open();
+  }
+
+  /**
+   * Closes the dialog
+   * @param action Action to close the dialog with
+   */
+  close(action = '') {
+    this.foundation?.close(action);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCDialogAdapter = {
+      addBodyClass: (className) => document.body.classList.add(className),
+      addClass: (className) => this.root.classList.add(className),
+      areButtonsStacked: () => util.areTopsMisaligned(this.buttons),
+      clickDefaultButton: () => {
+        if (this.defaultButton) {
+          this.defaultButton.click();
+        }
+      },
+      eventTargetMatches: (target, selector) =>
+        target ? matches(target as Element, selector) : false,
+      getActionFromEvent: (evt: Event) => {
+        if (!evt.target) {
+          return '';
+        }
+        const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
+        return element?.getAttribute(strings.ACTION_ATTRIBUTE) ?? null;
+      },
+      getInitialFocusEl: () => this.getInitialFocusEl(),
+      hasClass: (className) => this.root.classList.contains(className),
+      isContentScrollable: () => util.isScrollable(this.content),
+      notifyClosed: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSED_EVENT, action ? { action } : {}),
+      notifyClosing: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSING_EVENT, action ? { action } : {}),
+      notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
+      notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
+      releaseFocus: () => {
+        this.mdcFocusTrap?.releaseFocus();
+      },
+      removeBodyClass: (className) => document.body.classList.remove(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      reverseButtons: () => {
+        this.buttons.reverse();
+        this.buttons.forEach((button) => {
+          button.parentElement!.appendChild(button);
+        });
+      },
+      trapFocus: () => {
+        this.mdcFocusTrap?.trapFocus();
+      },
+      registerContentEventHandler: (evt, handler) => {
+        if (this.content instanceof HTMLElement) {
+          this.content.addEventListener(evt, handler);
+        }
+      },
+      deregisterContentEventHandler: (evt, handler) => {
+        if (this.content instanceof HTMLElement) {
+          this.content.removeEventListener(evt, handler);
+        }
+      },
+      isScrollableContentAtTop: () => {
+        return util.isScrollAtTop(this.content);
+      },
+      isScrollableContentAtBottom: () => {
+        return util.isScrollAtBottom(this.content);
+      },
+      registerWindowEventHandler: (evt, handler) => {
+        window.addEventListener(evt, handler);
+      },
+      deregisterWindowEventHandler: (evt, handler) => {
+        window.removeEventListener(evt, handler);
+      },
+    };
+    return new MDCDialogFoundation(adapter);
+  }
+
+  getInitialFocusEl = (): HTMLElement | null => {
+    return this.root.querySelector(`[${strings.INITIAL_FOCUS_ATTRIBUTE}] input, [${strings.INITIAL_FOCUS_ATTRIBUTE}] .mdc-select__anchor, button[${strings.INITIAL_FOCUS_ATTRIBUTE}], .mdc-button[${strings.INITIAL_FOCUS_ATTRIBUTE}]`);
+  };
+}
+
+/** @hidden */
+export interface IMdcDialogElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcDialog;
+    };
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(FocusTrap.prototype as any).getFocusableElements = function (root: HTMLElement): HTMLElement[] {
+  const focusableEls =
+    [].slice.call(root.querySelectorAll(
+      '[autofocus], [tabindex], a, input, textarea, select, button, .mdc-select__anchor')) as
+    HTMLElement[];
+  return focusableEls.filter((el) => {
+    const isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
+      el.getAttribute('disabled') !== null ||
+      el.getAttribute('hidden') !== null ||
+      el.getAttribute('aria-hidden') === 'true';
+    const isTabbableAndVisible = (el.tabIndex >= 0 || el.classList.contains('mdc-select__anchor')) &&
+      el.getBoundingClientRect().width > 0 &&
+      !el.classList.contains('mdc-dom-focus-sentinel') && !isDisabledOrHidden;
+
+    let isProgrammaticallyHidden = false;
+    if (isTabbableAndVisible) {
+      const style = getComputedStyle(el);
+      isProgrammaticallyHidden =
+        style.display === 'none' || style.visibility === 'hidden';
+    }
+    return isTabbableAndVisible && !isProgrammaticallyHidden;
+  });
+};