Skip to content

Add aria_label attr to :unread_badge (a11y) #182

Open

Description

@ty13r

:unread_badge — add aria_label for accessibility

Canonical-grep proof

$ git grep -n "kind: :unread_badge" packages/live_ui/lib/live_ui/renderer.ex
packages/live_ui/lib/live_ui/renderer.ex:<line>:  def render(%{element: %Element{kind: :unread_badge}} = ...)

Renderer clause exists (PR #179); constructor accepts count + threshold opt — but NO aria_label for screen-reader accessibility.

Divergence (ariston consumer vs canonical)

Ariston's operator-surface unread-badge usage (ariston-ui/lib/ariston_ui_web/live/operator_surface_live.ex:930-941) passes a per-instance aria_label:

Aspect Ariston-side Canonical Impact
Screen-reader label "aria_label" => "#{unread} unread" (e.g. "3 unread") no aria_label attr Screen readers either read the digit count as plain text (no context) or skip if visually hidden

Proposed extension

Add an optional aria_label attr:

@spec unread_badge(non_neg_integer(), opts()) :: Element.t()
def unread_badge(count, opts \\ [])
# Existing opts: threshold, id
# NEW opt: aria_label (string; if provided, emit on the rendered span)

In the renderer clauses (live_ui + ash_ui): when aria_label is provided, emit aria-label={value} on the badge's root element. When not provided: existing behavior (badge has implicit semantics via count text + role="status").

Note on what's NOT proposed

The "loud" ariston attr (unread > 5 historical visual variant) is being dropped from ariston-side. Canonical's threshold-capping is sufficient; ariston can re-emit "loud" visual treatment via CSS rule against the canonical badge's data-live-ui-unread-count attr if desired.

Status

This is a small a11y fix. Once landed, ariston PR #351 restores screen-reader-friendly labels on unread badges.

Cross-references

Sibling issues this batch:

  • :top_strip event-wiring attrs
  • :sidebar_item visual+state primitives

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions