Accessibility & Internationalization (RTL)Copy Anchor Link

Universal access and international equity are core foundations of Hashti Design System. Accessibility is not an afterthought, and Right-to-Left (RTL) languages are first-class citizens, never second-class overrides.

1. WCAG 2.2 AAA ComplianceCopy Anchor Link

Hashti is engineered to satisfy the rigorous criteria of WCAG 2.2 Level AAA:

Enhanced Contrast Ratios (7:1 Minimum)Copy Anchor Link

• Body Text: Standard WCAG AA requires a 4.5:1 contrast ratio. Hashti enforces a minimum 7:1 contrast ratio for all body text, labels, and critical indicators against their respective canvas and layer backgrounds.
• Large Text & Headings: Contrast exceeds 4.5:1 across all 8 themes.
• Interactive UI Components & Focus Indicators: Exceed 3:1 against adjacent backgrounds to ensure buttons, toggles, borders, and input rings are unmistakable.

2. Keyboard Interaction ModelCopy Anchor Link

Built on React Aria Components, every interactive primitive follows W3C WAI-ARIA authoring practices with zero gaps:

Focus Rings (:focus-visible)Copy Anchor Link

Hashti provides high-contrast, dual-offset focus rings that only appear during keyboard navigation:

/* Authentic Hashti focus ring signature */
:focus-visible {
  outline: 2px solid var(--hashti-focus);
  outline-offset: 2px;
}

Keyboard Navigation ContractsCopy Anchor Link

• Tab / Shift+Tab: Linear focus movement across interactive tab stops.
• Arrow Keys: Roving tabindex inside composite widgets (Tabs, Radio Groups, Menus, Toolbars, and GridLists).
• Space / Enter: Activates buttons, toggles checkboxes, and opens dropdown menus.
• Escape: Universally dismisses open dialogs, menus, tooltips, and popovers, gracefully returning focus to the trigger element without scrolling the page.

3. Screen Reader Landmarks & ARIA Live RegionsCopy Anchor Link

Hashti components automatically announce dynamic updates to assistive technologies (VoiceOver, NVDA, JAWS):

• Landmarks: Modals, Drawers, and Sheets apply role="dialog" or role="alertdialog" with aria-modal="true" and automatic focus trapping.
• Dynamic Feedback: Alert banners and inline notifications implement role="status" or role="alert" using aria-live="polite" or aria-live="assertive".
• Form Descriptions & Errors: Input fields automatically link their helper text and error messages via aria-describedby and mark validity via aria-invalid="true".

4. Internationalization & Persian/Arabic RTL ParityCopy Anchor Link

Most design systems treat Right-to-Left (RTL) as an afterthought — flipping CSS margins with utility hacks that often break icons, date pickers, and logical flows.

Hashti was created from Persian architectural roots, meaning RTL is a primary design axis:

import { Theme, TextField, Button } from "@hashti/react";

export function PersianForm() {
  return (
    <Theme locale="fa-IR" dir="rtl" theme="frame-light">
      <div style={{ maxWidth: "400px", padding: "24px" }}>
        <TextField
          label="نام و نام خانوادگی"
          description="لطفاً نام رسمی خود را مطابق کارت ملی وارد کنید"
          placeholder="سهراب سپهری"
        />
        <div style={{ marginTop: "16px", display: "flex", gap: "8px" }}>
          <Button variant="primary">تأیید و ادامه</Button>
          <Button variant="ghost">انصراف</Button>
        </div>
      </div>
    </Theme>
  );
}

What Happens Automatically in RTL Mode:Copy Anchor Link

1. Layout Direction: Layout flows right-to-left naturally using CSS logical properties (margin-inline-start, padding-inline-end, inset-inline).
2. Bidirectional Typography: Switches automatically to Vazirmatn, an open-source Persian typeface optimized for on-screen legibility and balanced Nastaliq proportions.
3. Control Mirroring: Checkbox checkmarks, disclosure chevrons, form action button alignments, and slider thumbs mirror their spatial axes.
4. Dates and Numbers: Calendar pickers and NumberFields respect Persian solar Hijri / Arabic numeric formats via @internationalized/date.
5. Icon Orientation: Directional icons (arrows, chevrons, step wizards) mirror automatically, while semantic physical icons (like search magnifiers or media players) maintain physical meaning.

[!IMPORTANT] Always pass both locale="fa-IR" (or ar-SA) and dir="rtl" to the <Theme> provider or <I18nProvider> to guarantee both linguistic formatting and DOM reading order are aligned.