Behind the Build: Fixing the Integrations Tab Badge

Release: v0.1.300 · Area: Settings → Integrations tab · Type: UI/UX consistency & accessibility

The problem in plain English

On the Settings page, the Integrations tab has a small badge next to its label. That badge is supposed to tell you something useful — whether your Property Management System (PMS) is connected, or whether it needs attention.

Under the hood, the badge was driven by a single boolean: badge={true} or badge={false}. The PmsConnectionBadge component that rendered it produced nothing more than a small coloured dot. No text. No count. No accessible label.

That's a problem for two groups of people:

1. Screen reader users. Assistive technology reads what's in the DOM. A bare dot with no aria-label is effectively invisible to anyone not looking at the screen.
2. Anyone who glances quickly at the UI. A silent dot doesn't tell you what needs your attention or how urgent it is.

Why this matters for consistency

Every other badge in the application — sidebar navigation items, notification counts, status indicators — follows a shared NavBadge pattern. That pattern carries either a numeric count or a semantic label, and it always includes an ARIA attribute so assistive technology can announce it.

The Integrations tab was the odd one out. Its badge: true/false boolean prop is a different contract entirely, which means:

• Developers working in the codebase encounter two different badge systems with no obvious reason why.
• Any future change to the global badge style won't automatically apply here.
• QA and accessibility audits have to account for a special case.

What the fix looks like

The recommendation is to bring PmsConnectionBadge fully in line with NavBadge:

// Connected — green dot
<PmsConnectionBadge status="connected" />
// renders: aria-label="PMS connected"

// Needs attention — amber badge
<PmsConnectionBadge status="action-needed" />
// renders: aria-label="Integration needs attention"

The badge={true} boolean prop on the tab itself is replaced by the same numeric/semantic badge prop used everywhere else, so the Integrations tab participates in the same rendering pipeline as all other navigation badges.

The accessibility rule of thumb

Every visual indicator that communicates state must also communicate that state in text — either visible text or an aria-label. A colour or shape alone is never sufficient. This is aligned with WCAG 2.1 Success Criterion 1.4.1 (Use of Color) and 4.1.2 (Name, Role, Value).

Summary of changes

Before	After
badge={true} boolean prop	Numeric/semantic badge prop matching NavBadge
No aria-label on the badge dot	aria-label="PMS connected" or aria-label="Integration needs attention"
Silent coloured dot only	Colour + accessible label
Inconsistent with sidebar badges	Consistent with all other app badges

---

Part of our ongoing commitment to building an accessible, consistent interface for landlords, agents, and tenants across every screen.