Hardcoded Text

Understanding hardcoded text detection

Severity: Error — causes exit code 1 and fails CI builds.

Glot detects hardcoded text in JSX/TSX files that should use internationalization (i18n) translation functions.

The hardcoded-text rule currently does not run on .astro files. Astro support is limited to translation key usage analysis for now.

Detection Rule

Text is flagged as hardcoded if it contains at least one Unicode alphabetic character (char::is_alphabetic()). This approach:

• Supports all languages (English, Chinese, Japanese, etc.)
• Ignores pure numbers like 123 or 456.78
• Ignores pure symbols like --- or ***
• Catches mixed content like Price: $99 (contains letters)

What Gets Detected

JSX Text Content

Direct text inside JSX elements:

// Detected
<button>Submit</button>
<p>Welcome to our site</p>

// Not detected (pure numbers/symbols)
<span>123</span>
<div>---</div>

String Expressions

String literals in JSX expressions:

// Detected
<div>{"Hello World"}</div>
<span>{'Click here'}</span>

// Not detected
<div>{42}</div>
<span>{variable}</span>

Ternary Operators

Text in conditional expressions:

// Both strings detected
{
  isLoading ? "Loading..." : "Done";
}

// Only "Error!" detected
{
  hasError ? "Error!" : null;
}

Logical Operators

Text in logical expressions:

// Detected
{
  error && "Something went wrong";
}
{
  user || "Anonymous";
}

Template Literals

Template strings with text:

// Detected
<div>{`Welcome ${name}`}</div>
<span>{`Total: ${count} items`}</span>

// Not detected (no alphabetic chars)
<span>{`${count}`}</span>

Multiline JSX Text

Text spanning multiple lines:

// Detected
<p>This is a long paragraph that spans multiple lines</p>

JSX Fragments

Text in fragments:

// Detected
<>Welcome</>

Checked Attributes

By default, glot checks these JSX attributes for hardcoded text:

Attribute	Example
placeholder	<input placeholder="Enter email" />
title	<button title="Submit form">...</button>
alt	<img alt="Profile picture" />
aria-label	<button aria-label="Close">X</button>
aria-description	<div aria-description="Help text">...</div>
aria-placeholder	<input aria-placeholder="Search..." />
aria-roledescription	<div aria-roledescription="carousel">...</div>
aria-valuetext	<input aria-valuetext="50 percent" />

Configuring Checked Attributes

You can customize which attributes are checked in .glotrc.json:

{
  "checkedAttributes": ["placeholder", "title", "alt", "aria-label"]
}

Setting checkedAttributes overrides the defaults. Include all attributes you want checked.

What’s NOT Detected

Glot is smart about ignoring certain patterns:

Translation Function Calls

Recognized translation patterns are ignored:

// Not detected (using t() function)
<button>{t("common.submit")}</button>;

// Not detected (using useTranslations)
const t = useTranslations("namespace");
<span>{t("key")}</span>;

Pure Numbers and Symbols

// Not detected
<span>123</span>
<div>$99.99</div>
<p>---</p>
<code>***</code>

Code Examples

Code blocks typically aren’t in JSX context and aren’t checked.

Suppressed Lines

Lines with suppression directives:

// glot-disable-next-line
<button>Submit</button> // Not detected

Examples

Form Component

// Before: Multiple hardcoded strings detected
function LoginForm() {
  return (
    <form>
      <label>Email</label>  {/* hardcoded */}
      <input placeholder="Enter your email" />  {/* hardcoded */}
      <label>Password</label>  {/* hardcoded */}
      <input type="password" placeholder="Enter password" />  {/* hardcoded */}
      <button>Sign In</button>  {/* hardcoded */}
    </form>
  );
}

// After: Using translations
function LoginForm() {
const t = useTranslations('auth');
return (

<form>
<label>{t('email')}</label>
<input placeholder={t('emailPlaceholder')} />
<label>{t('password')}</label>
<input type="password" placeholder={t('passwordPlaceholder')} />
<button>{t('signIn')}</button>
</form>
);
}

Related

Check Command

Run hardcoded text detection

Directives

Suppress specific warnings