primer_view_components 0.36.5 → 0.37.0

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -129,6 +129,11 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             }
         }), "f");
         observeMutationsUntilConditionMet(this, () => Boolean(this.invokerElement), () => __classPrivateFieldGet(this, _ActionMenuElement_intersectionObserver, "f").observe(this.invokerElement));
+        // If there's no include fragment, then no async fetching will occur and we can
+        // mark the component as ready.
+        if (!this.includeFragment) {
+            this.setAttribute('data-ready', 'true');
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -137,7 +142,9 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         const targetIsInvoker = this.invokerElement?.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
         if (event.type === 'toggle' && event.newState === 'open') {
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
+            window.requestAnimationFrame(() => {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
+            });
         }
         if (targetIsInvoker && event.type === 'mousedown') {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
@@ -392,9 +399,10 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
     }));
 };
 _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
-    if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
-        __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
+    // async items have loaded, so component is ready
+    this.setAttribute('data-ready', 'true');
 };
 _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut() {
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
@@ -409,6 +417,8 @@ _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    if (this.selectVariant !== 'single')
+        return;
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -143,6 +143,12 @@ export class ActionMenuElement extends HTMLElement {
       () => Boolean(this.invokerElement),
       () => this.#intersectionObserver.observe(this.invokerElement!),
     )
+
+    // If there's no include fragment, then no async fetching will occur and we can
+    // mark the component as ready.
+    if (!this.includeFragment) {
+      this.setAttribute('data-ready', 'true')
+    }
   }
 
   disconnectedCallback() {
@@ -199,7 +205,9 @@ export class ActionMenuElement extends HTMLElement {
     const eventIsActivation = this.#isActivation(event)
 
     if (event.type === 'toggle' && (event as ToggleEvent).newState === 'open') {
-      this.#firstItem?.focus()
+      window.requestAnimationFrame(() => {
+        this.#firstItem?.focus()
+      })
     }
 
     if (targetIsInvoker && event.type === 'mousedown') {
@@ -365,8 +373,11 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #handleIncludeFragmentReplaced() {
-    if (this.#firstItem) this.#firstItem.focus()
+    this.#firstItem?.focus()
     this.#softDisableItems()
+
+    // async items have loaded, so component is ready
+    this.setAttribute('data-ready', 'true')
   }
 
   // Close when focus leaves menu
@@ -387,6 +398,7 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #setDynamicLabel() {
+    if (this.selectVariant !== 'single') return
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return

data/app/components/primer/alpha/dropdown.rb

@@ -7,12 +7,20 @@ module Primer
     class Dropdown < Primer::Component
       status :alpha
 
+      ARIA_LABEL_OPEN_DEFAULT = "Close"
+      ARIA_LABEL_CLOSED_DEFAULT = "Open"
+
       # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
       # but it is locked as a `summary` tag.
+      #
+      # @param aria_label_open [String] Defaults to "Close". Value to announce when menu is open.
+      # @param aria_label_closed [String] Defaults to "Open". Value to announce when menu is closed.
       renders_one :button, lambda { |**system_arguments|
         @button_arguments = system_arguments
         @button_arguments[:button] = true
         @button_arguments[:dropdown] = @with_caret
+        @button_arguments[:aria_label_open] = system_arguments[:aria_label_open] || ARIA_LABEL_OPEN_DEFAULT
+        @button_arguments[:aria_label_closed] = system_arguments[:aria_label_closed] || ARIA_LABEL_CLOSED_DEFAULT
 
         Primer::Content.new
       }

data/app/components/primer/alpha/form_control.rb

@@ -3,8 +3,39 @@
 module Primer
   module Alpha
     # Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.
+    #
     # NOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer
     # forms framework.
+    #
+    # @accessibility
+    #   Because `FormControl` does not manage the actual `<input>` element, it cannot semantically connect
+    #   the input and its associated label. For this and other reasons, consumers are highly encouraged to
+    #   use Primer's pre-made form components like `TextField`, etc, ideally via the Primer forms framework.
+    #
+    #   Users of the `FormControl` component will need to manually connect the label using the `for:`
+    #   attribute, eg:
+    #
+    #   ```erb
+    #   <%= form_with(url: "/path/somewhere") do |f| %>
+    #     <%= render(Primer::Alpha::FormControl.new(label_arguments: { for: "bar" })) do |component| %>
+    #       <% component.with_input do |input_arguments| %>
+    #         <%= f.text_field(:bar, **input_arguments) %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #   ```
+    #
+    #   Note that the name of the field, `:bar`, is passed to both the Rails `#text_field` method _and_
+    #   as part of the `label_arguments` passed to the `FormControl` constructor.
+    #
+    #   Similarly, `FormControl` cannot automatically connect the `<input>` element to the caption and
+    #   validation message elements. The component attempts to mitigate this by including the correct
+    #   `aria-describedby` attribute in the hash it yields to the block passed to `#with_input`. In the
+    #   example above, `input_arguments[:aria][:describedby]` contains the HTML IDs for both the caption
+    #   and validation message elements, and can be passed directly to Rails' form helper methods. If the
+    #   input being wrapped is not generated by a Rails form helper, care must be taken to set
+    #   `aria-describedby` manually on the input element.
+    #
     class FormControl < Primer::Component
       # Describes the field and what sorts of input it expects. Displayed below the input.
       # Note that this slot takes precedence over the `caption:` argument in the constructor.
@@ -16,14 +47,16 @@ module Primer
       # @param required [Boolean] Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system.
       # @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
       # @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
+      # @param label_arguments [Hash] HTML attributes to attach to the `<label>` element that labels the input.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, **system_arguments)
+      def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, label_arguments: {}, **system_arguments)
         @label = label
         @init_caption = caption
         @validation_message = validation_message
         @required = required
         @visually_hide_label = visually_hide_label
         @full_width = full_width
+        @label_arguments = label_arguments
         @system_arguments = system_arguments
 
         @system_arguments[:classes] = class_names(
@@ -32,12 +65,11 @@ module Primer
           "FormControl--fullWidth" => full_width?
         )
 
-        @label_arguments = {
-          classes: class_names(
-            "FormControl-label",
-            visually_hide_label? ? "sr-only" : nil
-          )
-        }
+        @label_arguments[:classes] = class_names(
+          @label_arguments.delete(:classes),
+          "FormControl-label",
+          visually_hide_label? ? "sr-only" : nil
+        )
 
         base_id = self.class.generate_id
         @validation_id = "validation-#{base_id}"
@@ -58,14 +90,20 @@ module Primer
         @input_block = block
       end
 
+      # Whether or not this input is marked as required.
+      # @returns Boolean
       def required?
         @required
       end
 
+      # Whether or not to hide the label visually. The label will still be visible to screen readers.
+      # @returns Boolean
       def visually_hide_label?
         @visually_hide_label
       end
 
+      # Whether or not the form control should take up all the horizontal space allowed by its container.
+      # @returns Boolean
       def full_width?
         @full_width
       end
@@ -85,6 +123,8 @@ module Primer
           memo << @caption_id if @init_caption || caption?
         end
 
+        @input_arguments[:aria][:required] = "true" if required?
+
         return if ids.empty?
 
         @input_arguments[:aria][:describedby] = ids.join(" ")

data/app/components/primer/alpha/toggle_switch.html.erb

@@ -8,7 +8,7 @@
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
   <% end %>
 
-  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@aria_arguments)) do %>
+  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@button_arguments)) do %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
       <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
         <%= render(Primer::BaseComponent.new(

data/app/components/primer/alpha/toggle_switch.js

@@ -132,6 +132,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         let response;
         const requestHeaders = {
             'Requested-With': 'XMLHttpRequest',
+            'X-Requested-With': 'XMLHttpRequest',
         };
         if (this.turbo) {
             requestHeaders['Accept'] = 'text/vnd.turbo-stream.html';

data/app/components/primer/alpha/toggle_switch.rb

@@ -27,8 +27,19 @@ module Primer
       # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
       # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
       # @param turbo [Boolean] Whether or not to request a turbo stream and render the response as such.
+      # @param autofocus [Boolean] Whether switch should be autofocused when rendered.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, turbo: false, **system_arguments)
+      def initialize(
+        src: nil,
+        csrf_token: nil,
+        checked: false,
+        enabled: true,
+        size: SIZE_DEFAULT,
+        status_label_position: STATUS_LABEL_POSITION_DEFAULT,
+        turbo: false,
+        autofocus: nil,
+        **system_arguments
+      )
         @src = src
         @csrf_token = csrf_token
         @checked = checked
@@ -50,12 +61,13 @@ module Primer
           SIZE_MAPPINGS[@size]
         )
 
-        @aria_arguments = {
+        @button_arguments = {
           aria: merge_aria(
             @system_arguments,
             aria: { pressed: on? }
           )
         }
+        @button_arguments[:autofocus] = true if autofocus
 
         @system_arguments[:src] = @src if @src
       end

data/app/components/primer/alpha/toggle_switch.ts

@@ -161,6 +161,7 @@ class ToggleSwitchElement extends HTMLElement {
 
     const requestHeaders: {[key: string]: string} = {
       'Requested-With': 'XMLHttpRequest',
+      'X-Requested-With': 'XMLHttpRequest',
     }
 
     if (this.turbo) {

data/app/components/primer/beta/details.html.erb

@@ -1,8 +1,10 @@
-<% if disabled? %>
-  <%= summary %>
-<% else %>
-  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+<details-toggle>
+  <% if disabled? %>
     <%= summary %>
-    <%= body %>
+  <% else %>
+    <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+      <%= summary %>
+      <%= body %>
+    <% end %>
   <% end %>
-<% end %>
+</details-toggle>

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

@@ -14,14 +14,47 @@ module Primer
         :default => "details-overlay",
         :dark => "details-overlay details-overlay-dark"
       }.freeze
+      ARIA_LABEL_OPEN_DEFAULT = "Collapse"
+      ARIA_LABEL_CLOSED_DEFAULT = "Expand"
 
       attr_reader :disabled
       alias disabled? disabled
 
+      attr_reader :open
+      alias open? open
+
+      # Use the Summary slot as the target for toggling the Details content open/closed.
+      #
+      # @param button [Boolean] Whether or not to render the summary element as a button.
+      # @param aria_label_open [String] Defaults to "Collapse". Value to announce when details element is open.
+      # @param aria_label_closed [String] Defaults to "Expand". Value to announce when details element is closed.
       renders_one :summary, lambda { |button: true, **system_arguments|
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
+        aria_label_closed = system_arguments[:aria_label_closed] || ARIA_LABEL_CLOSED_DEFAULT
+        aria_label_open = system_arguments[:aria_label_open] || ARIA_LABEL_OPEN_DEFAULT
+
+        system_arguments[:data] = merge_data(
+          system_arguments, {
+            data: {
+              target: "details-toggle.summaryTarget",
+              action: "click:details-toggle#toggle",
+              aria_label_closed: aria_label_closed,
+              aria_label_open: aria_label_open,
+            }
+          }
+        )
+
+        system_arguments[:aria] = merge_aria(
+          system_arguments, {
+            aria: {
+              label: open? ? aria_label_open : aria_label_closed,
+              expanded: open?,
+            }
+          }
+        )
+
         if disabled?
           # rubocop:disable Primer/ComponentNameMigration
           Primer::ButtonComponent.new(**system_arguments, disabled: true)
@@ -57,6 +90,15 @@ module Primer
           OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
           "details-reset" => reset
         )
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              target: "details-toggle.detailsTarget",
+            }
+          }
+        )
+        # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#open
+        @open = !!@system_arguments[:open]
         @disabled = disabled
         @summary_info = nil
       end

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

@@ -0,0 +1,39 @@
+/**
+ * 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>
+ * ```
+ */
+declare class DetailsToggleElement extends HTMLElement {
+    detailsTarget: HTMLDetailsElement;
+    summaryTarget: HTMLElement;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        DetailsToggleElement: typeof DetailsToggleElement;
+    }
+}
+export {};

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

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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>
+ * ```
+ */
+let DetailsToggleElement = class DetailsToggleElement extends 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');
+        }
+    }
+};
+__decorate([
+    target
+], DetailsToggleElement.prototype, "detailsTarget", void 0);
+__decorate([
+    target
+], DetailsToggleElement.prototype, "summaryTarget", void 0);
+DetailsToggleElement = __decorate([
+    controller
+], DetailsToggleElement);
+window.DetailsToggleElement = DetailsToggleElement;

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/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 = 37
+      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