anchor_view_components 0.44.0 → 0.45.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b272707b7b7780690e4bd12712dfae937b8fd30e97cc4eaf9ab86b15a83a9122
-  data.tar.gz: ef9c2b7c05ccbbc0e24ef552da216c0e502e6d57d83c1b5101c53b5e665912cc
+  metadata.gz: e70ad5e5ff2eb34b41352d913159bfa0baae9417393ce24007ef061a7eae1c8a
+  data.tar.gz: 4245d65fc162e270dc8d4711b17159d1ef271eb8b283c6d75ed4d59b77faf1cf
 SHA512:
-  metadata.gz: 2f0273735e483b4b93949b639ac1c76191fda722709efd043908bee522f853a9ae500d57a127b32bdab5f65232a3769755a98fce1cce4e082038d998f149c324
-  data.tar.gz: e27c29a51d263e4d55ec537515d18215ed280fc6f19df997cb9d4733c6ebc60c6495b80fd4679882b77e3cbea629249ed1f0284665453e8e01288179773308d7
+  metadata.gz: 383e4c7e44d61c1346d192fbe0fb6362b112b97854f87a98f7ea506ea2a5cd9449c68c4d80cd77020d2ad950d69e652e81b9b46980fb5cdc8c8a2c9c484bb485
+  data.tar.gz: cff07e92d9e67bb1d8228eea11d950cbef4420505c6f349203d3bcd3dd98c9d80ac7a0cd51f80980da60aadf1403fd797d5bc9420e2555ae12592c094ba080ce

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.45.1
+
+### Patch Changes
+
+- 73f1bd0: Reverted commit b050620b45f0ef6e73cfae2d2fe106c4831e7587, which was causing issues with some forms in the BuoyRails app.
+
+## 0.45.0
+
+### Minor Changes
+
+- 2cf21ed: Add more-horiz icon
+- 2d2c3e6: Added a AssistiveTechNotifications component for notifying assistive tech users of changes that might otherwise only be presented visually. The output is two [ARIA live regions][aria-live-regions]—one `polite`, the other `assertive`—and is meant to be placed in an application’s layout so that it’s rendered on every page. Also provided, is the component’s public JavaScript function, `notifyAssistiveTech`, so that applications can easily send messages to these two live regions.
+
+  [aria-live-regions]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+
 ## 0.44.0
 
 ### Minor Changes

data/app/assets/images/icons/percentage.svg

@@ -0,0 +1,6 @@
+<!-- Source: Iconoir, added via `bin/add_icon` -->
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 19C15.8954 19 15 18.1046 15 17C15 15.8954 15.8954 15 17 15C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 9C5.89543 9 5 8.10457 5 7C5 5.89543 5.89543 5 7 5C8.10457 5 9 5.89543 9 7C9 8.10457 8.10457 9 7 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 5L5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/components/anchor/anchor_view_components.ts

@@ -10,6 +10,7 @@ import ToastController from "./toast_controller";
 import ToggleController from "./toggle_controller";
 import TypeaheadSelectController from "./typeahead_select_controller";
 import { Application } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export function registerAnchorControllers(application: Application) {
   application.register("autocomplete", AutocompleteController);
@@ -31,4 +32,5 @@ export {
   ToastController,
   ToggleController,
   TypeaheadSelectController,
+  notifyAssistiveTech,
 };

data/app/components/anchor/assistive_tech_notifications_component.html.erb

@@ -0,0 +1,23 @@
+<%= tag.div(
+  **merge_options(
+    wrapper_options,
+    aria: {
+      atomic: true,
+      live: "polite",
+    },
+    class: "sr-only",
+    id: "js-assistive-tech-notifications",
+  ),
+) %>
+
+<%= tag.div(
+  **merge_options(
+    wrapper_options,
+    aria: {
+      atomic: true,
+      live: "assertive",
+    },
+    class: "sr-only",
+    id: "js-assistive-tech-notifications-assertive",
+  ),
+) %>

data/app/components/anchor/assistive_tech_notifications_component.rb

@@ -0,0 +1,4 @@
+module Anchor
+  class AssistiveTechNotificationsComponent < Component
+  end
+end

data/app/components/anchor/assistive_tech_notifications_component.ts

@@ -0,0 +1,15 @@
+export function notifyAssistiveTech(message: string, assertive = false) {
+  const liveRegionId = assertive
+    ? "js-assistive-tech-notifications-assertive"
+    : "js-assistive-tech-notifications";
+  const liveRegion = document.getElementById(liveRegionId);
+
+  if (liveRegion) {
+    liveRegion.textContent = message;
+  } else {
+    console.warn(
+      `Could not find #${liveRegionId}.`,
+      "Make sure to include `anchor_assistive_tech_notifications` in your Rails layout.",
+    );
+  }
+}

data/app/components/anchor/copy_to_clipboard_component.en.yml

@@ -1,2 +1,3 @@
 en:
+  assistive_tech_notification: Copied
   copy_to_clipboard: Copy to Clipboard

data/app/components/anchor/copy_to_clipboard_component.html.erb

@@ -4,7 +4,7 @@
     action: "click->copy-to-clipboard#copy",
     controller: "copy-to-clipboard",
     copy_to_clipboard_text_to_copy_value: value,
-    copy_to_clipboard_hidden_class: "hidden",
+    copy_to_clipboard_assistive_tech_notification_value: t(".assistive_tech_notification"),
   },
   class: "bg-transparent",
   type: "button",
