[#71413] Upstream A11y improvements to DragHandle

Initial accessibility improvements, based on Backlogs implementation.
`DragHandle` now renders the following additional attributes.

- `role="button"` and `tabindex="0"` for button semantics, focusability.
- `aria-label` (via a `label:` param) with a sensible default value.

https://community.openproject.org/wp/57688

Author: myabc

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

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"

static/arguments.json

@@ -6030,6 +6030,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",

static/info_arch.json

@@ -19891,6 +19891,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",

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