Add accessibility warning to NavList truncate preview (#3296)

Author: TylerJDev

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/nav_list/truncate/aria-snapshot.yml

@@ -0,0 +1,8 @@
+- navigation "List heading":
+  - list:
+    - listitem:
+      - button "Really really long label that may wrap, truncate, or appear as a tooltip"
+    - listitem:
+      - button "Really really long label that may wrap, truncate, or appear as a tooltip"
+    - listitem:
+      - button "Really really long label that may wrap, truncate, or appear as a tooltip"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/nav_list/truncate/default.png

@@ -134,21 +134,10 @@ def trailing_action; end
       #
       # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
       # @snapshot
-      def long_label_with_tooltip(truncate_label: :show_tooltip)
-        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
-          component.with_item(
-            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
-            truncate_label: truncate_label
-          )
-          component.with_item(
-            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
-            truncate_label: truncate_label
-          )
-          component.with_item(
-            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
-            truncate_label: truncate_label
-          )
-        end
+      def truncate(truncate_label: :none)
+        render_with_template(locals: {
+          truncate_label: truncate_label
+        })
       end
 
       def long_label_wrap(truncate_label: :none)
@@ -160,15 +149,6 @@ def long_label_wrap(truncate_label: :none)
         end
       end
 
-      def long_label_truncate_no_tooltip(truncate_label: :truncate)
-        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
-          component.with_item(
-            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
-            truncate_label: truncate_label
-          )
-        end
-      end
-
       def long_label_show_tooltip_no_truncate_label
         render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
           component.with_item(

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/nav_list/truncate/focused.png

@@ -0,0 +1,25 @@
+<% if truncate_label == :truncate %>
+  <div style="margin-bottom:1rem">
+    <%= render(
+      Primer::Alpha::Banner.new(
+        scheme: :warning,
+        description: 'If you must use truncation, ensure that users can still access the truncated content in an accessible manner, as truncation should be used sparingly.'
+      )
+    ) { "Inaccessible pattern" } %>
+  </div>
+<% end %>
+
+<%= render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component| %>
+  <% component.with_item(
+    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+    truncate_label: truncate_label
+  ) %>
+  <% component.with_item(
+    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+    truncate_label: truncate_label
+  ) %>
+  <% component.with_item(
+    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+    truncate_label: truncate_label
+  ) %>
+<% end %>