Merge branch 'main' into llastflowers/14774/region-label-sr-announcement-fix

llastflowers · web-flow · commit 7d2e5c822ec2 · 2026-01-23T12:41:04.000-08:00
diff --git a/.changeset/add-stack-none-gap.md b/.changeset/add-stack-none-gap.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Add `none` gap option to Stack component for parity with Primer React
diff --git a/.changeset/seven-papayas-glow.md b/.changeset/seven-papayas-glow.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fixed SelectPanel multiselect accessibility: Use `aria-selected` instead of `aria-checked` for listbox option items.
diff --git a/.changeset/sharp-jokes-push.md b/.changeset/sharp-jokes-push.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Make link distinguishable from surrounding text with underline styling
diff --git a/.changeset/spicy-jars-sparkle.md b/.changeset/spicy-jars-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add SR announcement in Summary As Button story
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -144,7 +144,7 @@ GEM
     mini_mime (1.1.5)
     mini_portile2 (2.8.9)
     minitest (5.27.0)
-    mocha (2.7.1)
+    mocha (3.0.1)
       ruby2_keywords (>= 0.0.5)
     msgpack (1.8.0)
     mutex_m (0.3.0)
@@ -156,13 +156,13 @@ GEM
       racc (~> 1.4)
     octicons (19.21.1)
     parallel (1.27.0)
-    parser (3.3.10.0)
+    parser (3.3.10.1)
       ast (~> 2.4.1)
       racc
     pp (0.6.3)
       prettyprint
     prettyprint (0.2.0)
-    prism (1.7.0)
+    prism (1.8.0)
     psych (5.3.1)
       date
       stringio
@@ -213,15 +213,15 @@ GEM
       io-console (~> 0.5)
     rexml (3.4.4)
     rouge (4.6.1)
-    rubocop (1.81.1)
+    rubocop (1.82.1)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.47.1, < 2.0)
+      rubocop-ast (>= 1.48.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
     rubocop-ast (1.49.0)
diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb
@@ -256,7 +256,7 @@ def initialize(**system_arguments)
           super(
             p: 2,
             role: "listbox",
-            aria_selection_variant: select_variant == :single ? :selected : :checked,
+            aria_selection_variant: :selected,
             select_variant: select_variant == :multiple ? :multiple_checkbox : :single,
             **system_arguments
           )
diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts
@@ -97,7 +97,7 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   get ariaSelectionType(): string {
-    return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected'
+    return 'aria-selected'
   }
 
   set selectVariant(variant: SelectVariant) {
diff --git a/app/components/primer/alpha/stack.rb b/app/components/primer/alpha/stack.rb
@@ -117,6 +117,7 @@ class GapArg < Primer::ResponsiveArg
         DEFAULT = nil
         OPTIONS = [
           DEFAULT,
+          :none,
           :condensed,
           :normal,
           :spacious
diff --git a/demo/app/views/lookbook/previews/group.html.erb b/demo/app/views/lookbook/previews/group.html.erb
@@ -0,0 +1,15 @@
+<% if scenarios.many? %>
+  <% scenarios = scenarios.filter(&:visible?) %>
+  <%# Render a group of scenarios %>
+  <% scenarios.each do |scenario| %>
+    <div style="margin-bottom: 30px !important; display: block !important;">
+      <h6 class="color-fg-muted" style="all: unset; display: block; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
+        <%= scenario.label %>
+      </h6>
+      <%= scenario.output %>
+    </div>
+  <% end %>
+<% else %>
+  <%# Render a single scenario %>
+  <%= scenarios.first.output %>
+<% end %>
diff --git a/package-lock.json b/package-lock.json
diff --git a/previews/primer/alpha/octicon_symbols_preview/playground.html.erb b/previews/primer/alpha/octicon_symbols_preview/playground.html.erb
@@ -1,7 +1,7 @@
 <p style="max-width: 500px">
   Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
   onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
-  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank" style="text-decoration: underline">MDN docs</a> for
   more information.
 </p>
 
diff --git a/previews/primer/beta/button_preview/summary_as_button.html.erb b/previews/primer/beta/button_preview/summary_as_button.html.erb
@@ -1,4 +1,12 @@
-<details>
+<span
+  id="button-summary-live"
+  class="sr-only"
+  role="status"
+  aria-live="polite"
+  aria-atomic="true"></span>
+
+<details
+  ontoggle="document.getElementById('button-summary-live').textContent = this.open ? 'A wrapping `details` tag is required when using the button with the `:summary` tag' : ''">
   <%= render(Primer::Beta::Button.new(
       scheme: scheme,
       size: size,
@@ -9,5 +17,6 @@
   )) do %>
     Button
   <% end %>
+
   <p>A wrapping `details` tag is required when using the button with the `:summary` tag</p>
 </details>
diff --git a/static/arguments.json b/static/arguments.json
@@ -2616,7 +2616,7 @@
         "name": "gap",
         "type": "Symbol",
         "default": "`GapArg::DEFAULT`",
-        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
       },
       {
         "name": "direction",
diff --git a/static/info_arch.json b/static/info_arch.json
@@ -8080,7 +8080,7 @@
         "name": "gap",
         "type": "Symbol",
         "default": "`GapArg::DEFAULT`",
-        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
       },
       {
         "name": "direction",
diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/view-components": minor
 +---
++
 +Add `none` gap option to Stack component for parity with Primer React
Original file line number	Diff line number	Diff line change
`@@ -256,7 +256,7 @@ def initialize(**system_arguments)`
`256`	`256`	`super(`
`257`	`257`	`p: 2,`
`258`	`258`	`role: "listbox",`
`259`		`- aria_selection_variant: select_variant == :single ? :selected : :checked,`
	`259`	`+ aria_selection_variant: :selected,`
`260`	`260`	`select_variant: select_variant == :multiple ? :multiple_checkbox : :single,`
`261`	`261`	`**system_arguments`
`262`	`262`	`)`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ export class SelectPanelElement extends HTMLElement {`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`get ariaSelectionType(): string {`
`100`		`- return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected'`
	`100`	`+ return 'aria-selected'`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`set selectVariant(variant: SelectVariant) {`