Merge remote-tracking branch 'origin/main' into bump/primer-upstream

HDinger · HDinger · commit 36ea822f9f5c · 2026-03-13T13:44:18.000+01:00
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_high_contrast.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/aria-snapshot.yml
@@ -0,0 +1 @@
+- button "Drag to reorder"
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/focused.png
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 0.82.1
+
+### Patch Changes
+
+- [#419](https://github.com/opf/primer_view_components/pull/419) [`62a3462`](https://github.com/opf/primer_view_components/commit/62a3462b142b00dea14415df678ec283a9aac52a) Thanks [@myabc](https://github.com/myabc)! - DragHandle: Add accessibility attributes (role, tabindex, aria-label).
+
+- [#423](https://github.com/opf/primer_view_components/pull/423) [`576b200`](https://github.com/opf/primer_view_components/commit/576b2004469d834bbf97df6d5d35651a911b6be1) Thanks [@HDinger](https://github.com/HDinger)! - Let Banner component react on container size instead of screen size
+
 ## 0.82.0
 
 ### Minor Changes
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    openproject-primer_view_components (0.82.0)
+    openproject-primer_view_components (0.82.1)
       actionview (>= 7.2.0)
       activesupport (>= 7.2.0)
       openproject-octicons (>= 19.30.1)
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
@@ -1,4 +1,8 @@
 /* Banner alert */
+x-banner {
+  container-type: inline-size;
+  display: block;
+}
 
 .Banner {
   position: relative;
@@ -14,7 +18,7 @@
   grid-template-rows: min-content;
 
   /* `sm` breakpoint variation */
-  @media (max-width: 543.98px) {
+  @container (max-width: 543.98px) {
     grid-template-areas:
       'visual message close'
       '. actions actions';
diff --git a/app/components/primer/open_project/drag_handle.rb b/app/components/primer/open_project/drag_handle.rb
@@ -11,15 +11,29 @@ class DragHandle < Primer::Component
       DEFAULT_SIZE = Primer::Beta::Octicon::SIZE_DEFAULT
       SIZE_OPTIONS = Primer::Beta::Octicon::SIZE_OPTIONS
 
+      # @param size [Symbol] <%= one_of(Primer::OpenProject::DragHandle::SIZE_OPTIONS) %>
+      # @param label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, **system_arguments)
-        @system_arguments = system_arguments
+      def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, label: I18n.t("drag_handle.button_drag"), **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        deny_aria_key(
+          :label,
+          "instead of `aria-label`, include `label` on the component initializer.",
+          **@system_arguments
+        )
         @system_arguments[:tag] = "div"
-        @system_arguments[:classes] =
-          class_names(
-            @system_arguments[:classes],
-            "DragHandle"
-          )
+        @system_arguments[:role] = "button"
+        @system_arguments[:tabindex] = 0
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "DragHandle"
+        )
+
+        @system_arguments[:aria] = merge_aria(
+          @system_arguments,
+          aria: { label: label }
+        )
 
         @size = fetch_or_fallback(Primer::OpenProject::DragHandle::SIZE_OPTIONS, size, Primer::OpenProject::DragHandle::DEFAULT_SIZE)
       end
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -8,6 +8,9 @@ en:
   button_filter: "Filter"
   button_save: "Save"
 
+  drag_handle:
+    button_drag: "Drag to reorder"
+
   filterable_tree_view:
     filter_mode:
       all: "All"
diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    openproject-primer_view_components (0.82.0)
+    openproject-primer_view_components (0.82.1)
       actionview (>= 7.2.0)
       activesupport (>= 7.2.0)
       openproject-octicons (>= 19.30.1)
diff --git a/lib/primer/view_components/version.rb b/lib/primer/view_components/version.rb
@@ -6,7 +6,7 @@ module ViewComponents
     module VERSION
       MAJOR = 0
       MINOR = 82
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.82.0",
+  "version": "0.82.1",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
diff --git a/static/arguments.json b/static/arguments.json
@@ -6036,6 +6036,18 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
     "parameters": [
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "One of `:medium`, `:small`, or `:xsmall`."
+      },
+      {
+        "name": "label",
+        "type": "String",
+        "default": "`I18n.t(\"drag_handle.button_drag\")`",
+        "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
diff --git a/static/info_arch.json b/static/info_arch.json
@@ -19897,6 +19897,18 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
     "parameters": [
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "One of `:medium`, `:small`, or `:xsmall`."
+      },
+      {
+        "name": "label",
+        "type": "String",
+        "default": "`I18n.t(\"drag_handle.button_drag\")`",
+        "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
diff --git a/test/components/primer/open_project/drag_handle_test.rb b/test/components/primer/open_project/drag_handle_test.rb
@@ -16,4 +16,36 @@ def test_renders_larger_icon
 
     assert_selector(".DragHandle .octicon[width='24']")
   end
+
+  def test_renders_with_role_button
+    render_inline(Primer::OpenProject::DragHandle.new)
+
+    assert_selector(".DragHandle[role='button']")
+  end
+
+  def test_renders_with_tabindex
+    render_inline(Primer::OpenProject::DragHandle.new)
+
+    assert_selector(".DragHandle[tabindex='0']")
+  end
+
+  def test_renders_with_default_aria_label
+    render_inline(Primer::OpenProject::DragHandle.new)
+
+    assert_selector(".DragHandle[aria-label='Drag to reorder']")
+  end
+
+  def test_renders_with_custom_label
+    render_inline(Primer::OpenProject::DragHandle.new(label: "Move item"))
+
+    assert_selector(".DragHandle[aria-label='Move item']")
+  end
+
+  def test_denies_aria_label_argument
+    with_raise_on_invalid_aria(true) do
+      assert_raises(ArgumentError) do
+        render_inline(Primer::OpenProject::DragHandle.new(aria: { label: "foo" }))
+      end
+    end
+  end
 end
