DOM Helper

Another set of tools to validate DOM stuff.

This library was generated with Angular CLI version 12.2.0.

Index

• Installation
• Methods
  • The getStyles() Method
  • The getStyle() Method
    • The getStyleBefore() Method
    • The getStyleAfter() Method
  • The isVisible() Method
  • The isAriaHidden() Method
  • The isInert() Method
  • The isBoolean() Method
  • The isNumeric() Method
  • The hasAttribute() Method
  • The getAttributeValue() Method
  • The getAttributeNumericValue() Method
  • The getBooleanValue() Method
  • The getNumericValue() Method
  • The tabbableElements() Method

Installation

1. Install npm package:

   npm install @a11y-ngx/dom-helper --save

2. Import DOMHelperService into your typescript file:

import { DOMHelperService } from '@a11y-ngx/dom-helper';

constructor(private DOMHelper: DOMHelperService) {}

Methods

The getStyles() Method

To get all the element's computed styles.

Accepts two parameters:

• element of type HTMLElement.
• pseudoElement (optional) of type string.

this.DOMHelper.getStyles(element, '::before');

The getStyle() Method

To get the property's value from the element's computed styles.

Accepts three parameters:

• element of type HTMLElement.
• property of type keyof CSSStyleDeclaration.
• pseudoElement (optional) of type string.

this.DOMHelper.getStyle(element, 'visibility'); // => 'visible' / 'hidden' / etc.

The getStyleBefore() Method

A shortcut of the getStyle() method to get the property's ::before pseudo element computed style.

Accepts two parameters:

• element of type HTMLElement.
• property of type keyof CSSStyleDeclaration.

this.DOMHelper.getStyleBefore(element, 'position'); // => 'absolute' / 'relative' / etc.

The getStyleAfter() Method

A shortcut of the getStyle() method to get the property's ::after pseudo element computed style.

Accepts two parameters:

• element of type HTMLElement.
• property of type keyof CSSStyleDeclaration.

this.DOMHelper.getStyleAfter(element, 'zIndex'); // => '100' / etc.

The isVisible() Method

To check for the element's visibility.

It will check for:

• The absence of aria-hidden attribute set to true.
• The absence of inert attribute.
• The element has size (width and height).
• The element has visibility set to 'visible'.

Accepts a single parameter element of type HTMLElement and returns a boolean.

this.DOMHelper.isVisible(element); // => true / false

The isAriaHidden() Method

To check if the aria-hidden attribute is set to true.

Accepts a single parameter element of type HTMLElement and returns a boolean.

this.DOMHelper.isAriaHidden(element); // => true / false

The isInert() Method

To check if the inert attribute is present.

Accepts a single parameter element of type HTMLElement and returns a boolean.

this.DOMHelper.isInert(element); // => true / false

The isBoolean() Method

To check if the given value is boolean or not.

Accepts a single parameter value of type unknown and returns a boolean.

this.DOMHelper.isBoolean('value');   // => false
this.DOMHelper.isBoolean(undefined); // => false
this.DOMHelper.isBoolean(0);         // => false
this.DOMHelper.isBoolean(!0);        // => true
this.DOMHelper.isBoolean('true');    // => true
this.DOMHelper.isBoolean('false');   // => true
this.DOMHelper.isBoolean(false);     // => true

The isNumeric() Method

To check if the given value is numeric or not.

Accepts a single parameter value of type unknown and returns a boolean.

this.DOMHelper.isNumeric('');         // => false
this.DOMHelper.isNumeric(NaN);        // => false
this.DOMHelper.isNumeric('123,25');   // => false
this.DOMHelper.isNumeric(' 123 ');    // => true
this.DOMHelper.isNumeric(' 123.25 '); // => true
this.DOMHelper.isNumeric(123);        // => true

The hasAttribute() Method

To check if the given attribute is present in the element.

Accepts two parameters:

• element of type HTMLElement.
• attribute of type string.

It will return a boolean confirming whether the attribute exists or not.

this.DOMHelper.hasAttribute(element, 'disabled'); // => true / false

The getAttributeValue() Method

To get the value from an attribute.

Accepts two parameters:

• element of type HTMLElement.
• attribute of type string.

It will return the value as a string or null otherwise.

this.DOMHelper.getAttributeValue(element, 'type');     // => 'button' / 'checkbox' / etc.
this.DOMHelper.getAttributeValue(element, 'tabindex'); // => '-1' / null

The getAttributeNumericValue() Method

To check and get the numeric value from an attribute.

Accepts three parameters:

• element of type HTMLElement.
• attribute of type string.
• decimals (optional) of type number. When unset, it will keep all available decimals.

It will make use of the isNumeric() method to verify that the value is numeric and return it as a number or null otherwise.

this.DOMHelper.getAttributeNumericValue(element, 'tabindex'); // => -1 / null

The getBooleanValue() Method

To check and get the boolean value.

Accepts a single parameter value of type unknown.

It will make use of the isBoolean() method to verify that the value is boolean and return it as a boolean or null otherwise.

this.DOMHelper.getBooleanValue('value');   // => null
this.DOMHelper.getBooleanValue(undefined); // => null
this.DOMHelper.getBooleanValue(0);         // => null
this.DOMHelper.getBooleanValue('false');   // => false
this.DOMHelper.getBooleanValue(false);     // => false
this.DOMHelper.getBooleanValue(' true ');  // => true

The getNumericValue() Method

To check and get the numeric value.

Accepts two parameters:

• value of type unknown.
• decimals (optional) of type number. When unset, it will keep all available decimals.

It will make use of the isNumeric() method to verify that the value is numeric and return it as a number or null otherwise.

this.DOMHelper.getNumericValue('');           // => null
this.DOMHelper.getNumericValue('value');      // => null
this.DOMHelper.getNumericValue(NaN);          // => null
this.DOMHelper.getNumericValue(true);         // => null
this.DOMHelper.getNumericValue(' 123 ');      // => 123
this.DOMHelper.getNumericValue('123.25');     // => 123.25
this.DOMHelper.getNumericValue('123.25', 1);  // => 123.3  // rounds up
this.DOMHelper.getNumericValue('123.99', 0);  // => 124    // rounds up
this.DOMHelper.getNumericValue(456);          // => 456

The tabbableElements() Method

Check and returns all tabbable and visible elements within the given host.

Accepts a single parameter hostElement of type HTMLElement and returns an array of HTMLElement.

It will retrieve all possible tabbable elements and validate their visibility using the isVisible() method.

NOTE: The method will check for and return:

• All anchor elements with an href attribute.
• All area elements with an href attribute.
• All form elements that:
  • Are <input> (except type hidden) and not disabled.
  • Are <select> and not disabled.
  • Are <textarea> and not disabled.
  • Are <button> and not disabled.
• All elements with tabindex attribute that:
  • Does not have the attribute empty.
  • Does not start the attribute with an hyphen (negative values).
• All elements with contenteditable attribute that:
  • Does have the attribute empty (means true by default).
  • Does not have the attribute with value set on false.

Considerations for the <fieldset> element in forms:

Fieldsets can be disabled, which means that all its children elements will be disabled as well, so:

• It will ignore all children elements from those fieldset that are disabled.
• Nested fieldset will follow the same rule:
  • If the parent fieldset is not disabled but the nested one is, it will ignore all children elements from the nested fieldset only.
  • If the parent fieldset is disabled but the nested one is not, it will ignore all elements from the parent down.

this.DOMHelper.tabbableElements(hostElement); // => [button, input, select, etc.]