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 left plate bands the rows, paints the selected line as a fill, and ends each line with two icons. The right plate keeps one surface, marks the selected invoice with a vermilion rule, and ends every row with Open.
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>