main - 204b289 fix(material/list): update documentation (#30883)

Author: DBowen33

docs-content/overviews/material/list/list.md.html

@@ -255,6 +255,32 @@ <h4 id="navigation" class="docs-header-link">
 anchors, including buttons and checkboxes.</p>
 <p>Always provide an accessible label for the <code>&lt;mat-nav-list&gt;</code> element via <code>aria-label</code> or
 <code>aria-labelledby</code>.</p>
+<p>To provide the best screen reader experience for a list, wrap each anchor element with a <code>&lt;li&gt;</code> or <code>&lt;div role=&quot;listitem&quot;&gt;</code> element and wrap all of the anchor elements with a <code>&lt;ul&gt;</code> element or <code>&lt;div role=&quot;list&quot;&gt;</code> element.</p>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-nav-list</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Select a folder&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
+    @for (link of list; track link) {
+    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">mat-list-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;...&quot;</span> [<span class="hljs-attr">activated</span>]=<span class="hljs-string">&quot;link.isActive&quot;</span>&gt;</span>{{ link }}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+    }
+  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-nav-list</span>&gt;</span>
+</code></pre>
+
+        <h4 id="action" class="docs-header-link">
+          <span header-link="action"></span>
+          Action
+        </h4>
+      <p>To provide the best screen reader experience for a list, wrap each button element with a <code>&lt;li&gt;</code> or <code>&lt;div role=&quot;listitem&quot;&gt;</code> element and add <code>role=&quot;list&quot;</code> to <code>&lt;mat-action-list&gt;</code>.</p>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-action-list</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;list&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Post actions&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-list-item</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;save()&quot;</span>&gt;</span>Save<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-list-item</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;undo()&quot;</span>&gt;</span>Undo<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-action-list</span>&gt;</span>
+</code></pre>
 
         <h4 id="selection" class="docs-header-link">
           <span header-link="selection"></span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "20.0.0-next.7+sha-a2ab84d",
+  "version": "20.0.0-next.7+sha-204b289",
   "description": "Angular Components Examples",
   "private": true,
   "repository": {
@@ -259,15 +259,15 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "20.0.0-next.7+sha-a2ab84d",
-    "@angular/cdk-experimental": "20.0.0-next.7+sha-a2ab84d",
+    "@angular/cdk": "20.0.0-next.7+sha-204b289",
+    "@angular/cdk-experimental": "20.0.0-next.7+sha-204b289",
     "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
     "@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
-    "@angular/material": "20.0.0-next.7+sha-a2ab84d",
-    "@angular/material-experimental": "20.0.0-next.7+sha-a2ab84d",
-    "@angular/material-moment-adapter": "20.0.0-next.7+sha-a2ab84d",
-    "@angular/material-luxon-adapter": "20.0.0-next.7+sha-a2ab84d",
-    "@angular/material-date-fns-adapter": "20.0.0-next.7+sha-a2ab84d"
+    "@angular/material": "20.0.0-next.7+sha-204b289",
+    "@angular/material-experimental": "20.0.0-next.7+sha-204b289",
+    "@angular/material-moment-adapter": "20.0.0-next.7+sha-204b289",
+    "@angular/material-luxon-adapter": "20.0.0-next.7+sha-204b289",
+    "@angular/material-date-fns-adapter": "20.0.0-next.7+sha-204b289"
   },
   "devDependencies": {
     "@angular/cdk": "workspace:*",