8523065529

Committed 02 Apr 2024 12:49PM UTC coverage: 97.728% (+0.1%) from 97.599%

Build # 8523065529

Build Type

Pull #1086

github

Committed by

web-flow

Commit Message

Merge ea8e9f720 into 3fab0c108

Pull Request Pull Request #1086: Add date picker component

Run Details

3444 of 3652 branches covered (94.3%)

Branch coverage included in aggregate %.

898 of 902 new or added lines in 10 files covered. (99.56%)

4 existing lines in 1 file now uncovered.

21500 of 21872 relevant lines covered (98.3%)

489.95 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.51

/src/components/focus-trap/focus-trap.ts

import { LitElement, css, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';

import { registerComponent } from '../common/definitions/register.js';
import { isDefined } from '../common/util.js';

/**
 *
 * @element igc-focus-trap
 *
 * @slot - The content of the focus trap component
 */
export default class IgcFocusTrapComponent extends LitElement {
  public static readonly tagName = 'igc-focus-trap';
  public static override styles = css`
    :host {
      display: contents;
    }
  `;

  /* blazorSuppress */
  public static register() {
    registerComponent(this);
  }

  @state()
  protected _focused = false;

  /**
   * Whether to manage focus state for the slotted children.
   * @attr disabled
   */
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  /**
   * Whether focus in currently inside the trap component.
   */
  public get focused() {
    return this._focused;
  }

  /** An array of focusable elements including elements in Shadow roots */
  public get focusableElements() {
    return Array.from(getFocusableElements<HTMLElement>(this));
  }

  constructor() {
    super();

    this.addEventListener('focusin', this.onFocusIn);
    this.addEventListener('focusout', this.onFocusOut);
  }

  private onFocusIn() {
    this._focused = true;
  }

  private onFocusOut() {
    this._focused = false;
  }

  protected focusFirstElement() {
    this.focusableElements.at(0)?.focus();
  }

  protected focusLastElement() {
    this.focusableElements.at(-1)?.focus();
  }

  protected override render() {
    const tabStop = !this.focused || this.disabled ? -1 : 0;

    return html`
      <div
        id="start"
        tabindex=${tabStop}
        @focus=${this.disabled ? nothing : this.focusLastElement}
      ></div>
      <slot></slot>
      <div
        id="end"
        tabindex=${tabStop}
        @focus=${this.disabled ? nothing : this.focusFirstElement}
      ></div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-focus-trap': IgcFocusTrapComponent;
  }
}

const defaultSelectors = [
  '[tabindex]',
  'a[href]',
  'button',
  'input',
  'select',
  'textarea',
];

/** Returns whether the element is hidden. */
function isHidden(node: HTMLElement) {
  return (
    node.hasAttribute('hidden') ||
    node.hasAttribute('inert') ||
    (node.hasAttribute('aria-hidden') &&
      node.getAttribute('aria-hidden') !== 'false')
  );
}

/** Returns whether the element is disabled. */
function isDisabled(node: HTMLElement) {
  return node.hasAttribute('disabled') || node.hasAttribute('inert');
}

/**
 * Returns whether the element can be focused.
 */
function isFocusable(node: HTMLElement) {
  if (node.tabIndex === -1 || isHidden(node) || isDisabled(node)) {
    return false;
  }

  return defaultSelectors.some((selector) => node.matches(selector));
}

/**
 * Filter function for the tree walker instance skipping over nodes and their children
 * if the `node` is hidden/disabled or it was already visited and resides in `cache`.
 */
function shouldSkipElements(node: Node, cache?: WeakSet<HTMLElement>) {
  const element = node as HTMLElement;

  return isHidden(element) || isDisabled(element) || cache?.has(element)
    ? NodeFilter.FILTER_REJECT
    : NodeFilter.FILTER_ACCEPT;
}

/** Returns the slotted elements and the parent element containing the slot */
function getSlottedElements(node: HTMLElement) {
  const slot = node as HTMLSlotElement;
  const elements = slot.assignedElements() as HTMLElement[];
  return { elements, parent: elements.at(0)?.parentElement };
}

/**
 * Traverses and yields all focusable elements starting at `root`.
 */
function* getFocusableElements<T extends HTMLElement>(
  root: HTMLElement | ShadowRoot,
  cache?: WeakSet<HTMLElement>
): Generator<T> {
  if (!isDefined(globalThis.document)) {
    return;
  }

  let node: T;
  cache = cache ?? new WeakSet<HTMLElement>();

  const visitor = document.createTreeWalker(
    root,
    NodeFilter.SHOW_ELEMENT,
    (node) => shouldSkipElements(node, cache)
  );

  while ((node = visitor.nextNode() as T)) {
    if (cache.has(node)) {
      continue;
    }

    if (node.shadowRoot) {
      yield* getFocusableElements(node.shadowRoot, cache);
      continue;
    }

    if (node.tagName === 'SLOT') {
      const { elements, parent } = getSlottedElements(node);

      if (elements.length > 0) {
        for (const element of elements) {
          yield* getFocusableElements(parent!, cache);
          cache.add(element);
        }
      }
      continue;
    }

    if (isFocusable(node)) {
      yield node;
    }
  }
}

1	import { LitElement, css, html, nothing } from 'lit';	26✔
2	import { property, state } from 'lit/decorators.js';	26✔
3		26✔
4	import { registerComponent } from '../common/definitions/register.js';	26✔
5	import { isDefined } from '../common/util.js';	26✔
6		26✔
7	/**	26✔
8	*	26✔
9	* @element igc-focus-trap	26✔
10	*	26✔
11	* @slot - The content of the focus trap component	26✔
12	*/	26✔
13	export default class IgcFocusTrapComponent extends LitElement {	26✔
14	public static readonly tagName = 'igc-focus-trap';	26✔
15	public static override styles = css`	26✔
16	:host {	26✔
17	display: contents;	26✔
18	}	26✔
19	`;	26✔
20		26✔
21	/* blazorSuppress */	26✔
22	public static register() {	26✔
23	registerComponent(this);	3✔
24	}	3✔
25		26✔
26	@state()	26✔
27	protected _focused = false;	26✔
28		26✔
29	/**	26✔
30	* Whether to manage focus state for the slotted children.	26✔
31	* @attr disabled	26✔
32	*/	26✔
33	@property({ type: Boolean, reflect: true })	26✔
34	public disabled = false;	26✔
35		26✔
36	/**	26✔
37	* Whether focus in currently inside the trap component.	26✔
38	*/	26✔
39	public get focused() {	26✔
40	return this._focused;	95✔
41	}	95✔
42		26✔
43	/** An array of focusable elements including elements in Shadow roots */	26✔
44	public get focusableElements() {	26✔
45	return Array.from(getFocusableElements<HTMLElement>(this));	9✔
46	}	9✔
47		26✔
48	constructor() {	26✔
49	super();	67✔
50		67✔
51	this.addEventListener('focusin', this.onFocusIn);	67✔
52	this.addEventListener('focusout', this.onFocusOut);	67✔
53	}	67✔
54		26✔
55	private onFocusIn() {	26✔
56	this._focused = true;	6✔
57	}	6✔
58		26✔
59	private onFocusOut() {	26✔
60	this._focused = false;	6✔
61	}	6✔
62		26✔
63	protected focusFirstElement() {	26✔
64	this.focusableElements.at(0)?.focus();	2✔
65	}	2✔
66		26✔
67	protected focusLastElement() {	26✔
68	this.focusableElements.at(-1)?.focus();	2✔
69	}	2✔
70		26✔
71	protected override render() {	26✔
72	const tabStop = !this.focused \|\| this.disabled ? -1 : 0;	91✔
73		91✔
74	return html`	91✔
75	<div	91✔
76	id="start"	91✔
77	tabindex=${tabStop}	91✔
78	@focus=${this.disabled ? nothing : this.focusLastElement}	91✔
79	></div>	91✔
80	<slot></slot>	91✔
81	<div	91✔
82	id="end"	91✔
83	tabindex=${tabStop}	91✔
84	@focus=${this.disabled ? nothing : this.focusFirstElement}	91✔
85	></div>	91✔
86	`;	91✔
87	}	91✔
88	}	26✔
89		26✔
90	declare global {	26✔
91	interface HTMLElementTagNameMap {	26✔
92	'igc-focus-trap': IgcFocusTrapComponent;	26✔
93	}	26✔
94	}	26✔
95		26✔
96	const defaultSelectors = [	26✔
97	'[tabindex]',	26✔
98	'a[href]',	26✔
99	'button',	26✔
100	'input',	26✔
101	'select',	26✔
102	'textarea',	26✔
103	];	26✔
104		26✔
105	/** Returns whether the element is hidden. */	26✔
106	function isHidden(node: HTMLElement) {	710✔
107	return (	710✔
108	node.hasAttribute('hidden') \|\|	710✔
109	node.hasAttribute('inert') \|\|	710✔
110	(node.hasAttribute('aria-hidden') &&	700✔
111	node.getAttribute('aria-hidden') !== 'false')	700✔
112	);	710✔
113	}	710✔
114		26✔
115	/** Returns whether the element is disabled. */	26✔
116	function isDisabled(node: HTMLElement) {	686✔
117	return node.hasAttribute('disabled') \|\| node.hasAttribute('inert');	686✔
118	}	686✔
119		26✔
120	/**	26✔
121	* Returns whether the element can be focused.	26✔
122	*/	26✔
123	function isFocusable(node: HTMLElement) {	618✔
124	if (node.tabIndex === -1 \|\| isHidden(node) \|\| isDisabled(node)) {	618✔
125	return false;	573✔
126	}	573✔
127		45✔
128	return defaultSelectors.some((selector) => node.matches(selector));	45✔
129	}	45✔
130		26✔
131	/**	26✔
132	* Filter function for the tree walker instance skipping over nodes and their children	26✔
133	* if the `node` is hidden/disabled or it was already visited and resides in `cache`.	26✔
134	*/	26✔
135	function shouldSkipElements(node: Node, cache?: WeakSet<HTMLElement>) {	665✔
136	const element = node as HTMLElement;	665✔
137		665✔
138	return isHidden(element) \|\| isDisabled(element) \|\| cache?.has(element)	665✔
139	? NodeFilter.FILTER_REJECT	665✔
140	: NodeFilter.FILTER_ACCEPT;	665✔
141	}	665✔
142		26✔
143	/** Returns the slotted elements and the parent element containing the slot */	26✔
144	function getSlottedElements(node: HTMLElement) {	5✔
145	const slot = node as HTMLSlotElement;	5✔
146	const elements = slot.assignedElements() as HTMLElement[];	5✔
147	return { elements, parent: elements.at(0)?.parentElement };	5✔
148	}	5✔
149		26✔
150	/**	26✔
151	* Traverses and yields all focusable elements starting at `root`.	26✔
152	*/	26✔
153	function* getFocusableElements<T extends HTMLElement>(	24✔
154	root: HTMLElement \| ShadowRoot,	24✔
155	cache?: WeakSet<HTMLElement>	24✔
156	): Generator<T> {	24✔
157	if (!isDefined(globalThis.document)) {	24!
NEW 158	return;	×
NEW 159	}	×
160		24✔
161	let node: T;	24✔
162	cache = cache ?? new WeakSet<HTMLElement>();	24✔
163		24✔
164	const visitor = document.createTreeWalker(	24✔
165	root,	24✔
166	NodeFilter.SHOW_ELEMENT,	24✔
167	(node) => shouldSkipElements(node, cache)	24✔
168	);	24✔
169		24✔
170	while ((node = visitor.nextNode() as T)) {	24✔
171	if (cache.has(node)) {	633!
NEW 172	continue;	×
NEW 173	}	×
174		633✔
175	if (node.shadowRoot) {	633✔
176	yield* getFocusableElements(node.shadowRoot, cache);	10✔
177	continue;	10✔
178	}	10✔
179		623✔
180	if (node.tagName === 'SLOT') {	633✔
181	const { elements, parent } = getSlottedElements(node);	5✔
182		5✔
183	if (elements.length > 0) {	5✔
184	for (const element of elements) {	5✔
185	yield* getFocusableElements(parent!, cache);	5✔
186	cache.add(element);	5✔
187	}	5✔
188	}	5✔
189	continue;	5✔
190	}	5✔
191		618✔
192	if (isFocusable(node)) {	633✔
193	yield node;	45✔
194	}	45✔
195	}	633✔
196	}	24✔

IgniteUI / igniteui-webcomponents / 8523065529

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous