Fix ESLint errors and remove comments from grapheme count implementation

Author: Moshood Alabidun

packages/nhsuk-frontend/src/nhsuk/common/grapheme-count.jsdom.test.mjs

@@ -52,7 +52,7 @@ describe('graphemeCount', () => {
   })
 
   it('handles mixed content', () => {
-    expect(graphemeCount('Hello 👋 World')).toBe(12)
+    expect(graphemeCount('Hello 👋 World')).toBe(13)
     expect(graphemeCount('café 👋🏼')).toBe(6)
   })
 
@@ -64,19 +64,19 @@ describe('graphemeCount', () => {
   it('throws for invalid input', () => {
     expect(() => graphemeCount(null)).toThrow(TypeError)
     expect(() => graphemeCount(undefined)).toThrow(TypeError)
-    // @ts-expect-error
+    // @ts-expect-error - Testing runtime type validation with invalid number input
     expect(() => graphemeCount(123)).toThrow(TypeError)
-    // @ts-expect-error
+    // @ts-expect-error - Testing runtime type validation with invalid object input
     expect(() => graphemeCount({})).toThrow(TypeError)
-    // @ts-expect-error
+    // @ts-expect-error - Testing runtime type validation with invalid array input
     expect(() => graphemeCount([])).toThrow(TypeError)
   })
 
   it('works with real examples', () => {
     expect(graphemeCount('NHS 👨‍⚕️')).toBe(5)
-    expect(graphemeCount('Call 111 🏥')).toBe(8)
-    expect(graphemeCount('Please describe your symptoms')).toBe(33)
-    expect(graphemeCount('Feeling unwell 😷')).toBe(15)
+    expect(graphemeCount('Call 111 🏥')).toBe(10)
+    expect(graphemeCount('Please describe your symptoms')).toBe(29)
+    expect(graphemeCount('Feeling unwell 😷')).toBe(16)
     expect(graphemeCount('José García')).toBe(11)
   })
 })

packages/nhsuk-frontend/src/nhsuk/common/grapheme-count.mjs

@@ -7,27 +7,27 @@ export function graphemeCount(text) {
     throw new TypeError('graphemeCount expects a string argument')
   }
 
-  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+  if ('Segmenter' in Intl) {
     try {
       const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' })
       return [...segmenter.segment(text)].length
-    } catch {
-      // fallback for older browsers
+    } catch (_) {
+      void _
     }
   }
 
-  let result = 0
-  let index = 0
+  let count = 0
+  let i = 0
 
-  while (index < text.length) {
-    const point = text.codePointAt(index)
-    if (point === undefined) {
-      index++
-      continue
+  while (i < text.length) {
+    const codePoint = text.codePointAt(i)
+    if (codePoint !== undefined) {
+      count++
+      i += codePoint > 0xffff ? 2 : 1
+    } else {
+      i++
     }
-    result++
-    index += point > 0xffff ? 2 : 1
   }
 
-  return result
+  return count
 }

packages/nhsuk-frontend/src/nhsuk/components/character-count/README.md

@@ -23,19 +23,19 @@ This counting method matches Python's `len()` function for Unicode strings, ensu
 
 ```javascript
 // Simple ASCII
-"Hello" → 5 characters
+"Hello" // 5 characters
 
 // Emoji
-"👋" → 1 character (not 2 code points)
-"👋🏼" → 1 character (emoji with skin tone modifier)
-"👨‍👩‍👧‍👦" → 1 character (family emoji sequence)
+"👋" // 1 character (not 2 code points)
+"👋🏼" // 1 character (emoji with skin tone modifier)
+"👨‍👩‍👧‍👦" // 1 character (family emoji sequence)
 
 // Accented characters
-"café" → 4 characters
-"naïve" → 5 characters
+"café" // 4 characters
+"naïve" // 5 characters
 
 // Mixed content
-"Hello 👋" → 6 characters (5 letters + 1 space + 1 emoji)
+"Hello 👋" // 6 characters (5 letters + 1 space + 1 emoji)
 ```
 
 ### Browser support

packages/nhsuk-frontend/src/nhsuk/components/character-count/character-count.jsdom.test.mjs

@@ -356,7 +356,7 @@ describe('Character count: Format count message', () => {
       $textarea.value = '👋👋👋👋👋👋👋👋👋👋'
       component.updateCountMessage()
       const $status = document.querySelector('.nhsuk-character-count__status')
-      expect($status.textContent).toBe('You have 0 characters remaining')
+      expect($status).toHaveTextContent('You have 0 characters remaining')
     })
 
     it('shows error when over limit with emoji', () => {
@@ -366,8 +366,8 @@ describe('Character count: Format count message', () => {
       $textarea.value = '👋👋👋👋👋👋👋👋👋👋👋'
       component.updateCountMessage()
       const $status = document.querySelector('.nhsuk-character-count__status')
-      expect($status.textContent).toBe('You have 1 character too many')
-      expect($status.classList.contains('nhsuk-error-message')).toBe(true)
+      expect($status).toHaveTextContent('You have 1 character too many')
+      expect($status).toHaveClass('nhsuk-error-message')
     })
   })
 })

packages/nhsuk-frontend/src/nhsuk/components/character-count/character-count.mjs

@@ -3,8 +3,8 @@ import {
   normaliseOptions,
   validateConfig
 } from '../../common/configuration/index.mjs'
-import { formatErrorMessage } from '../../common/index.mjs'
 import { graphemeCount } from '../../common/grapheme-count.mjs'
+import { formatErrorMessage } from '../../common/index.mjs'
 import { ConfigurableComponent } from '../../configurable-component.mjs'
 import { ConfigError, ElementError } from '../../errors/index.mjs'
 import { I18n } from '../../i18n.mjs'