Merge pull request #419 from opf/code-maintenance/72215-upstream-drag-handle-a11y-improvements

[#71413] Upstream A11y improvements to DragHandle

Author: myabc

.changeset/olive-beers-nail.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+DragHandle: Add accessibility attributes (role, tabindex, aria-label).

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_high_contrast.png

@@ -0,0 +1 @@
+- button "Drag to reorder"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_colorblind.png

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

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_dimmed.png

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

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/aria-snapshot.yml

@@ -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",

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/drag_handle/default/focused.png

@@ -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",