Accessibility definition item component

Introduction

The accessibility\definition-item Blade component renders a term–description pair that can be expanded or collapsed, allowing readers to explore additional details on-demand while meeting WCAG 2.1 AA requirements. It is used inside the Accessibility Content Modal to list warnings and normative requirements, but can be reused anywhere a semantic description list is appropriate. z

Component anatomy

Section	Purpose
Wrapper (<div> + x-data)	Defines Alpine state (open) scoped to the term/definition pair and provides role="group" to preserve semantic relation.
<dt> heading	Contains the visible title or the interactive <button> when a description is provided.
<button>	Toggles open. Exposes aria-expanded, aria-controls, and visible focus indicators.
<dd> description	Holds the optional explanatory text. Hidden with x-show/aria-hidden until expanded.

<x-accessibility.definition-item
    title="Digital rights management"
    description="This content has no device restrictions (Code 10)."
/>

Props

Prop	Type	Default	Description
title	string	—	Visible label shown in the <dt> element. Required.
description	string|null	null	Optional text displayed inside <dd> when the item is expanded.
uid	string	auto-generated	Unique id used to link button ↔ description (aria-controls). Override only for specialised needs.

Behaviour & accessibility

1. Keyboard navigation
   • The <button> is reachable via Tab, activates with Enter/Space, and retains focus after toggling.
   • focus-visible:tw-ring-* classes provide a clear outline.
2. Screen-reader output
   • The button announces its title and the current state (expanded/collapsed) thanks to aria-expanded.
   • The relationship to the description is conveyed through aria-controls.
   • When collapsed, <dd> is removed from the accessibility tree via aria-hidden="true" and display:none.
3. Semantic HTML
   • Uses <dt> / <dd> and keeps them siblings inside the parent <dl>, preserving proper description-list semantics.
4. WCAG compliance
   • Colour contrast: icon/text use Tailwind palette compliant with AA.
   • Pointer target size ≥ 44 × 44 px (tw-min-h-11).

Usage patterns

Inside a <dl> list

<dl class="tw-space-y-2 tw-text-base tw-text-gray-700">
    @foreach($warnings as $warning)
        <x-accessibility.definition-item
            :title="$warning['title']"
            :description="$warning['description'] ?? null"
        />
    @endforeach
</dl>

Without description

If description is omitted the component renders a plain <dt> followed by a screen-reader-only placeholder:

<x-accessibility.definition-item title="No additional info example" />

Output (simplified):

<div role="group"> 
  <dt> No additional info example </dt>
  <dd class="tw-sr-only">No additional information</dd>
</div>

Best practices

• Group multiple items inside a single <dl>; do not wrap each pair in its own list.
• Provide concise, descriptive titles—avoid full sentences.
• Keep descriptions short (≤ 3 sentences) to maintain readability.
• When translating, update all language files (accessibility.php) for show-more, show-less, and no-additional-info keys.

Related files

• Component source: /resources/views/components/accessibility/definition-item.blade.php
• Usage example:/resources/views/livewire/issue/accesibility-content-modal.blade.php

---

Updated for Laravel 10, Livewire 2, Alpine 2, and Tailwind 3.