doc-access 1.0.2 → 1.0.3

package/.prettierignore

@@ -1,2 +1,3 @@
+*.js
 *.md
 *.txt

package/.prettierrc

@@ -1,3 +1,6 @@
 {
-    "useTabs": true
+    "bracketSameLine": true,
+    "printWidth": 60,
+    "tabWidth": 4,
+    "trailingComma": "none"
 }

package/{CONTRIBUTE.md → CONTRIBUTING.md}

@@ -27,4 +27,4 @@ Code comments
 - After cloning, install them by running the following:
 ```
 npm install
-```
+```

package/dist/doc-access.d.ts

@@ -1,3 +1,3 @@
-export * from './modules/doc-access-classes';
-export * from './modules/doc-access-functions';
-export * from './modules/doc-access-extra';
+export * from "./modules/doc-access-classes";
+export * from "./modules/doc-access-functions";
+export * from "./modules/doc-access-extra";

package/dist/doc-access.js

@@ -1,6 +1,6 @@
 if (typeof document === "undefined") {
     throw new Error("Not a browser!");
 }
-export * from './modules/doc-access-classes.js';
-export * from './modules/doc-access-functions.js';
-export * from './modules/doc-access-extra.js';
+export * from "./modules/doc-access-classes.js";
+export * from "./modules/doc-access-functions.js";
+export * from "./modules/doc-access-extra.js";

package/dist/modules/doc-access-classes.js

@@ -1,4 +1,4 @@
-import { check_inv_html_elem, err_msg_finisher } from './doc-access-extra.js';
+import { check_inv_html_elem, err_msg_finisher } from "./doc-access-extra.js";
 class Detacher {
     parent;
     err_msg;
@@ -76,8 +76,9 @@ export class Accessible_Section extends Detacher {
         this.#heading_text = value;
         this.heading.textContent = this.#heading_text;
         const heading_text_copy = this.heading.textContent
-            .replaceAll(" ", "")
-            .toLowerCase() + "-heading";
+            .trim()
+            .toLowerCase()
+            .replace(/\s+/g, "") + "-heading";
         this.heading.id = heading_text_copy;
         this.self.setAttribute("aria-labelledby", this.heading.id);
         // console.info("Updated heading text");

package/dist/modules/doc-access-functions.d.ts

@@ -1,4 +1,4 @@
-import { Heading_Choice } from './doc-access-classes';
+import { Heading_Choice } from "./doc-access-classes";
 /** Makes existing grouped sections containing the describer heading WCAG friendly (omitting contrast)
  *
  * WARNING: Replaces both the section and heading ID

package/dist/modules/doc-access-functions.js

@@ -15,17 +15,15 @@ const returning_msg_ = "Returning...";
 export const grouped_sections_accessible = (class_name, heading_choice, search_parent) => {
     if (!search_parent)
         search_parent = document.body;
-    if (!(class_name.trim().startsWith("."))) {
+    if (!class_name.trim().startsWith(".")) {
         console.warn("Class name must start with a dot!");
     }
-    const sections = search_parent.
-        querySelectorAll(`${class_name}`);
+    const sections = search_parent.querySelectorAll(`${class_name}`);
     if (!sections.length) {
         throw new Error(`Can't find sections! ${returning_msg_}`);
     }
