{"_id":"@a11y-ngx/dom-helper","_rev":"3-7c4d7b9e4ea48cc0e4123e3884a6b553","name":"@a11y-ngx/dom-helper","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@a11y-ngx/dom-helper","version":"1.0.0","keywords":["angular","service","DOM","interactive","visible","hidden","attribute","tabbable","focusable","styles","aria-hidden","inert","numeric","boolean"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/dom-helper@1.0.0","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/dom-helper#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"f6430a07e399c07a158136c2f8da35a994ca75cf","tarball":"https://registry.npmjs.org/@a11y-ngx/dom-helper/-/dom-helper-1.0.0.tgz","fileCount":14,"integrity":"sha512-Q9GQz5Um/U/DSvot+G+kHztysaSpf4/KrkW82T1b2OEfTvn4kUeSJbt68XV2v563pz7YDQGM+0cDTyr6KKXYGw==","signatures":[{"sig":"MEQCIC670oN/Jr9gbNVpAzqkBqUoYoHxTSjK9HRvi/49NCjqAiAVW4eLs7CYMMneqapnh1esvnL1vx8ciRG4t8DCefgMhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103764},"main":"bundles/a11y-ngx-dom-helper.umd.js","es2015":"fesm2015/a11y-ngx-dom-helper.js","module":"fesm2015/a11y-ngx-dom-helper.js","esm2015":"esm2015/a11y-ngx-dom-helper.js","gitHead":"22e39324e5348735efb6b5d0a528037ab5a4864f","typings":"a11y-ngx-dom-helper.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-dom-helper.js","_npmVersion":"8.19.4","description":"Another set of tools to validate DOM stuff","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.2.0","@angular/common":"^12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/dom-helper_1.0.0_1726167013660_0.6604474149956387","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@a11y-ngx/dom-helper","version":"1.1.0","keywords":["angular","service","DOM","interactive","visible","hidden","attribute","tabbable","focusable","styles","aria-hidden","aria-label","inert","numeric","boolean"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/dom-helper@1.1.0","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/dom-helper#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"1407b4ea9cf44acb326414c341cb14c8f170faba","tarball":"https://registry.npmjs.org/@a11y-ngx/dom-helper/-/dom-helper-1.1.0.tgz","fileCount":14,"integrity":"sha512-FPlJU9DohQh73T9yKn30UmcEBoIn8yhozgxQFOLN0ipOEQ3ZTw2M9OcGbP0tz4pNR7f31TLbMzbDEd+KOkNnoQ==","signatures":[{"sig":"MEQCIBO3fwUET+EItPx4GddDoOpo1IHPhoQ+os4q5eq+492FAiAVPJDblfNelC4hiw/3y/jBUIdwTa7M99/TADxV3aqCIg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":142037},"main":"bundles/a11y-ngx-dom-helper.umd.js","es2015":"fesm2015/a11y-ngx-dom-helper.js","module":"fesm2015/a11y-ngx-dom-helper.js","esm2015":"esm2015/a11y-ngx-dom-helper.js","gitHead":"d313d56203dd48883f2675606909ff2761188ce9","typings":"a11y-ngx-dom-helper.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-dom-helper.js","_npmVersion":"8.19.4","description":"Another set of tools to validate DOM stuff","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.2.0","@angular/common":"^12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/dom-helper_1.1.0_1761439776205_0.6393490624212501","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@a11y-ngx/dom-helper","version":"1.1.1","description":"Another set of tools to validate DOM stuff","keywords":["angular","service","DOM","interactive","visible","hidden","attribute","tabbable","focusable","styles","aria-hidden","aria-label","inert","numeric","boolean"],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/dom-helper#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"peerDependencies":{"@angular/common":">=12.2.0 <21.0.0","@angular/core":">=12.2.0 <21.0.0"},"dependencies":{"tslib":"^1.10.0"},"main":"bundles/a11y-ngx-dom-helper.umd.js","module":"fesm2015/a11y-ngx-dom-helper.js","es2015":"fesm2015/a11y-ngx-dom-helper.js","esm2015":"esm2015/a11y-ngx-dom-helper.js","fesm2015":"fesm2015/a11y-ngx-dom-helper.js","typings":"a11y-ngx-dom-helper.d.ts","sideEffects":false,"gitHead":"0943b42a1333a74cbda740380ef033e73c182dd5","_id":"@a11y-ngx/dom-helper@1.1.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-NIY4DPwuXefbIH+SsW0gDKDanKKPDhTZ3eEVi8gFxpv0quqBioJMVpqYVnmxNmX9VwIDaRsTeU5hKcP1zeg3YA==","shasum":"58660c12b0f4e4fc95ef3d22de5caef90323a33d","tarball":"https://registry.npmjs.org/@a11y-ngx/dom-helper/-/dom-helper-1.1.1.tgz","fileCount":14,"unpackedSize":142055,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB+HPZks4c5647sMcz1YweYEIkB1tBT4oOb58zx+WbcZAiEA+R0HV3Y3O9hbRwKKEsu8xtUzKwOCiggOz3/yDdX4e3g="}]},"_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"directories":{},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dom-helper_1.1.1_1761915910070_0.8109124350693808"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-12T18:50:13.569Z","modified":"2025-10-31T13:05:10.548Z","1.0.0":"2024-09-12T18:50:13.800Z","1.1.0":"2025-10-26T00:49:36.428Z","1.1.1":"2025-10-31T13:05:10.314Z"},"bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"license":"MPL-2.0","homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/dom-helper#readme","keywords":["angular","service","DOM","interactive","visible","hidden","attribute","tabbable","focusable","styles","aria-hidden","aria-label","inert","numeric","boolean"],"description":"Another set of tools to validate DOM stuff","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"readme":"# DOM Helper\r\n\r\nAnother set of tools to validate DOM stuff.\r\n\r\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.\r\n\r\n## Index\r\n\r\n- [Installation](#installation)\r\n- [Methods](#methods)\r\n  - [The `getStyles()` Method](#the-getstyles-method)\r\n  - [The `getStyle()` Method](#the-getstyle-method)\r\n    - [The `getStyleBefore()` Method](#the-getstylebefore-method)\r\n    - [The `getStyleAfter()` Method](#the-getstyleafter-method)\r\n  - [The `isVisible()` Method](#the-isvisible-method)\r\n  - [The `isAriaHidden()` Method](#the-isariahidden-method)\r\n  - [The `isInert()` Method](#the-isinert-method)\r\n  - [The `isBoolean()` Method](#the-isboolean-method)\r\n  - [The `isNumeric()` Method](#the-isnumeric-method)\r\n  - [The `hasAttribute()` Method](#the-hasattribute-method)\r\n  - [The `getAttributeValue()` Method](#the-getattributevalue-method)\r\n  - [The `getAttributeNumericValue()` Method](#the-getattributenumericvalue-method)\r\n  - [The `getBooleanValue()` Method](#the-getbooleanvalue-method)\r\n  - [The `getNumericValue()` Method](#the-getnumericvalue-method)\r\n  - [The `tabbableElements()` Method](#the-tabbableelements-method)\r\n  - [The `isImageElement()` Method](#the-isimageelement-method)\r\n  - [The `isInteractiveElement()` Method](#the-isinteractiveelement-method)\r\n  - [The `canBeAriaLabelled()` Method](#the-canbearialabelled-method)\r\n\r\n## Installation\r\n\r\n1. Install npm package:\r\n\r\n   `npm install @a11y-ngx/dom-helper --save`\r\n\r\n2. Import `DOMHelperService` into your typescript file:\r\n\r\n```typescript\r\nimport { DOMHelperService } from '@a11y-ngx/dom-helper';\r\n\r\nconstructor(private DOMHelper: DOMHelperService) {}\r\n```\r\n\r\n## Methods\r\n\r\n### The `getStyles()` Method\r\n\r\nTo get all the element's computed styles.\r\n\r\nAccepts two parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `pseudoElement` (_optional_) of type `string`.\r\n\r\n```typescript\r\nthis.DOMHelper.getStyles(element, '::before');\r\n```\r\n\r\n### The `getStyle()` Method\r\n\r\nTo get the property's value from the element's computed styles.\r\n\r\nAccepts three parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `property` of type `keyof CSSStyleDeclaration`.\r\n- `pseudoElement` (_optional_) of type `string`.\r\n\r\n```typescript\r\nthis.DOMHelper.getStyle(element, 'visibility'); // => 'visible' / 'hidden' / etc.\r\n```\r\n\r\n#### The `getStyleBefore()` Method\r\n\r\nA shortcut of the `getStyle()` method to get the property's `::before` pseudo element computed style.\r\n\r\nAccepts two parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `property` of type `keyof CSSStyleDeclaration`.\r\n\r\n```typescript\r\nthis.DOMHelper.getStyleBefore(element, 'position'); // => 'absolute' / 'relative' / etc.\r\n```\r\n\r\n#### The `getStyleAfter()` Method\r\n\r\nA shortcut of the `getStyle()` method to get the property's `::after` pseudo element computed style.\r\n\r\nAccepts two parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `property` of type `keyof CSSStyleDeclaration`.\r\n\r\n```typescript\r\nthis.DOMHelper.getStyleAfter(element, 'zIndex'); // => '100' / etc.\r\n```\r\n\r\n### The `isVisible()` Method\r\n\r\nTo check for the element's visibility.\r\n\r\nIt will check for:\r\n\r\n- The absence of `aria-hidden` attribute set to `true`.\r\n- The absence of `inert` attribute.\r\n- The element has size (width **and** height).\r\n- The element has `visibility` set to `'visible'`.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement` and returns a `boolean`.\r\n\r\n```typescript\r\nthis.DOMHelper.isVisible(element); // => true / false\r\n```\r\n\r\n### The `isAriaHidden()` Method\r\n\r\nTo check if the `aria-hidden` attribute is set to `true`.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement` and returns a `boolean`.\r\n\r\n```typescript\r\nthis.DOMHelper.isAriaHidden(element); // => true / false\r\n```\r\n\r\n### The `isInert()` Method\r\n\r\nTo check if the `inert` attribute is present.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement` and returns a `boolean`.\r\n\r\n```typescript\r\nthis.DOMHelper.isInert(element); // => true / false\r\n```\r\n\r\n### The `isBoolean()` Method\r\n\r\nTo check if the given value is boolean or not.\r\n\r\nAccepts a single parameter `value` of type `unknown` and returns a `boolean`.\r\n\r\n```typescript\r\nthis.DOMHelper.isBoolean('value');   // => false\r\nthis.DOMHelper.isBoolean(undefined); // => false\r\nthis.DOMHelper.isBoolean(0);         // => false\r\nthis.DOMHelper.isBoolean(!0);        // => true\r\nthis.DOMHelper.isBoolean('true');    // => true\r\nthis.DOMHelper.isBoolean('false');   // => true\r\nthis.DOMHelper.isBoolean(false);     // => true\r\n```\r\n\r\n### The `isNumeric()` Method\r\n\r\nTo check if the given value is numeric or not.\r\n\r\nAccepts a single parameter `value` of type `unknown` and returns a `boolean`.\r\n\r\n```typescript\r\nthis.DOMHelper.isNumeric('');         // => false\r\nthis.DOMHelper.isNumeric(NaN);        // => false\r\nthis.DOMHelper.isNumeric('123,25');   // => false\r\nthis.DOMHelper.isNumeric(' 123 ');    // => true\r\nthis.DOMHelper.isNumeric(' 123.25 '); // => true\r\nthis.DOMHelper.isNumeric(123);        // => true\r\n```\r\n\r\n### The `hasAttribute()` Method\r\n\r\nTo check if the given attribute is present in the element.\r\n\r\nAccepts two parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `attribute` of type `string`.\r\n\r\nIt will return a `boolean` confirming whether the attribute exists or not.\r\n\r\n```typescript\r\nthis.DOMHelper.hasAttribute(element, 'disabled'); // => true / false\r\n```\r\n\r\n### The `getAttributeValue()` Method\r\n\r\nTo get the value from an attribute.\r\n\r\nAccepts two parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `attribute` of type `string`.\r\n\r\nIt will return the value as a `string` or `null` otherwise.\r\n\r\n```typescript\r\nthis.DOMHelper.getAttributeValue(element, 'type');     // => 'button' / 'checkbox' / etc.\r\nthis.DOMHelper.getAttributeValue(element, 'tabindex'); // => '-1' / null\r\n```\r\n\r\n### The `getAttributeNumericValue()` Method\r\n\r\nTo check and get the numeric value from an attribute.\r\n\r\nAccepts three parameters:\r\n\r\n- `element` of type `HTMLElement`.\r\n- `attribute` of type `string`.\r\n- `decimals` (_optional_) of type `number`. When _unset_, it will keep all available decimals.\r\n\r\nIt will make use of the `isNumeric()` method to verify that the value _is_ numeric and return it as a `number` or `null` otherwise.\r\n\r\n```typescript\r\nthis.DOMHelper.getAttributeNumericValue(element, 'tabindex'); // => -1 / null\r\n```\r\n\r\n### The `getBooleanValue()` Method\r\n\r\nTo check and get the boolean value.\r\n\r\nAccepts a single parameter `value` of type `unknown`.\r\n\r\nIt will make use of the `isBoolean()` method to verify that the value _is_ boolean and return it as a `boolean` or `null` otherwise.\r\n\r\n```typescript\r\nthis.DOMHelper.getBooleanValue('value');   // => null\r\nthis.DOMHelper.getBooleanValue(undefined); // => null\r\nthis.DOMHelper.getBooleanValue(0);         // => null\r\nthis.DOMHelper.getBooleanValue('false');   // => false\r\nthis.DOMHelper.getBooleanValue(false);     // => false\r\nthis.DOMHelper.getBooleanValue(' true ');  // => true\r\n```\r\n\r\n### The `getNumericValue()` Method\r\n\r\nTo check and get the numeric value.\r\n\r\nAccepts two parameters:\r\n\r\n- `value` of type `unknown`.\r\n- `decimals` (_optional_) of type `number`. When _unset_, it will keep all available decimals.\r\n\r\nIt will make use of the `isNumeric()` method to verify that the value _is_ numeric and return it as a `number` or `null` otherwise.\r\n\r\n```typescript\r\nthis.DOMHelper.getNumericValue('');           // => null\r\nthis.DOMHelper.getNumericValue('value');      // => null\r\nthis.DOMHelper.getNumericValue(NaN);          // => null\r\nthis.DOMHelper.getNumericValue(true);         // => null\r\nthis.DOMHelper.getNumericValue(' 123 ');      // => 123\r\nthis.DOMHelper.getNumericValue('123.25');     // => 123.25\r\nthis.DOMHelper.getNumericValue('123.25', 1);  // => 123.3  // rounds up\r\nthis.DOMHelper.getNumericValue('123.99', 0);  // => 124    // rounds up\r\nthis.DOMHelper.getNumericValue(456);          // => 456\r\n```\r\n\r\n### The `tabbableElements()` Method\r\n\r\nCheck and returns all tabbable and visible elements within the given host.\r\n\r\nAccepts a single parameter `hostElement` of type `HTMLElement` and returns an array of `HTMLElement`.\r\n\r\nIt will retrieve all possible tabbable elements and validate their visibility using [the `isVisible()` method](#the-isvisible-method).\r\n\r\n> **NOTE:** The method will check for and return:\r\n>\r\n> - All anchor elements with an `href` attribute.\r\n> - All area elements with an `href` attribute.\r\n> - All form elements that:\r\n>   - Are `<input>` (except type `hidden`) and not `disabled`.\r\n>   - Are `<select>` and not `disabled`.\r\n>   - Are `<textarea>` and not `disabled`.\r\n>   - Are `<button>` and not `disabled`.\r\n> - All elements with `tabindex` attribute that:\r\n>   - Does not have the attribute empty.\r\n>   - Does not start the attribute with an hyphen (negative values).\r\n> - All elements with `contenteditable` attribute that:\r\n>   - Does have the attribute empty (means `true` by default).\r\n>   - Does not have the attribute with value set on `false`.\r\n>\r\n> **Considerations for the `<fieldset>` element in forms:**\r\n>\r\n> Fieldsets can be disabled, which means that all its children elements will be disabled as well, so:\r\n>\r\n> - It will ignore all children elements from those `fieldset` that are `disabled`.\r\n> - Nested `fieldset` will follow the same rule:\r\n>   - If the parent `fieldset` is _not_ `disabled` but the nested one is, it will ignore all children elements from the nested `fieldset` only.\r\n>   - If the parent `fieldset` _is_ `disabled` but the nested one is not, it will ignore all elements from the parent down.\r\n\r\n```typescript\r\nthis.DOMHelper.tabbableElements(hostElement); // => [button, input, select, etc.]\r\n```\r\n\r\n### The `isImageElement()` Method\r\n\r\nCheck if an element is an image.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement`.\r\n\r\nIt will verify if the given element is:\r\n\r\n- An `<img>` tag\r\n- An `<area>` tag\r\n- An `<input>` tag of `type=\"image\"`\r\n- Has a `role=\"img\"`\r\n\r\n```typescript\r\nthis.DOMHelper.isImageElement(element); // => true / false\r\n```\r\n\r\n### The `isInteractiveElement()` Method\r\n\r\nCheck if an element is interactive, meaning that the user can interact with it.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement`.\r\n\r\nIt will verify if the given element is:\r\n\r\n- A native interactive element: `a[href]`, `button`, `textarea`, etc.\r\n- A _role_ interactive element: `<div role=\"button\" tabindex=\"0\">`\r\n\r\n```typescript\r\nthis.DOMHelper.isInteractiveElement(element); // => true / false\r\n```\r\n\r\n### The `canBeAriaLabelled()` Method\r\n\r\nCheck if an element can use `aria-label`/`aria-labelledby` attribute.\r\n\r\nAccepts a single parameter `element` of type `HTMLElement`.\r\n\r\nIt will verify if the given element:\r\n\r\n- Is interactive (`isInteractiveElement()` method).\r\n- Is one of the allowed native tag elements (`header`, `nav`, `article`, etc.)\r\n- Is **not** one of the disallowed native tag elements (`caption`, `code`, `strong`, etc.)\r\n- Has one of the allowed ARIA roles (`group`, `status`, `img`, etc.)\r\n- Does **not** have a disallowed ARIA role (`definition`, `deletion`, `emphasis`, etc.)\r\n\r\n```typescript\r\nthis.DOMHelper.canBeAriaLabelled(element); // => true / false\r\n```\r\n","readmeFilename":"README.md"}