openproject-primer_view_components 0.32.1 → 0.33.0

data/app/components/primer/alpha/toggle_switch.js

@@ -20,7 +20,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     }
     get csrf() {
         const csrfElement = this.querySelector('[data-csrf]');
-        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+        return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
     }
     get csrfField() {
         // the authenticity token is passed into the element and is not generated in js land

data/app/components/primer/alpha/toggle_switch.rb

@@ -56,10 +56,6 @@ module Primer
         }
 
         @system_arguments[:src] = @src if @src
-
-        return unless @src && @csrf_token
-
-        @system_arguments[:csrf] = @csrf_token
       end
 
       def on?
@@ -73,6 +69,22 @@ module Primer
       def disabled?
         !enabled?
       end
+
+      private
+
+      def before_render
+        @csrf_token ||= view_context.form_authenticity_token(
+          form_options: {
+            method: :post,
+            action: @src
+          }
+        )
+
+        @system_arguments[:data] = merge_data(
+          @system_arguments,
+          { data: { csrf: @csrf_token } }
+        )
+      end
     end
   end
 end

data/app/components/primer/alpha/toggle_switch.ts

@@ -19,7 +19,7 @@ class ToggleSwitchElement extends HTMLElement {
 
   get csrf(): string | null {
     const csrfElement = this.querySelector('[data-csrf]')
-    return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
+    return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
   }
 
   get csrfField(): string {

data/app/components/primer/beta/clipboard_copy.html.erb

@@ -1,8 +1,11 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if content.present? %>
-    <%= content %>
-  <% else %>
-    <%= render Primer::Beta::Octicon.new(:copy) %>
-    <%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
+<%= render Primer::BaseComponent.new(tag: :span) do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= render Primer::Beta::Octicon.new(:copy) %>
+      <%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
+    <% end %>
   <% end %>
+  <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div>
 <% end %>

data/app/components/primer/beta/clipboard_copy.js

@@ -29,12 +29,27 @@ document.addEventListener('clipboard-copy', ({ target }) => {
     if (!target.hasAttribute('data-view-component'))
         return;
     const currentTimeout = clipboardCopyElementTimers.get(target);
+    const clipboardCopyLiveRegion = target.parentNode?.querySelector('[data-clipboard-copy-feedback]');
+    const copiedAnnouncement = 'Copied!';
     if (currentTimeout) {
         clearTimeout(currentTimeout);
         clipboardCopyElementTimers.delete(target);
     }
     else {
         showCheck(target);
+        if (clipboardCopyLiveRegion) {
+            if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+                /* This is a hack due to the way the aria live API works.
+                A screen reader will not read a live region again
+                if the text is the same. Adding a space character tells
+                the browser that the live region has updated,
+                which will cause it to read again, but with no audible difference. */
+                clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`;
+            }
+            else {
+                clipboardCopyLiveRegion.textContent = copiedAnnouncement;
+            }
+        }
     }
     clipboardCopyElementTimers.set(target, setTimeout(() => {
         showCopy(target);

data/app/components/primer/beta/clipboard_copy.rb

@@ -10,6 +10,8 @@ module Primer
     #
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
+    #
+    #   This component has a built-in `aria-live` region that announces "Copied!" when the copy element is pressed.
     class ClipboardCopy < Primer::Component
       status :beta
 

data/app/components/primer/beta/clipboard_copy.ts

@@ -37,12 +37,26 @@ document.addEventListener('clipboard-copy', ({target}) => {
   if (!target.hasAttribute('data-view-component')) return
 
   const currentTimeout = clipboardCopyElementTimers.get(target)
+  const clipboardCopyLiveRegion = target.parentNode?.querySelector<HTMLElement>('[data-clipboard-copy-feedback]')
+  const copiedAnnouncement = 'Copied!'
 
   if (currentTimeout) {
     clearTimeout(currentTimeout)
     clipboardCopyElementTimers.delete(target)
   } else {
     showCheck(target)
+    if (clipboardCopyLiveRegion) {
+      if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+        /* This is a hack due to the way the aria live API works.
+        A screen reader will not read a live region again
+        if the text is the same. Adding a space character tells
+        the browser that the live region has updated,
+        which will cause it to read again, but with no audible difference. */
+        clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`
+      } else {
+        clipboardCopyLiveRegion.textContent = copiedAnnouncement
+      }
+    }
   }
 
   clipboardCopyElementTimers.set(

data/app/components/primer/beta/clipboard_copy_button.rb

@@ -5,6 +5,8 @@ module Primer
     # `ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,
     # styled as a Primer button. It can be used wherever a button is desired, and works well
     # with components like `ButtonGroup`.
+    # @accessibility
+    #   This component has a built-in `aria-live` region that announces "Copied!" when the copy button is pressed.
     class ClipboardCopyButton < Primer::Beta::Button
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> and <%= link_to_component(Primer::Beta::ClipboardCopy) %>.
       def initialize(**system_arguments)

data/app/lib/primer/attributes_helper.rb

@@ -54,7 +54,7 @@ module Primer
     # It's designed to be used to normalize and merge data information from system_arguments
     # hashes. Consider using this pattern in component initializers:
     #
-    # @system_arguments[:data] = merge_aria(
+    # @system_arguments[:data] = merge_data(
     #   @system_arguments,
     #   { data: { foo: "bar" } }
     # )

data/lib/primer/forms/toggle_switch.html.erb

@@ -10,13 +10,5 @@
 
     <div><%= render(Caption.new(input: @input)) %></div>
   </span>
-  <%
-    csrf = @input.csrf || @view_context.form_authenticity_token(
-      form_options: {
-        method: :post,
-        action: @input.src
-      }
-    )
-  %>
-  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf_token: @input.csrf, **@input.input_arguments)) %>
 <% end %>

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 32
-      PATCH = 1
+      MINOR = 33
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -52,7 +52,7 @@ module Primer
       end
 
       def with_csrf_token
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
       def with_bad_csrf_token

data/previews/primer/beta/label_preview.rb

@@ -9,8 +9,13 @@ module Primer
       # @param size [Symbol] select [medium, large]
       # @param tag [Symbol] select [span, summary, a, div]
       # @param inline [Boolean] toggle
-      def playground(size: :medium, tag: :span, inline: false)
-        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      # @param href [String] URL to be used with an anchor tag
+      def playground(size: :medium, tag: :span, inline: false, href: nil)
+        if tag == :a
+          render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline, href: href || "#")) { "Link label" }
+        else
+          render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+        end
       end
 
       # @label Default Options

data/previews/primer/forms_preview/example_toggle_switch_form.html.erb

@@ -1,3 +1,3 @@
-<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
 <hr>
-<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", label: "Bad example", src: toggle_switch_index_path, id: "error-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>

data/static/info_arch.json

@@ -11630,7 +11630,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopy",
     "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.\n\nThis component by itself is not styled as a button, and can therefore only be used in limited circumstances.\nIf you're looking for a button, consider using {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}\ninstead.",
-    "accessibility_docs": "Always set an accessible label to help the user interact with the component.",
+    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\nThis component has a built-in `aria-live` region that announces \"Copied!\" when the copy element is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -11797,7 +11797,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopyButton",
     "description": "`ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,\nstyled as a Primer button. It can be used wherever a button is desired, and works well\nwith components like `ButtonGroup`.",
-    "accessibility_docs": null,
+    "accessibility_docs": "This component has a built-in `aria-live` region that announces \"Copied!\" when the copy button is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.32.1
+  version: 0.33.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-31 00:00:00.000000000 Z
+date: 2024-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview