Merge pull request #237 from opf/feature/danger-dialog-require-title-param

Make title param required for DangerDialog and FeedbackDialog

Author: myabc

.changeset/nasty-oranges-end.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Make DangerDialog title param required: Axe will raise accessibility violations in the absence of a title. We want to ensure best a11y practice, so this change makes it a required param and documents it.
+
+This is a BREAKING change.

.changeset/polite-toys-tap.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Make FeedbackDialog title param required: Axe will raise accessibility violations in the absence of a title. We want to ensure best a11y practice, so this change makes it a required param and documents it.
+
+This is a BREAKING change.

app/components/primer/open_project/danger_dialog.rb

@@ -63,12 +63,14 @@ class DangerDialog < Primer::Component
 
       # @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param id [String] The id of the dialog.
+      # @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
       # @param confirm_button_text [String] The text of the confirm button. Will default to `I18n.t("button_delete")`, or `I18n.t("button_delete_permanently")` if `confirmation_check_box` slot has been passed to the component.
       # @param cancel_button_text [String] The text of the cancel button. Will default to `I18n.t("button_cancel")`.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         form_arguments: {},
         id: self.class.generate_id,
+        title:,
         confirm_button_text: nil,
         cancel_button_text: nil,
         **system_arguments
@@ -87,7 +89,7 @@ def initialize(
           "DangerDialog"
         )
 
-        @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
+        @dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
       end
 
       delegate :labelledby, :header?, :header, :with_header, :with_header_content,

app/components/primer/open_project/feedback_dialog.rb

@@ -40,16 +40,17 @@ class FeedbackDialog < Primer::Component
 
       renders_one :footer
 
+      # @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
+      def initialize(title:, **system_arguments)
         @system_arguments = system_arguments
         @system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "FeedbackDialog"
         )
         @system_arguments[:id] ||= self.class.generate_id
 
-        @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
+        @dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
       end
 
       delegate :header?, :header, :with_header, :with_header_content,

previews/primer/open_project/danger_dialog_preview/with_additional_details.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::DangerDialog.new) do |dialog| %>
+<%= render(Primer::OpenProject::DangerDialog.new(title: "Delete work packages")) do |dialog| %>
   <% dialog.with_show_button { "Click me" } %>
   <% dialog.with_confirmation_message do |message| %>
     <% message.with_heading(tag: :h2).with_content("Delete 5 work packages?") %>

previews/primer/open_project/feedback_dialog_preview/playground.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "My dialog")) do |dialog| %>
   <% dialog.with_show_button { "Click me" } %>
   <% dialog.with_feedback_message(icon_arguments: { icon: icon, color: icon_color }, loading: loading_state) do |message| %>
     <% message.with_heading(tag: :h2).with_content("Awesome!") %>

previews/primer/open_project/feedback_dialog_preview/with_additional_details.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FeedbackDialog.new) do |dialog| %>
+<%= render(Primer::OpenProject::FeedbackDialog.new(title: "Success message")) do |dialog| %>
   <% dialog.with_show_button { "Click me" } %>
   <% dialog.with_feedback_message do |message| %>
     <% message.with_heading(tag: :h2).with_content("Action successful") %>

previews/primer/open_project/feedback_dialog_preview/with_custom_footer.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "Custom footer")) do |dialog| %>
   <% dialog.with_show_button { "Click me" } %>
   <% dialog.with_feedback_message do |message| %>
     <% message.with_heading(tag: :h2).with_content("Action successful") %>

static/arguments.json

@@ -5131,6 +5131,12 @@
         "default": "`self.class.generate_id`",
         "description": "The id of the dialog."
       },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
+      },
       {
         "name": "confirm_button_text",
         "type": "String",
@@ -5214,6 +5220,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
     "parameters": [
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

static/info_arch.json

@@ -17532,6 +17532,12 @@
         "default": "`self.class.generate_id`",
         "description": "The id of the dialog."
       },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
+      },
       {
         "name": "confirm_button_text",
         "type": "String",
@@ -17878,6 +17884,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
     "parameters": [
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",