@@ -15,7 +15,7 @@
   ) %>
   <%= anchor_icon(
     icon: "check",
-    classes: "hidden",
+    hidden: true,
     data: { copy_to_clipboard_target: "successIcon"},
   ) %>
 <% end %>

data/app/components/anchor/copy_to_clipboard_controller.ts

@@ -1,26 +1,28 @@
 import { Controller } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export default class extends Controller<HTMLDivElement> {
   static targets = [ "initialIcon", "successIcon"];
-  static classes = [ "hidden" ]
+  static values = {
+    assistiveTechNotification: String,
+    notificationDelay: { type: Number, default: 1500 },
+    textToCopy: String,
+  };
 
   declare readonly initialIconTarget: SVGElement;
   declare readonly successIconTarget: SVGElement;
   declare readonly notificationDelayValue: number;
   declare readonly hiddenClass: string;
   declare readonly textToCopyValue: string;
+  declare readonly assistiveTechNotificationValue: string;
   declare readonly hasTextToCopyValue: boolean;
 
-  static values = {
-    notificationDelay: { type: Number, default: 1500 },
-    textToCopy: String,
-  };
-
   copy(): void {
     if (this.hasTextToCopyValue) {
       navigator.clipboard.writeText(this.textToCopyValue);
     }
     this.toggleIcons();
+    notifyAssistiveTech(this.assistiveTechNotificationValue);
 
     setTimeout(() => {
       this.toggleIcons();
@@ -28,7 +30,7 @@ export default class extends Controller<HTMLDivElement> {
   }
 
   toggleIcons(): void {
-    this.initialIconTarget.classList.toggle(this.hiddenClass); 
-    this.successIconTarget.classList.toggle(this.hiddenClass); 
+    this.initialIconTarget.toggleAttribute("hidden");
+    this.successIconTarget.toggleAttribute("hidden");
   }
 }

data/app/components/anchor/toast_component.html.erb

@@ -1,7 +1,11 @@
 <%= tag.div(
   **merge_options(wrapper_options, {
     class: "toast",
-    data: { controller: "toast", testid: test_id },
+    data: {
+      controller: "toast",
+      toast_assistive_tech_notification_value: assistive_tech_notification,
+      testid: test_id,
+    },
     popover: "manual",
   })
 ) do %>

data/app/components/anchor/toast_component.rb

@@ -25,6 +25,10 @@ module Anchor
       content?
     end
 
+    def assistive_tech_notification
+      strip_tags(content)
+    end
+
     def test_id
       wrapper_options.dig(:data, :testid) || "toast"
     end

data/app/components/anchor/toast_controller.ts

@@ -1,11 +1,14 @@
 import { Controller } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export default class extends Controller<HTMLDivElement> {
   static values = {
+    assistiveTechNotification: String,
     hideDelay: { type: Number, default: 3000 },
     showDelay: { type: Number, default: 200 },
   };
 
+  declare assistiveTechNotificationValue: string;
   declare hideDelayValue: number
   declare showDelayValue: number
 
@@ -17,6 +20,8 @@ export default class extends Controller<HTMLDivElement> {
     setTimeout(() => {
       this.element.remove();
     }, this.hideDelayValue);
+
+    notifyAssistiveTech(this.assistiveTechNotificationValue);
   }
 
   disconnect(): void {

data/app/helpers/anchor/form_builder.rb

@@ -132,7 +132,7 @@ module Anchor
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
-        super attribute, component.options.merge(options)
+        super(attribute, component.options.merge(options))
       end
     end
 
@@ -144,7 +144,7 @@ module Anchor
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
-        super attribute, component.options.merge(options)
+        super(attribute, component.options.merge(options))
       end
     end
 

data/app/helpers/anchor/view_helper.rb

@@ -2,6 +2,7 @@ module Anchor
   module ViewHelper
     ANCHOR_HELPERS = %i[
       action_menu
+      assistive_tech_notifications
       autocomplete/results
       badge
       banner

data/lib/anchor/view_components/version.rb

@@ -1,5 +1,5 @@
 module Anchor
   module ViewComponents
-    VERSION = "0.44.0".freeze
+    VERSION = "0.45.1".freeze
   end
 end

data/previews/anchor/assistive_tech_notifications_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= anchor_text do %>
+  This component is visually hidden, by design. Inspect the page source and look
+  for the two
+  <%= anchor_link(
+    "ARIA live regions",
+    href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions",
+  ) %>:
+  <code>div#js-assistive-tech-notifications</code>
+  and <code>div#js-assistive-tech-notifications-assertive</code>.
+<% end %>

data/previews/anchor/assistive_tech_notifications_component_preview.rb

@@ -0,0 +1,5 @@
+module Anchor
+  class AssistiveTechNotificationsComponentPreview < Preview
+    def default; end
+  end
+end

data/previews/forms/with_icons.html.erb

@@ -1,20 +1,11 @@
-<%= anchor_form_with url: false, method: :get do |form| %>
-  <%= form.search_field :search, placeholder: "Search…",
-    starting_icon: :search %>
-  <%= form.text_field :search, placeholder: "Search…",
-    ending_icon: :calendar %>
-  <%= form.text_field :search, placeholder: "Search…", starting_icon: :search,
-    ending_icon: :calendar %>
-  <%= form.number_field(
-    :amount,
-    placeholder: "0.00",
-    starting_icon: :dollar,
-    step: 0.01
-  ) %>
-  <%= form.number_field(
-    :amount,
-    placeholder: "0",
-    ending_icon: :dollar,
-    step: 1
-  ) %>
+<%= anchor_form_with url: false do |form| %>
+  <%= tag.div do %>
+    <%= form.label :price %>
+    <%= form.text_field :price, inputmode: :numeric, starting_icon: "dollar" %>
+  <% end %>
+
+  <%= tag.div do %>
+    <%= form.label :discount %>
+    <%= form.text_field :discount, inputmode: :numeric, ending_icon: "percentage" %>
+  <% end %>
 <% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.44.0
+  version: 0.45.1
 platform: ruby
 authors:
 - Buoy Software
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-08 00:00:00.000000000 Z
+date: 2024-01-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -69,6 +69,7 @@ files:
 - app/assets/images/icons/nav-arrow-left.svg
 - app/assets/images/icons/nav-arrow-right.svg
 - app/assets/images/icons/paste-clipboard.svg
+- app/assets/images/icons/percentage.svg
 - app/assets/images/icons/plus.svg
 - app/assets/images/icons/search.svg
 - app/assets/images/icons/warning-circle.svg
@@ -82,6 +83,9 @@ files:
 - app/components/anchor/action_menu_component.html.erb
 - app/components/anchor/action_menu_component.rb
 - app/components/anchor/anchor_view_components.ts
+- app/components/anchor/assistive_tech_notifications_component.html.erb
+- app/components/anchor/assistive_tech_notifications_component.rb
+- app/components/anchor/assistive_tech_notifications_component.ts
 - app/components/anchor/autocomplete/results_component.html.erb
 - app/components/anchor/autocomplete/results_component.rb
 - app/components/anchor/autocomplete_component.en.yml
@@ -196,6 +200,8 @@ files:
 - previews/anchor/action_menu_component_preview/autoplacement.html.erb
 - previews/anchor/action_menu_component_preview/custom_trigger.html.erb
 - previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb
+- previews/anchor/assistive_tech_notifications_component_preview.rb
+- previews/anchor/assistive_tech_notifications_component_preview/default.html.erb
 - previews/anchor/badge_component_preview.rb
 - previews/anchor/banner_component_preview.rb
 - previews/anchor/banner_component_preview/body_only.html.erb