Lawyer Practice and Consultation Profile Block for React

Edit AREAS. Each has an id, a name, one blurb and the typed counts won, settled and lost; the matters in all, the line "Won 41 of 52 matters" and the badge in the header ("Won 100 of 131") are worked out from those counts, so nothing is typed twice. Keep the blurbs about the same length: every open panel reserves the same height, so opening another area never moves the request beside it.

They share one value. Opening an area in the accordion sets the menu, and choosing an area in the menu opens it in the accordion, so the request always names the area you are reading about. One area is always open: pressing the open one keeps it open.

It checks that the matter has at least 20 characters. If it does not, it says so in the status line and under the field, and puts focus back in the field. If it does, it shows a summary in the end cell: the area, how you want to be reached and the first lines of the matter, with the words that nothing was sent. Editing the area, the matter or the contact choice clears the summary, because it no longer matches what you see. To make it real, send the draft to your own intake endpoint in the submit handler and show its answer in the status line.

Nothing leaves the page, and the cell says so: Confidential, nothing is sent from this demo. Do not type a real matter into a demo. The attorney, the firm, the matter counts and the practice areas are invented, and nothing on the page is legal advice. A real version would also say who may read the request and how long it is kept.

Every control is named: the menu and the field by their labels, the contact choice by its heading, and the accordion rows by their area. The field's hint and its problem are described by the field, the counter is decorative, and the status line is a polite live region present from the start. The contact choice is one tab stop and arrow keys move within it. In a right-to-left layout the counts and names keep their order.

The practice areas come first and the request stacks under them in one column. The foot with the Draft request button stays pinned to the bottom of the screen while the panel scrolls, and sits at the panel's end from the medium breakpoint. The badge in the person band is hidden below the small breakpoint.