chore: migrate label-helpers to typescript

Author: marcosvega91

src/__tests__/label-helpers.js

@@ -1,4 +1,4 @@
-import {getRealLabels} from '../label-helpers'
+import {getRealLabels} from '../label-helpers.ts'
 
 test('hidden inputs are not labelable', () => {
   const element = document.createElement('input')

src/label-helpers.js renamed to src/label-helpers.ts

@@ -1,3 +1,4 @@
+import {isNotNull} from './utils'
 import {TEXT_NODE} from './helpers'
 
 const labelledNodeNames = [
@@ -10,7 +11,9 @@ const labelledNodeNames = [
   'input',
 ]
 
-function getTextContent(node) {
+function getTextContent(
+  node: Node | Element | HTMLInputElement,
+): string | null {
   if (labelledNodeNames.includes(node.nodeName.toLowerCase())) {
     return ''
   }
@@ -22,37 +25,46 @@ function getTextContent(node) {
     .join('')
 }
 
-function getLabelContent(node) {
+function getLabelContent(node: Node | Element | HTMLInputElement) {
   let textContent
-  if (node.tagName.toLowerCase() === 'label') {
+  if ('tagName' in node && node.tagName.toLowerCase() === 'label') {
     textContent = getTextContent(node)
+  } else if ('value' in node) {
+    textContent = node.value
   } else {
-    textContent = node.value || node.textContent
+    textContent = node.textContent
   }
   return textContent
 }
 
 // Based on https://github.com/eps1lon/dom-accessibility-api/pull/352
-function getRealLabels(element) {
-  if (element.labels !== undefined) return element.labels ?? []
+function getRealLabels(element: Element | HTMLInputElement) {
+  // for old browsers
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if ('labels' in element && element.labels !== undefined)
+    return element.labels ?? []
 
   if (!isLabelable(element)) return []
 
   const labels = element.ownerDocument.querySelectorAll('label')
   return Array.from(labels).filter(label => label.control === element)
 }
 
-function isLabelable(element) {
+function isLabelable(element: Element) {
+  const labelableRegex = /BUTTON|METER|OUTPUT|PROGRESS|SELECT|TEXTAREA/
   return (
-    element.tagName.match(/BUTTON|METER|OUTPUT|PROGRESS|SELECT|TEXTAREA/) ||
+    labelableRegex.test(element.tagName) ||
     (element.tagName === 'INPUT' && element.getAttribute('type') !== 'hidden')
   )
 }
 
-function getLabels(container, element, {selector = '*'} = {}) {
-  const labelsId = element.getAttribute('aria-labelledby')
-    ? element.getAttribute('aria-labelledby').split(' ')
-    : []
+function getLabels(
+  container: Element,
+  element: Element,
+  {selector = '*'} = {},
+) {
+  const ariaLabelledBy = element.getAttribute('aria-labelledby')
+  const labelsId = isNotNull(ariaLabelledBy) ? ariaLabelledBy.split(' ') : []
   return labelsId.length
     ? labelsId.map(labelId => {
         const labellingElement = container.querySelector(`[id="${labelId}"]`)
@@ -67,7 +79,6 @@ function getLabels(container, element, {selector = '*'} = {}) {
         const labelledFormControl = Array.from(
           label.querySelectorAll(formControlSelector),
         ).filter(formControlElement => formControlElement.matches(selector))[0]
-
         return {content: textToMatch, formControl: labelledFormControl}
       })
 }

src/queries/label-text.js

@@ -1,6 +1,6 @@
 import {getConfig} from '../config.ts'
 import {checkContainerType} from '../helpers'
-import {getLabels, getRealLabels, getLabelContent} from '../label-helpers'
+import {getLabels, getRealLabels, getLabelContent} from '../label-helpers.ts'
 import {
   fuzzyMatches,
   matches,

src/suggestions.js

@@ -3,7 +3,7 @@ import {getDefaultNormalizer} from './matches.ts'
 import {getNodeText} from './get-node-text'
 import {DEFAULT_IGNORE_TAGS, getConfig} from './config.ts'
 import {getImplicitAriaRoles, isInaccessible} from './role-helpers'
-import {getLabels} from './label-helpers'
+import {getLabels} from './label-helpers.ts'
 
 const normalize = getDefaultNormalizer()
 

src/utils.ts

@@ -0,0 +1,3 @@
+export function isNotNull<T>(arg: T): arg is NonNullable<T> {
+  return arg !== null
+}

types/utils.d.ts

@@ -1,7 +1,3 @@
 export type Nullish<T> = T | null | undefined
 
 export type Callback<T> = () => T
-
-export function isNotNull<T>(arg: T): arg is NonNullable<T> {
-  return arg !== null
-}