diff --git a/.jest/setupFile.js b/.jest/setupFile.js index f149f543..54629ef5 100644 --- a/.jest/setupFile.js +++ b/.jest/setupFile.js @@ -1,7 +1,7 @@ /** * Get the event detail object from the latest call. * - * @param {function} handler The event callback. + * @param {function} handler The event callback. * @return {object} */ global.getEventDetails = (handler) => { diff --git a/jest.config.js b/jest.config.js index c55d1a70..d96a603b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,6 +4,6 @@ module.exports = { '/.jest/setupFile.js', ], moduleNameMapper: { - '^@/(\.jest)/(.*)$': '/$1/$2', + '^@/(.jest)/(.*)$': '/$1/$2', }, }; diff --git a/src/AriaComponent.js b/src/AriaComponent.js index 30b1fa98..0b86b80c 100644 --- a/src/AriaComponent.js +++ b/src/AriaComponent.js @@ -16,8 +16,8 @@ export default class AriaComponent { * Create a passably unique `id` attribute. * @static * - * @param {Number} radix An optional base for converting the Number to a String. - * @returns {String} + * @param {number} radix An optional base for converting the Number to a String. + * @returns {string} */ static getUniqueId(radix = 36) { const [, attr] = Math.random().toString(radix).split('.'); @@ -27,7 +27,7 @@ export default class AriaComponent { /** * Returns the first and last items from an Array or NodeList. * - * @param {array|NodeList} items The Array or NodeList from which to retrieve the items. + * @param {array|NodeList} items The Array or NodeList from which to retrieve the items. * @return {array} The first and last items. */ static getFirstAndLastItems(items) { @@ -76,9 +76,9 @@ export default class AriaComponent { /** * The component parameters. * - * @type {Object} { + * @type {object} { * @param {HTMLElement} element The component element. - * @param {Object}. options The original options. + * @param {object} options The original options. * } */ this.params = { @@ -96,14 +96,14 @@ export default class AriaComponent { /** * Track attributes added by this script. * - * @type {Object} + * @type {object} */ this.__trackedAttributes = {}; /** * Track installed modules. * - * @type {Array} + * @type {array} */ this.__includedModules = []; @@ -151,7 +151,7 @@ export default class AriaComponent { /** * Returns tracked attributes for the given element after ensuring it has the required ID attribute. * - * @param {HTMLElement} element The element for which attributes are being retrieved. + * @param {HTMLElement} element The element for which attributes are being retrieved. * @return {array} */ getTrackedAttributesFor = (element) => { @@ -221,8 +221,8 @@ export default class AriaComponent { /** * Dispatch event. * - * @param {string} name The event name. - * @param {object} detail The event detail object. + * @param {string} name The event name. + * @param {object} detail The event detail object. */ dispatch = (name, detail) => { const event = new CustomEvent( @@ -303,7 +303,7 @@ export default class AriaComponent { /** * Run the module function, which returns a cleanup function. * - * @param {Funciton} mod The module initializing function. + * @param {Function} mod The module initializing function. * @return {Functions} The cleanup function. */ start = (mod) => { diff --git a/src/Dialog/Dialog.js b/src/Dialog/Dialog.js index baba2f43..bcc5e957 100644 --- a/src/Dialog/Dialog.js +++ b/src/Dialog/Dialog.js @@ -10,7 +10,7 @@ export default class Dialog extends AriaComponent { * Initial state. * @private * - * @type {Boolean} + * @type {bool} */ #expanded = false; @@ -68,7 +68,7 @@ export default class Dialog extends AriaComponent { /** * Set expanded state and update attributes. * - * @param {Object} state The component state. + * @param {object} state The component state. */ set expanded(newState) { // Update state. diff --git a/src/Dialog/modules/useLegacyDialog.js b/src/Dialog/modules/useLegacyDialog.js index 41f01b45..ef1c2429 100644 --- a/src/Dialog/modules/useLegacyDialog.js +++ b/src/Dialog/modules/useLegacyDialog.js @@ -2,9 +2,9 @@ * Dialog module to use `aria-hidden` to hide outside content rather than using * the `aria-model` attribute. * - * @param {Dialog} arg.component The Dialog component instance. - * @param {object} arg.options The options passed to the component instance. - * @return {Function} The cleanup function. + * @param {Dialog} arg.component The Dialog component instance. + * @param {object} arg.options The options passed to the component instance. + * @return {function} The cleanup function. */ export default function UseLegacyDialog({ component, options }) { let { content } = { diff --git a/src/Disclosure/Disclosure.js b/src/Disclosure/Disclosure.js index f716fa04..b5cbc62a 100644 --- a/src/Disclosure/Disclosure.js +++ b/src/Disclosure/Disclosure.js @@ -13,7 +13,7 @@ export default class Disclosure extends AriaComponent { * Initial expanded state. * @private * - * @type {Boolean} + * @type {bool} */ #expanded = false; @@ -51,7 +51,7 @@ export default class Disclosure extends AriaComponent { /** * Set expanded state and update attributes. * - * @param {Object} state The component state. + * @param {object} state The component state. */ set expanded(newState) { // Update state. diff --git a/src/Listbox/Listbox.js b/src/Listbox/Listbox.js index 41d2c79d..b63fdc62 100644 --- a/src/Listbox/Listbox.js +++ b/src/Listbox/Listbox.js @@ -17,7 +17,7 @@ export default class ListBox extends AriaComponent { * Initial expanded state. * @private * - * @type {Boolean} + * @type {bool} */ #expanded = false; @@ -35,8 +35,8 @@ export default class ListBox extends AriaComponent { * * @param {HTMLElement} lement The component element. */ - constructor(element) { - super(element); + constructor(element, options = {}) { + super(element, options); /** * The string description for this object. @@ -56,7 +56,7 @@ export default class ListBox extends AriaComponent { * Whether the Listbox options are horizonally or vertically oriented. * Options: 'horizontal', 'vertical'. * - * @type {String} + * @type {string} */ orientation: this.#orientation, @@ -71,7 +71,7 @@ export default class ListBox extends AriaComponent { /** * Saves the initial button label. * - * @type {String} + * @type {string} */ this.buttonLabel = this.controller.textContent; @@ -128,6 +128,15 @@ export default class ListBox extends AriaComponent { ); } + /** + * Get expanded state. + * + * @return {bool} + */ + get expanded() { + return this.#expanded; + } + /** * Set the Listbox orientation. * @@ -149,15 +158,6 @@ export default class ListBox extends AriaComponent { return this.#orientation; } - /** - * Get expanded state. - * - * @return {bool} - */ - get expanded() { - return this.#expanded; - } - /** * Set the active descendant and update attributes accordingly. * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant diff --git a/src/Listbox/Search.js b/src/Listbox/Search.js index 959f1832..7fd764f9 100644 --- a/src/Listbox/Search.js +++ b/src/Listbox/Search.js @@ -35,7 +35,7 @@ export default class Search { * Select the item that matches a search string. * If a match is found, return it so that it can be selected. * - * @param {Number} key A keyCode value. + * @param {number} key A keyCode value. * @return {HTMLElement|null} The matched element or null if no match. */ getItem(key) { diff --git a/src/Listbox/Search.test.js b/src/Listbox/Search.test.js index 7954472b..ed1f6638 100644 --- a/src/Listbox/Search.test.js +++ b/src/Listbox/Search.test.js @@ -6,7 +6,7 @@ import Search from './Search'; * @todo This is maintained from the previous event setup because typing with * user.keyboard is taking so long the tests error out. * - * @param {string} character The character to type. + * @param {string} character The character to type. * @return {KeyboardEvent} */ function typeCharacter(character) { diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index 2a18e213..369788e7 100644 --- a/src/Menu/Menu.js +++ b/src/Menu/Menu.js @@ -115,8 +115,8 @@ export default class Menu extends AriaComponent { /** * Initialize and save a submenu Disclosure. * - * @param {array} disclosures The array of previous disclosures. - * @param {HTMLLIElement} menuChild The menu item. + * @param {array} disclosures The array of previous disclosures. + * @param {HTMLLIElement} menuChild The menu item. * @return {array} A collection of submenu Disclosures. */ initSubmenuDisclosure = (disclosures, menuChild) => { @@ -187,7 +187,7 @@ export default class Menu extends AriaComponent { * Update attributes based on expanded state. * * @param {object} disclosure The Disclosure to update. - * @param {boolean} expanded The expected updated Disclosure state. + * @param {bool} expanded The expected updated Disclosure state. */ setDisclosureState = (disclosure, expanded) => { if (undefined !== disclosure) { @@ -215,9 +215,7 @@ export default class Menu extends AriaComponent { controllerHandleKeydown = (event) => { const { target, key } = event; - if ( - [' ', 'Enter'].includes(key) - ) { + if ([' ', 'Enter'].includes(key)) { event.preventDefault(); event.stopPropagation(); diff --git a/src/Popup/Popup.js b/src/Popup/Popup.js index 27e7d04d..50b81780 100644 --- a/src/Popup/Popup.js +++ b/src/Popup/Popup.js @@ -11,7 +11,7 @@ export default class Popup extends AriaComponent { * Initial expanded state. * @private * - * @type {Boolean} + * @type {bool} */ #expanded = false; @@ -19,7 +19,7 @@ export default class Popup extends AriaComponent { * Initial `type` option value. * @private * - * @type {Boolean} + * @type {bool} */ #optionType = 'true'; // 'true' === 'menu' in UAs that don't support WAI-ARIA 1.1 diff --git a/src/Tablist/Tablist.js b/src/Tablist/Tablist.js index afcc41a7..3c8c3f58 100644 --- a/src/Tablist/Tablist.js +++ b/src/Tablist/Tablist.js @@ -17,14 +17,14 @@ export default class Tablist extends AriaComponent { /** * The initial active index. * - * @type {Number} + * @type {number} */ #activeIndex = 0; /** * The previously-active index. * - * @type {Number} + * @type {number} */ #switchedFrom = null; @@ -72,7 +72,7 @@ export default class Tablist extends AriaComponent { * Whether the tabs are horizonally or vertically oriented. * Options: 'horizontal', 'vertical'. * - * @type {String} + * @type {string} */ orientation: this.#orientation, @@ -121,7 +121,7 @@ export default class Tablist extends AriaComponent { /** * Set the last-active index and update attributes accordingly. * - * @param {Number} previousIndex The previous index. + * @param {number} previousIndex The previous index. */ set #previousIndex(previousIndex) { this.#switchedFrom = previousIndex; @@ -141,7 +141,7 @@ export default class Tablist extends AriaComponent { /** * Get the previously-avtive index. * - * @return {Number} + * @return {number} */ get previousIndex() { return this.#switchedFrom; @@ -150,7 +150,7 @@ export default class Tablist extends AriaComponent { /** * Set the active index and update attributes accordingly. * - * @param {Number} newIndex The index to set as active. + * @param {number} newIndex The index to set as active. */ set activeIndex(newIndex) { // Deactivate the previous tab-panel pair. @@ -180,7 +180,7 @@ export default class Tablist extends AriaComponent { /** * Get the active index. * - * @return {Number} + * @return {number} */ get activeIndex() { return this.#activeIndex; @@ -286,8 +286,8 @@ export default class Tablist extends AriaComponent { /** * Returns the next index based on the key pressed. * - * @param {string} key The key name. - * @param {number} currentIndex The currently event target. + * @param {string} key The key name. + * @param {number} currentIndex The currently event target. * @return {number} The index to which focus should move. */ getNextIndex = (key, currentIndex) => { diff --git a/src/Tablist/modules/automaticActivation.js b/src/Tablist/modules/automaticActivation.js index b1c4814d..a9dc3f61 100644 --- a/src/Tablist/modules/automaticActivation.js +++ b/src/Tablist/modules/automaticActivation.js @@ -1,8 +1,8 @@ /** * Tablist module for automatically activating tabs when moving focus. * - * @param {Tablist} arg.component An instance of Tablist. - * @return {Function} The cleanup function. + * @param {Tablist} arg.component An instance of Tablist. + * @return {function} The cleanup function. */ export default function AutomaticActivation({ component }) { /** diff --git a/src/Tablist/modules/manageTabIndex.js b/src/Tablist/modules/manageTabIndex.js index 08cc0d0b..010ef41d 100644 --- a/src/Tablist/modules/manageTabIndex.js +++ b/src/Tablist/modules/manageTabIndex.js @@ -3,8 +3,8 @@ import { interactiveChildren } from '../../shared/interactiveChildren'; /** * Tablist module for managing tabIndex for target interactive children. * - * @param {Tablist} arg.component An instance of Tablist. - * @return {Function} The cleanup function. + * @param {Tablist} arg.component An instance of Tablist. + * @return {function} The cleanup function. */ export default function ManageTabIndex({ component }) { /* diff --git a/src/Tablist/modules/useHiddenAttribute.js b/src/Tablist/modules/useHiddenAttribute.js index 1c23bb5e..5e41c809 100644 --- a/src/Tablist/modules/useHiddenAttribute.js +++ b/src/Tablist/modules/useHiddenAttribute.js @@ -1,8 +1,8 @@ /** * Tablist module to use the hidden attribute to hide hidden content :) * - * @param {Tablist} arg.component An instance of Tablist. - * @return {Function} The cleanup function. + * @param {Tablist} arg.component An instance of Tablist. + * @return {function} The cleanup function. */ export default function UseHiddenAttribute({ component }) { /** diff --git a/src/shared/getElementPair.js b/src/shared/getElementPair.js index ac7b7580..04f7c090 100644 --- a/src/shared/getElementPair.js +++ b/src/shared/getElementPair.js @@ -3,7 +3,7 @@ /** * Get the controller and target elements based on the given element's attributes. * - * @param {HTMLElement} element Either the controller or target element. + * @param {HTMLElement} element Either the controller or target element. * @return {object} The controller and target elements. */ const getElementPair = (element) => { diff --git a/src/shared/interactiveChildren.js b/src/shared/interactiveChildren.js index 2febe664..5144e8ff 100644 --- a/src/shared/interactiveChildren.js +++ b/src/shared/interactiveChildren.js @@ -14,11 +14,11 @@ const interactiveChildSelector = [ ].join(','); /** - * Collect all interactive child elements. + * Returns true if the target contains an interactive element. * - * @param {HTMLElement} target. The element in which to search for interactive children. - * @param {String} selector The interactive child selector, - * @return {Array} + * @param {HTMLElement} target The element in which to search for interactive children. + * @param {string} selector The interactive child selector. + * @return {bool} */ function hasInteractiveChildren(target, selector = interactiveChildSelector) { return (null !== target.querySelector(selector)); @@ -27,9 +27,9 @@ function hasInteractiveChildren(target, selector = interactiveChildSelector) { /** * Collect all interactive child elements. * - * @param {HTMLElement} target. The element in which to search for interactive children. - * @param {String} selector The interactive child selector, - * @return {Array} + * @param {HTMLElement} target The element in which to search for interactive children. + * @param {string} selector The interactive child selector. + * @return {array} */ function interactiveChildren(target, selector = interactiveChildSelector) { return Array.from(target.querySelectorAll(selector)); diff --git a/src/shared/modules/componentConnector.js b/src/shared/modules/componentConnector.js index 2be6109e..5e9951c7 100644 --- a/src/shared/modules/componentConnector.js +++ b/src/shared/modules/componentConnector.js @@ -1,8 +1,8 @@ /** * Connect a controller and target pair when they are not adjacent siblings. * - * @param {Popup|Disclosure} arg.component The component instance. - * @return {Function} The cleanup function. + * @param {Popup|Disclosure} arg.component The component instance. + * @return {function} The cleanup function. */ export default function ComponentConnector({ component }) { /** diff --git a/src/shared/modules/manageTabIndex.js b/src/shared/modules/manageTabIndex.js index 74c219ee..b30370e2 100644 --- a/src/shared/modules/manageTabIndex.js +++ b/src/shared/modules/manageTabIndex.js @@ -4,9 +4,9 @@ * This isn't such an issue when the target is hidden with `display:none`, but * may be necessary if the target is hidden by other means. * - * @param {Dialog|Disclosure|Popup} arg.component The component instance. - * @param {String} arg.namespace The component's event namespace. - * @return {Function} The cleanup function. + * @param {Dialog|Disclosure|Popup} arg.component The component instance. + * @param {string} arg.namespace The component's event namespace. + * @return {function} The cleanup function. */ export default function ManageTabIndex({ component, namespace }) { /** diff --git a/src/shared/modules/useButtonRole.js b/src/shared/modules/useButtonRole.js index f596667d..72b3b02c 100644 --- a/src/shared/modules/useButtonRole.js +++ b/src/shared/modules/useButtonRole.js @@ -1,8 +1,8 @@ /** * Mimic button element for a non-button controller. * - * @param {Dialog|Disclosure|Popup} arg.component The component instance. - * @return {Function} The cleanup function. + * @param {Dialog|Disclosure|Popup} arg.component The component instance. + * @return {function} The cleanup function. */ export default function UseButtonRole({ component }) { /** diff --git a/src/shared/modules/useHiddenAttribute.js b/src/shared/modules/useHiddenAttribute.js index dd100861..f59cd9f6 100644 --- a/src/shared/modules/useHiddenAttribute.js +++ b/src/shared/modules/useHiddenAttribute.js @@ -1,9 +1,9 @@ /** * Use the hidden attribute to hide hidden content :) * - * @param {Dialog|Disclosure|Popup} arg.component The Dialog component. - * @param {String} arg.namespace The component's event namespace. - * @return {Function} The cleanup function. + * @param {Dialog|Disclosure|Popup} arg.component The Dialog component. + * @param {string} arg.namespace The component's event namespace. + * @return {function} The cleanup function. */ export default function UseHiddenAttribute({ component, namespace }) { /**