A row is a line with a fixed shape. One primary line names the thing. One meta line gives the next fact a person needs. One status says where it stands. One trailing action does the work, such as Open. A second button, or a row of icons, turns the line into a toolbar.
Selection and error come from state, not from painting every other row. A zebra stripe is decoration. It does not mean selected, and it fights a real selected style, because the eye is already busy with bands. Use one vermilion rule on the row that is selected. Leave the other rows on the same surface.
The demo is three rows: Client, Invoice, and Sent. Each ends with Open. The middle row is selected with a vermilion rule, not a band behind the words.
How to check it
- Cover the status colour. The primary line, the meta line, and Open still read in that order.
- Select a row. The mark is a rule, or one equivalent state, not a fill on every other row.
- Count the trailing actions. There is one, and it is the same control on each row.
<div role="row" aria-selected="true">
<span>Invoice</span>
<span>March · £1,240</span>
<span>Due</span>
<button type="button">Open</button>
</div>