primer_view_components 0.36.5 → 0.38.0

data/app/components/primer/beta/details_toggle_element.ts

@@ -0,0 +1,57 @@
+import {controller, target} from '@github/catalyst'
+
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values default to "Expand" and "Collapse". To override those
+ * values, use the `data-aria-label-open` and `data-aria-label-closed`
+ * attributes on the summary target.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+
+@controller
+class DetailsToggleElement extends HTMLElement {
+  @target detailsTarget!: HTMLDetailsElement
+  @target summaryTarget!: HTMLElement
+
+  toggle() {
+    const detailsIsOpen = this.detailsTarget.hasAttribute('open')
+    if (detailsIsOpen) {
+      const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand'
+      this.summaryTarget.setAttribute('aria-label', ariaLabelClosed)
+      this.summaryTarget.setAttribute('aria-expanded', 'false')
+    } else {
+      const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse'
+      this.summaryTarget.setAttribute('aria-label', ariaLabelOpen)
+      this.summaryTarget.setAttribute('aria-expanded', 'true')
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    DetailsToggleElement: typeof DetailsToggleElement
+  }
+}
+
+window.DetailsToggleElement = DetailsToggleElement

data/app/components/primer/beta/markdown.rb

@@ -3,6 +3,7 @@
 module Primer
   module Beta
     # Use `Markdown` to wrap markdown content.
+    # @accessibility This component is purely presentational. Consumers should handle accessibility expectations, such as ensuring that an overflowing, scrollable code block or table is keyboard accessible.
     class Markdown < Primer::Component
       status :beta
 

data/app/components/primer/beta/nav_list.rb

@@ -168,7 +168,7 @@ module Primer
         end
       end
 
-      # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>
+      # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a `<ul>`
       def render_outer_list?
         items.any? { |item| !group?(item) }
       end

data/app/components/primer/dialog_helper.js

@@ -102,6 +102,9 @@ export class DialogHelperElement extends HTMLElement {
         // The click target _must_ be the dialog element itself, and not elements underneath or inside.
         if (target !== dialog || !dialog?.open)
             return;
+        // If the dialog contains a form, do not close the dialog when clicking outside of the dialog
+        if (dialog.querySelector('form'))
+            return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&

data/app/components/primer/dialog_helper.ts

@@ -111,6 +111,9 @@ export class DialogHelperElement extends HTMLElement {
     // The click target _must_ be the dialog element itself, and not elements underneath or inside.
     if (target !== dialog || !dialog?.open) return
 
+    // If the dialog contains a form, do not close the dialog when clicking outside of the dialog
+    if (dialog.querySelector('form')) return
+
     const rect = dialog.getBoundingClientRect()
     const clickWasInsideDialog =
       rect.top <= event.clientY &&

data/app/components/primer/primer.d.ts

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

data/app/components/primer/primer.js

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

data/app/components/primer/primer.ts

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field'
 import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'
+import './beta/details_toggle_element'

data/app/lib/primer/forms/action_menu.html.erb

@@ -1,6 +1,6 @@
 <%= render(FormControl.new(input: @input)) do %>
   <%= render(Primer::Alpha::ActionMenu.new(**@input.input_arguments)) do |menu| %>
-    <% menu.with_show_button { "Select..." } %>
+    <% menu.with_show_button("aria-describedby": @label_id) { "Select..." } %>
     <% @input.block.call(menu) if @input.block %>
   <% end %>
 <% end %>

data/app/lib/primer/forms/action_menu.rb

@@ -8,6 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
+        @input.label_arguments[:id] = label_id
 
         @input.input_arguments[:form_arguments] = {
           name: @input.name,
@@ -20,6 +21,10 @@ module Primer
           @input.input_arguments[:dynamic_label] = true
         end
       end
+
+      def label_id
+        @label_id ||= "label-#{@input.base_id}"
+      end
     end
   end
 end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 36
-      PATCH = 5
+      MINOR = 38
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -86,16 +86,17 @@ module Primer
         Primer::Alpha::ActionList::Item => { examples: false },
 
         # Forms
-        Primer::Alpha::TextField => { form_component: true },
-        Primer::Alpha::TextArea => { form_component: true, published: false },
-        Primer::Alpha::Select => { form_component: true, published: false },
-        Primer::Alpha::MultiInput => { form_component: true, js: true, published: false },
-        Primer::Alpha::RadioButton => { form_component: true, published: false },
-        Primer::Alpha::RadioButtonGroup => { form_component: true, published: false },
-        Primer::Alpha::CheckBox => { form_component: true, published: false },
-        Primer::Alpha::CheckBoxGroup => { form_component: true, published: false },
-        Primer::Alpha::SubmitButton => { form_component: true, published: false },
-        Primer::Alpha::FormButton => { form_component: true, published: false }
+        Primer::Alpha::FormControl => { form_component: true },
+        Primer::Alpha::TextField => { form_component: true, js: true },
+        Primer::Alpha::TextArea => { form_component: true },
+        Primer::Alpha::Select => { form_component: true },
+        Primer::Alpha::MultiInput => { form_component: true, js: true },
+        Primer::Alpha::RadioButton => { form_component: true },
+        Primer::Alpha::RadioButtonGroup => { form_component: true },
+        Primer::Alpha::CheckBox => { form_component: true },
+        Primer::Alpha::CheckBoxGroup => { form_component: true },
+        Primer::Alpha::SubmitButton => { form_component: true },
+        Primer::Alpha::FormButton => { form_component: true }
       }.freeze
 
       include Enumerable

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -165,6 +165,12 @@ module Primer
     class LookbookPagesBackend < Backend
       attr_reader :registry, :manifest
 
+      IGNORED_COMPONENTS = [
+        Primer::Alpha::FormControl
+      ]
+
+      IGNORED_COMPONENTS.freeze
+
       def initialize(registry, manifest)
         @registry = registry
         @manifest = manifest
@@ -172,6 +178,8 @@ module Primer
 
       def generate
         each_component do |component_ref|
+          next if IGNORED_COMPONENTS.include?(component_ref.klass)
+
           page_for(component_ref).generate
         end
         generate_system_args_docs

data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb

@@ -3,7 +3,7 @@
     <% menu.with_show_button { "Strategy" } %>
     <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
     <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
-    <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+    <% menu.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
     <% menu.with_item(label: "Resolve") %>
   <% end %>
   <hr>

data/previews/primer/alpha/form_control_preview/playground.html.erb

@@ -1,9 +1,17 @@
-<%= render(Primer::Alpha::FormControl.new(**system_arguments)) do |component| %>
-  <% component.with_input do |input_arguments| %>
-    <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
-      <% seg.with_item(label: "Han Solo", selected: true) %>
-      <% seg.with_item(label: "Luke Skywalker") %>
-      <% seg.with_item(label: "Leia Organa") %>
+<div>
+  <strong>NOTE: </strong>The <pre style="display: inline">FormControl </pre>component cannot automatically connect
+  the label to the provided input. Please take care to pass the <pre style="display: inline">for:</pre> attribute
+  to <pre style="display: inline">FormControl</pre>, eg:
+  <pre style="display: inline">Primer::Alpha::FormControl.new(label_arguments: { for: "field-name-or-id" })</pre>.
+  - Your friendly neighborhood accessibility team.
+</div>
+
+<br>
+
+<%= form_with(url: "/foo") do |f| %>
+  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: "bar" })) do |component| %>
+    <% component.with_input do |input_arguments| %>
+      <%= f.text_field(:bar, **input_arguments) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/alpha/overlay_preview.rb

