WIP - A11y improvements

opf · Feb 5, 2025 · 48d629d · 48d629d
1 parent 54762ad
commit 48d629d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/app/components/primer/open_project/danger_dialog.html.erb b/app/components/primer/open_project/danger_dialog.html.erb
@@ -12,7 +12,14 @@
       </scrollable-region>
       <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>
         <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { @cancel_button_text } %>
-        <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
+        <%= render(Primer::Beta::Button.new(
+          id: @confirm_button_id,
+          type: (@form_wrapper.shows_form? ? :submit : :button), 
+          scheme: :danger,
+          role: :region,
+          data: { "submit-dialog-id": dialog_id },
+          aria: { live: "polite" }
+          )) { @confirm_button_text } %>
       <% end %>
     <% end %>
   </danger-dialog-form-helper>

diff --git a/app/components/primer/open_project/danger_dialog.rb b/app/components/primer/open_project/danger_dialog.rb
@@ -39,7 +39,11 @@ class DangerDialog < Primer::Component
 
         check_box_id = "#{dialog_id}-check_box"
 
-        Primer::OpenProject::DangerDialog::ConfirmationCheckBox.new(check_box_id: check_box_id, check_box_name: @check_box_name, **system_arguments)
+        Primer::OpenProject::DangerDialog::ConfirmationCheckBox.new(
+          confirm_button_id: @confirm_button_id,
+          check_box_id: check_box_id,
+          check_box_name: @check_box_name,
+          **system_arguments)
       }
 
       # Optional additional details, such as grid displaying a list of items to be deleted
@@ -79,6 +83,7 @@ def initialize(
         @form_wrapper = FormWrapper.new(**form_arguments)
         @dialog_id = id.to_s
 
+        @confirm_button_id = "#{@dialog_id}-confirm-button"
         @confirm_button_text = confirm_button_text
         @cancel_button_text = cancel_button_text
 
@@ -88,6 +93,7 @@ def initialize(
           system_arguments[:classes],
           "DangerDialog"
         )
+        @system_arguments[:role] = "alertdialog"
 
         @dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
       end

diff --git a/app/components/primer/open_project/danger_dialog/confirmation_check_box.rb b/app/components/primer/open_project/danger_dialog/confirmation_check_box.rb
@@ -8,10 +8,11 @@ class DangerDialog
       class ConfirmationCheckBox < Primer::Component
         status :open_project
 
+        # @param confirm_button_id [String] The id of the confirm button.
         # @param check_box_id [String] The id of the check_box input.
         # @param check_box_name [String] The name of the check_box input.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(check_box_id: self.class.generate_id, check_box_name:, **system_arguments)
+        def initialize(confirm_button_id:, check_box_id: self.class.generate_id, check_box_name:, **system_arguments)
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
           @system_arguments[:classes] = class_names(
@@ -26,6 +27,8 @@ def initialize(check_box_id: self.class.generate_id, check_box_name:, **system_a
             target: "danger-dialog-form-helper.checkbox",
             action: "change:danger-dialog-form-helper#toggle"
           }
+          @check_box_arguments[:autofocus] = true
+          @check_box_arguments[:aria] = merge_aria(@check_box_arguments, { aria: { controls: confirm_button_id } })
         end
 
         def call

diff --git a/app/components/primer/open_project/danger_dialog_form_helper.ts b/app/components/primer/open_project/danger_dialog_form_helper.ts
@@ -18,13 +18,11 @@ class DangerDialogFormHelperElement extends HTMLElement {
   toggle(): void {
     if (this.checkbox) {
       this.submitButton.disabled = !this.checkbox.checked
+      this.submitButton.ariaDisabled = String(!this.checkbox.checked)
     }
   }
 
   #reset(): void {
-    if (this.checkbox) {
-      this.checkbox.disabled = false
-    }
     this.toggle()
   }
 }