List

What you have to do 1 requirements

1. Put role="list" on the list. The reset strips markers from any <ul> or <ol> that carries a class, and in WebKit that also drops the list semantics: VoiceOver stops announcing "list, 8 items" and reads eight unrelated lines instead. role="list" restores it. This is not optional decoration — it is the one attribute without which the component is worse than a bare <ul>. Use <ol class="list" role="list"> where the order is meaningful; the role is the same. Name a trailing control from the row. A switch or checkbox in .list-trailing has no visible label of its own — the row's title is its label. Point at it: aria-labelledby="the-title-id", or wrap the title in a <label for>. Without this the control announces as "switch" and nothing else. Nothing in CSS can supply it. An icon in .list-leading is decoration. aria-hidden="true" on the <svg>; the row's text is the name. A .list-link is named by its own text, and by nothing else. A row of twenty whose link reads "Read more" is a list of twenty things all called "Read more" — worse than .list-action, not better. Put it on the title, and put anything the reader needs and cannot see — a new tab, a file size — inside the link, sr-only if it is not to be shown. Do not put .list-link and .list-action on the same row, and do not put two of them in one row. .list-link costs the row's text its selectability. The rectangle sits over it and a drag across the row drags the link. A row whose text a reader has to copy should not be stretched. .list-lead needs list-stacked on the list, and short children. The slot only gets a line of its own when the row is allowed to wrap; and what decides whether it draws as a column or a row is whether its children fit side by side, so a child that wraps its own text has no width to decide with. Tune --list-lead-size — with --list-content-min it is the row width at which the row stacks — never a breakpoint.