@@ -164,37 +164,6 @@ module Primer
                              })
       end
 
-      # @label In an ActionMenu
-      def in_an_action_menu
-        render_with_template(locals: {})
-      end
-
-      # @label Dialog with header and footer
-      #
-      def dialog_with_header_footer
-        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
-          d.with_header(title: "Large Dialog Header", divider: true)
-          d.with_show_button { "Show Overlay" }
-          d.with_footer { "Large Dialog Footer" }
-          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
-        end
-      end
-
-      def overlay_with_header_filter
-        render_with_template(locals: {})
-      end
-
-      def overlay_with_header_subtitle
-        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
-          d.with_header(title: "Large Dialog Header", divider: true) do |h|
-            h.with_subtitle {"A subtitle"}
-          end
-          d.with_show_button { "Show Overlay" }
-          d.with_footer { "Large Dialog Footer" }
-          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
-        end
-      end
-
       def in_a_sticky_container
         render_with_template(locals: {})
       end

data/previews/primer/alpha/select_preview.rb

@@ -70,7 +70,7 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list-1", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -81,7 +81,7 @@ module Primer
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list-2", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -92,7 +92,7 @@ module Primer
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list-3", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -103,7 +103,7 @@ module Primer
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list-4", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -114,7 +114,7 @@ module Primer
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list-5", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -125,7 +125,7 @@ module Primer
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list-6", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")

data/previews/primer/alpha/text_field_preview.rb

@@ -115,122 +115,122 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field-1", label: "My text field"))
       end
 
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field-2", label: "My text field"))
       end
 
       # @label Show clear button
       # @snapshot
       def show_clear_button
-        render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
       end
 
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field-4", label: "My text field"))
       end
 
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field-5", label: "My text field"))
       end
 
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field-6", label: "My text field"))
       end
 
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field-7", label: "My text field"))
       end
 
       # @label With placeholder
       # @snapshot
       def with_placeholder
