WCAG 4.1.2: Ensure buttons have discernible text

[mgifford]

Bug Description

Title: WCAG 4.1.2: Ensure buttons have discernible text (._button_18q4p_1._small_18q4p_36[data-accent="secondary"])
Tags: Accessibility, WCAG 4.1.2, button-name

Issue: Ensure buttons have discernible text (button-name - https://accessibilityinsights.io/info-examples/web/button-name)

Target application: All Companies - Companies - https://crm.civicactions.com/objects/companies?viewId=242124e5-2d4e-4fb4-bf1a-8f50d473879d

Element path: .s1b7q4oc > ._button_18q4p_1._small_18q4p_36[data-accent="secondary"]

Snippet:

How to fix:
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped)
Element does not have an explicit
Element's default semantics were not overridden with role="none" or role="presentation"

Environment: Chrome version 150.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.47.0 (axe-core 4.11.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

[sonarly]

🟡 Sonarly Analysis — Medium Severity

Unlabeled record-table action buttons

Icon-only action buttons rendered in record tables have no accessible name, violating WCAG 4.1.2. The underlying record-table actions remain usable visually, but screen-reader users cannot identify their purpose.

Root Cause

The proximate cause is an icon-only record-table action being rendered without an accessible name.

RecordTableCellEditButton builds the action list with only icons and callbacks:

{
  onClick: handleMainButtonClick,
  Icon: mainButtonIcon,
}

RecordTableCellButtons passes that list to LightIconButtonGroup, while its local button type exposes only onClick and Icon. Consequently, neither the primary action nor the optional secondary action receives ariaLabel.

LightIconButtonGroup does support accessible names and forwards aria-label={ariaLabel}, but the value is undefined for these record-table actions. LightIconButton defaults to accent="secondary" and renders only the supplied icon when no title or aria-label is present. This produces the reported small secondary <button> with no discernible text. [ref:packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx] [ref:packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx] [ref:packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx] [ref:packages/twenty-ui/src/input/button/components/LightIconButton.tsx]

The triggering condition is the record-table hover/focus interaction on the reported object-index page. RecordTableCellHoveredPortalContent renders RecordTableCellEditButton when the cell is not read-only and the table hover position is active. The accessibility scan inspected that rendered portal control. There is no repository or observability evidence identifying a separate deployment, traffic spike, or data mutation as the reason it was reported at that time; the available evidence identifies the scan’s interaction with a normal writable table cell as the immediate trigger. [ref:packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx] [ref:packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortal.tsx]

The relevant action-group implementation was introduced in commit d43e21b695987c9c35e434355435d3ad725a18e8, which replaced the previous single floating icon action with a LightIconButtonGroup but did not provide labels. The current history contains no subsequent fix for these record-table action labels. A separate unlabeled LightIconButton also exists in FieldWidgetRelationEditAction, so accessibility coverage should include page-layout relation widgets as well; that path is not required to explain the reported object-index URL. [ref:git show d43e21b] [ref:packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationEditAction.tsx]

Blame commit: 8034c772 by bosiraphael — Reorganize twenty-ui into best-practice component domains and per-component folders (#21745)

Suggested Fix

Added required accessible labels to record-table button descriptors. Primary actions are labeled according to their behavior (“Open record” or “Edit field”), while secondary link, copy, and in-app actions receive action-specific translated labels. The local record-table button type now requires ariaLabel, preventing future unlabeled actions from being added through this path.

---

Analyzed by Sonarly · View full analysis

[Nameless-Monster-Nerd]

I am working on the record-table action button path described in the analysis. I will add behavior-specific accessible labels, update the local action descriptor type so labels are required, and run the focused frontend checks before opening a draft PR.