-    sections.forEach(section => {
-        const heading = section
-            .querySelector(heading_choice);
+    sections.forEach((section) => {
+        const heading = section.querySelector(heading_choice);
         if (!heading) {
             throw new Error(`Can't find ${heading_choice}! ${returning_msg_}`);
         }
@@ -34,8 +32,9 @@ export const grouped_sections_accessible = (class_name, heading_choice, search_p
             return;
         }
         const heading_text_copy = heading.textContent
-            .replaceAll(" ", "")
-            .toLowerCase() + "-heading";
+            .trim()
+            .toLowerCase()
+            .replace(/\s+/g, "") + "-heading";
         heading.id = heading_text_copy;
         section.setAttribute("aria-labelledby", heading.id);
     });
@@ -48,14 +47,16 @@ export const grouped_sections_accessible = (class_name, heading_choice, search_p
 export const all_headings_nav_friendly = (parent) => {
     if (!parent)
         parent = document.body;
-    const all_headings = parent
-        .querySelectorAll("h2, h3, h4, h5, h6");
-    all_headings.forEach(heading => {
-        if (!(heading.textContent)) {
+    const all_headings = parent.querySelectorAll("h2, h3, h4, h5, h6");
+    all_headings.forEach((heading) => {
+        if (!heading.textContent) {
             console.warn(`A heading's text content is empty! Heading number: ${heading.tagName}`);
         }
-        heading.id = heading.textContent.toLowerCase().replaceAll(" ", "-") +
-            "-heading";
+        heading.id =
+            heading.textContent
+                .trim()
+                .toLowerCase()
+                .replace(/\s+/g, "") + "-heading";
     });
 };
 /** Makes an existing link open in a new tab when activated
@@ -67,9 +68,9 @@ export const all_headings_nav_friendly = (parent) => {
 export const new_tab_existing = (existing_link, secure, accessible) => {
     const skipping_msg_ = "Skipping...";
     existing_link.target = "_blank";
-    if (typeof (secure) !== "boolean")
+    if (typeof secure !== "boolean")
         secure = true;
-    if (typeof (accessible) != "boolean")
+    if (typeof accessible != "boolean")
         accessible = true;
     if (existing_link.rel === "noopener noreferrer") {
         console.warn(`${existing_link.id || "Existing link"} - already secure! ${skipping_msg_}`);
@@ -99,7 +100,7 @@ export const new_tab_existing = (existing_link, secure, accessible) => {
 export const wait = (time_in_ms, abort) => {
     return new Promise((resolve, reject) => {
         const timeout = setTimeout(resolve, time_in_ms);
-        abort?.addEventListener('abort', () => {
+        abort?.addEventListener("abort", () => {
             clearTimeout(timeout);
             reject(new Error(`Delay removed! ${time_in_ms}`));
         }, { once: true });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "doc-access",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "A JS/TS module that reduces coding time spent on accessibility.",
     "license": "Apache-2.0",
     "author": "Placewith5s",

package/src/doc-access.ts

@@ -2,6 +2,6 @@ if (typeof document === "undefined") {
     throw new Error("Not a browser!");
 }
 
-export * from './modules/doc-access-classes';
-export * from './modules/doc-access-functions';
-export * from './modules/doc-access-extra';
+export * from "./modules/doc-access-classes";
+export * from "./modules/doc-access-functions";
+export * from "./modules/doc-access-extra";

package/src/modules/doc-access-classes.ts

@@ -1,22 +1,26 @@
 import {
     check_inv_html_elem,
     err_msg_finisher
-} from './doc-access-extra';
-
-export type Heading_Choice = "h2" | "h3" | "h4" | "h5" | "h6";
+} from "./doc-access-extra";
 
+export type Heading_Choice =
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6";
 
 class Detacher {
     parent: HTMLElement;
     err_msg: string;
-    
-    constructor (parent: HTMLElement, err_msg: string) {
+
+    constructor(parent: HTMLElement, err_msg: string) {
         this.parent = parent;
         this.err_msg = err_msg;
     }
 
     /** Removes parent node, removing its children in the process
-     * 
+     *
      * @returns {void}
      */
     detach(): void {
@@ -38,11 +42,15 @@ export class Elem extends Detacher {
      * @param {HTMLElement} [parent] - Default: body
      * @param {string} [id]
      */
-    constructor (tag_name: keyof HTMLElementTagNameMap, parent?: HTMLElement,
+    constructor(
+        tag_name: keyof HTMLElementTagNameMap,
+        parent?: HTMLElement,
         id?: string
     ) {
-        super(parent || document.body,
-            err_msg_finisher("new creation", parent));
+        super(
+            parent || document.body,
+            err_msg_finisher("new creation", parent)
+        );
         this.self = null;
         this.tag_name = tag_name;
         this.parent = parent ?? document.body;
@@ -73,17 +81,24 @@ export class Accessible_Section extends Detacher {
      * @param {HTMLElement} [parent] - Default: body
      * @param {string} [heading_text]
      */
-    constructor (heading_choice: Heading_Choice,
-        parent?: HTMLElement, heading_text?: string) {
-        super(parent || document.body,
-            err_msg_finisher("new section", parent));
+    constructor(
+        heading_choice: Heading_Choice,
+        parent?: HTMLElement,
+        heading_text?: string
+    ) {
+        super(
+            parent || document.body,
+            err_msg_finisher("new section", parent)
+        );
 
         this.parent = parent ?? document.body;
 
         this.heading_choice = heading_choice;
 
         this.self = document.createElement("section");
-        this.heading = document.createElement(this.heading_choice);
+        this.heading = document.createElement(
+            this.heading_choice
+        );
 
         this.#heading_text = heading_text ?? "";
 
@@ -92,28 +107,36 @@ export class Accessible_Section extends Detacher {
     }
 
     /** Updates section to keep it accessible
-     * 
+     *
      * @returns {void}
      */
     #upd(value: string): void {
         this.#heading_text = value;
         this.heading.textContent = this.#heading_text;
 
-        const heading_text_copy: string = this.heading.textContent
-        .replaceAll(" ", "")
-        .toLowerCase() + "-heading";
+        const heading_text_copy: string =
+            this.heading.textContent
+                .trim()
+                .toLowerCase()
+                .replace(/\s+/g, "") + "-heading";
 
         this.heading.id = heading_text_copy;
-        this.self.setAttribute("aria-labelledby", this.heading.id);
+        this.self.setAttribute(
+            "aria-labelledby",
+            this.heading.id
+        );
         // console.info("Updated heading text");
     }
 
     /** Parents both the section and heading
-     * 
+     *
      * @returns {void}
      */
     attach(): void {
-        check_inv_html_elem(this.parent, `Can't parent section - invalid parent! Parent: ${parent}`);
+        check_inv_html_elem(
+            this.parent,
+            `Can't parent section - invalid parent! Parent: ${parent}`
+        );
         this.parent.append(this.self);
         this.self.appendChild(this.heading);
         // console.info("Parented new section and heading");
@@ -146,11 +169,17 @@ export class Tab_Link extends Detacher {
      * @param {boolean} [secure] - Default: true
      * @param {boolean} [accessible] - Default: true
      */
-    constructor (parent?: HTMLElement,
-        secure?: boolean, accessible?: boolean, link_text?: string) {
-        super(parent || document.body,
-            err_msg_finisher("new link", parent));
-        
+    constructor(
+        parent?: HTMLElement,
+        secure?: boolean,
+        accessible?: boolean,
+        link_text?: string
+    ) {
+        super(
+            parent || document.body,
+            err_msg_finisher("new link", parent)
+        );
+
         this.self = document.createElement("a");
         this.parent = parent ?? document.body;
         this.secure = secure ?? true;
@@ -180,11 +209,14 @@ export class Tab_Link extends Detacher {
     }
 
     /** Parents the new tab link
-     * 
+     *
      * @returns {void}
      */
     attach(): void {
-        check_inv_html_elem(this.parent, `Can't parent new link - invalid parent! Parent: ${this.parent}`);
+        check_inv_html_elem(
+            this.parent,
+            `Can't parent new link - invalid parent! Parent: ${this.parent}`
+        );
         this.parent.append(this.self);
         // console.info("Parented new tab link");
     }
@@ -201,4 +233,4 @@ export class Tab_Link extends Detacher {
     set link_text(value: string) {
         this.#upd(value);
     }
-}
+}

package/src/modules/doc-access-extra.ts

@@ -5,7 +5,10 @@
  * @throws - If provided HTML element is invalid
  * @returns {void}
  */
-export const check_inv_html_elem = (html_elem: HTMLElement | undefined | null, msg: string): void => {
+export const check_inv_html_elem = (
+    html_elem: HTMLElement | undefined | null,
+    msg: string
+): void => {
     if (!html_elem) throw new Error(msg);
 };
 
@@ -15,6 +18,9 @@ export const check_inv_html_elem = (html_elem: HTMLElement | undefined | null, m
  * @param [parent]
  * @returns {string}
  */
-export const err_msg_finisher = (what: string, parent?: HTMLElement): string => {
+export const err_msg_finisher = (
+    what: string,
+    parent?: HTMLElement
+): string => {
     return `Can't parent ${what} - invalid parent! Parent: ${parent || document.body}`;
-};
+};

package/src/modules/doc-access-functions.ts

@@ -1,8 +1,7 @@
-import { Heading_Choice } from './doc-access-classes';
+import { Heading_Choice } from "./doc-access-classes";
 
 const returning_msg_: string = "Returning...";
 
-
 /** Makes existing grouped sections containing the describer heading WCAG friendly (omitting contrast)
  *
  * WARNING: Replaces both the section and heading ID
@@ -16,38 +15,47 @@ const returning_msg_: string = "Returning...";
  * @throws - If no heading is found (based on section parent and heading choice)
  * @returns {void}
  */
-export const grouped_sections_accessible = (class_name: string, heading_choice: Heading_Choice,
-    search_parent?: HTMLElement): void => {
+export const grouped_sections_accessible = (
+    class_name: string,
+    heading_choice: Heading_Choice,
+    search_parent?: HTMLElement
+): void => {
     if (!search_parent) search_parent = document.body;
 
-    if (!(class_name.trim().startsWith("."))) {
+    if (!class_name.trim().startsWith(".")) {
         console.warn("Class name must start with a dot!");
     }
 
-    const sections: NodeListOf<HTMLElement> = search_parent.
-    querySelectorAll(`${class_name}`);
+    const sections: NodeListOf<HTMLElement> =
+        search_parent.querySelectorAll(`${class_name}`);
 
     if (!sections.length) {
-        throw new Error(`Can't find sections! ${returning_msg_}`);
+        throw new Error(
+            `Can't find sections! ${returning_msg_}`
+        );
     }
 
-    sections.forEach(section => {
-        const heading: HTMLHeadingElement | null = section
-        .querySelector(heading_choice);
+    sections.forEach((section) => {
+        const heading: HTMLHeadingElement | null =
+            section.querySelector(heading_choice);
 
         if (!heading) {
             throw new Error(
-                `Can't find ${heading_choice}! ${returning_msg_}`);
+                `Can't find ${heading_choice}! ${returning_msg_}`
+            );
         }
         if (!heading.textContent) {
             console.warn(
-                `${heading_choice} text content - empty! ${returning_msg_}`);
-                return;
+                `${heading_choice} text content - empty! ${returning_msg_}`
+            );
+            return;
         }
 
-        const heading_text_copy: string = heading.textContent
-        .replaceAll(" ", "")
-        .toLowerCase() + "-heading";
+        const heading_text_copy: string =
+            heading.textContent
+                .trim()
+                .toLowerCase()
+                .replace(/\s+/g, "") + "-heading";
 
         heading.id = heading_text_copy;
         section.setAttribute("aria-labelledby", heading.id);
@@ -59,19 +67,28 @@ export const grouped_sections_accessible = (class_name: string, heading_choice:
  * @param {HTMLElement} [parent] - Default: body. Recommended: main
  * @returns {void}
  */
-export const all_headings_nav_friendly = (parent?: HTMLElement): void => {
+export const all_headings_nav_friendly = (
+    parent?: HTMLElement
+): void => {
     if (!parent) parent = document.body;
 
-    const all_headings: NodeListOf<HTMLHeadingElement> = parent
-    .querySelectorAll<HTMLHeadingElement>("h2, h3, h4, h5, h6");
+    const all_headings: NodeListOf<HTMLHeadingElement> =
+        parent.querySelectorAll<HTMLHeadingElement>(
+            "h2, h3, h4, h5, h6"
+        );
 
-    all_headings.forEach(heading => {
-        if (!(heading.textContent)) {
-            console.warn(`A heading's text content is empty! Heading number: ${heading.tagName}`);
+    all_headings.forEach((heading) => {
+        if (!heading.textContent) {
+            console.warn(
+                `A heading's text content is empty! Heading number: ${heading.tagName}`
+            );
         }
 
-        heading.id = heading.textContent.toLowerCase().replaceAll(" ", "-") +
-        "-heading";
+        heading.id =
+            heading.textContent
+                .trim()
+                .toLowerCase()
+                .replace(/\s+/g, "") + "-heading";
     });
 };
 
@@ -81,18 +98,22 @@ export const all_headings_nav_friendly = (parent?: HTMLElement): void => {
  * @param {boolean} [secure] - Default: true
  * @param {boolean} [accessible] - Default: true
  */
-export const new_tab_existing = (existing_link: HTMLAnchorElement,
-    secure?: boolean, accessible?: boolean): void => {
+export const new_tab_existing = (
+    existing_link: HTMLAnchorElement,
+    secure?: boolean,
+    accessible?: boolean
+): void => {
     const skipping_msg_: string = "Skipping...";
-    
+
     existing_link.target = "_blank";
 
-    if (typeof(secure) !== "boolean") secure = true;
-    if (typeof(accessible) != "boolean") accessible = true;
+    if (typeof secure !== "boolean") secure = true;
+    if (typeof accessible != "boolean") accessible = true;
 
     if (existing_link.rel === "noopener noreferrer") {
         console.warn(
-            `${existing_link.id || "Existing link"} - already secure! ${skipping_msg_}`);
+            `${existing_link.id || "Existing link"} - already secure! ${skipping_msg_}`
+        );
     } else {
         if (secure) {
             // console.info("Wants a new secure link");
@@ -101,7 +122,8 @@ export const new_tab_existing = (existing_link: HTMLAnchorElement,
     }
     if (existing_link.title === "opens in a new tab") {
         console.warn(
-            `${existing_link.id || "Existing link"} - already secure! ${skipping_msg_}`);
+            `${existing_link.id || "Existing link"} - already secure! ${skipping_msg_}`
+        );
     } else {
         if (accessible) {
             // console.info("Wants a new accessible link");
@@ -116,13 +138,27 @@ export const new_tab_existing = (existing_link: HTMLAnchorElement,
  * @param {AbortSignal} [abort]
  * @returns {Promise<void>}
  */
-export const wait = (time_in_ms: number, abort?: AbortSignal): Promise<void> => {
+export const wait = (
+    time_in_ms: number,
+    abort?: AbortSignal
+): Promise<void> => {
     return new Promise((resolve, reject) => {
-        const timeout: number = setTimeout(resolve, time_in_ms);
-        
-        abort?.addEventListener('abort', () => {
-            clearTimeout(timeout);
-            reject(new Error(`Delay removed! ${time_in_ms}`));
-        }, { once: true });
+        const timeout: number = setTimeout(
+            resolve,
+            time_in_ms
+        );
+
+        abort?.addEventListener(
+            "abort",
+            () => {
+                clearTimeout(timeout);
+                reject(
+                    new Error(
+                        `Delay removed! ${time_in_ms}`
+                    )
+                );
+            },
+            { once: true }
+        );
     });
-}
+};