-        render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field-8", label: "My text field"))
       end
 
       # @label Inset
       # @snapshot
       def inset
-        render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field-9", label: "My text field"))
       end
 
       # @label Monospace
       # @snapshot
       def monospace
-        render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field-10", label: "My text field"))
       end
 
       # @label With trailing icon
       # @snapshot
       def with_trailing_icon
-        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field-11", label: "My text field"))
       end
 
       # @label With trailing text
       # @snapshot
       def with_trailing_text
-        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field-12", label: "My text field"))
       end
 
       # @label With trailing long text
       # @snapshot
       def with_trailing_long_text
-        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field-13", label: "My text field"))
       end
 
       # @label With trailing counter
       # @snapshot
       def with_trailing_counter
-        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field-14", label: "My text field"))
       end
 
       # @label With trailing label
-      # @snapshot
+      # @snapshot 
       def with_trailing_label
-        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
       end
 
       # @label With leading visual
       # @snapshot
       def with_leading_visual
-        render(Primer::Alpha::TextField.new(leading_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(leading_visual: { icon: :search, "aria-label": "Search" }, name: "my-text-field-16", label: "My text field"))
       end
 
       # @label With validation message
       # @snapshot
       def with_validation_message
-        render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field-17", label: "My text field"))
       end
       #
       # @!endgroup
 
-      # @!group Auto check
+      # @!group Auto check 
       #
       # @label Auto check request ok
       def with_auto_check_ok
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field-18", label: "My text field"))
       end
 
       # @label Auto check request accepted
       def with_auto_check_accepted
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field-19", label: "My text field"))
       end
 
       # @label Auto check request error
       def with_auto_check_error
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field-20", label: "My text field"))
       end
       #
       # @!endgroup

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -62,6 +62,10 @@ module Primer
       def with_turbo
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
       end
+
+      def with_autofocus
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, autofocus: true))
+      end
     end
   end
 end

data/previews/primer/beta/auto_complete_preview.rb

@@ -282,6 +282,12 @@ module Primer
       def inset
         render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path, show_clear_button: false, inset: true))
       end
+
+
+      def no_results
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false, src: UrlHelpers.autocomplete_no_results_path))
+      end
+
     end
   end
 end

data/previews/primer/beta/details_preview.rb

@@ -58,6 +58,18 @@ module Primer
           component.with_body { "Body" }
         end
       end
+
+      # @label Open
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def open(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled, open: true) do |component|
+          component.with_summary { "Click me" }
+          component.with_body { "Body" }
+        end
+      end
     end
   end
 end

data/previews/primer/beta/markdown_preview.rb

@@ -95,17 +95,17 @@ module Primer
       <p>And an unordered task list:</p>
 
       <ul>
-        <li><input type=\"checkbox\" checked> Create a sample markdown document</li>
-        <li><input type=\"checkbox\"> Add task lists to it</li>
-        <li><input type=\"checkbox\"> Take a vacation</li>
+        <li><input id="checkbox-1" type=\"checkbox\" checked><label for="checkbox-1">Create a sample markdown document</label></li>
+        <li><input id="checkbox-2" type=\"checkbox\"><label for="checkbox-2">Add task lists to it</label></li>
+        <li><input id="checkbox-3" type=\"checkbox\"><label for="checkbox-3">Take a vacation</label></li>
       </ul>
 
       <p>And a \"mixed\" task list:</p>
 
       <ul>
-        <li><input type=\"checkbox\"> Steal underpants</li>
+        <li><input id="checkbox-4" type=\"checkbox\"><label for="checkbox-4">Steal underpants</label></li>
         <li>?</li>
-        <li><input type=\"checkbox\"> Profit!</li>
+        <li><input id="checkbox-5" type=\"checkbox\"> <label for="checkbox-5">Profit!</label></li></li>
       </ul>
 
       And a nested list:
@@ -181,7 +181,7 @@ module Primer
 
       <p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
 
-      <table>
+      <table tabindex="0">
         <thead>
           <tr>
             <th>Artist</th>
@@ -237,13 +237,13 @@ module Primer
 
       <pre><code>var foo = \"bar\";</code></pre>
 
-      <pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
+      <pre tabindex="0"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. They should also have a tabindex=0 to ensure keyboard accessibility. This line should be long enough to demonstrate this.</code></pre>
 
-      <pre><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
+      <pre tabindex="0"><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
 
       <p>Inline code inside table cells should still be distinguishable.</p>
 
-      <table>
+      <table tabindex="0">
         <thead>
           <tr>
             <th>Language</th>

data/previews/primer/beta/nav_list_preview/truncate.html.erb

@@ -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 %>