anchor_view_components 0.44.0 → 0.45.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b272707b7b7780690e4bd12712dfae937b8fd30e97cc4eaf9ab86b15a83a9122
-  data.tar.gz: ef9c2b7c05ccbbc0e24ef552da216c0e502e6d57d83c1b5101c53b5e665912cc
+  metadata.gz: 02e14b9cbe3088a320100d337b3f23f92c97e03f659bd16d42ac21655838cc07
+  data.tar.gz: 4323338bfdedf4ed58101ee366bd21726bc1f3d910d7c824a3bc8eae5ff93d59
 SHA512:
-  metadata.gz: 2f0273735e483b4b93949b639ac1c76191fda722709efd043908bee522f853a9ae500d57a127b32bdab5f65232a3769755a98fce1cce4e082038d998f149c324
-  data.tar.gz: e27c29a51d263e4d55ec537515d18215ed280fc6f19df997cb9d4733c6ebc60c6495b80fd4679882b77e3cbea629249ed1f0284665453e8e01288179773308d7
+  metadata.gz: 2c89ce43a18e3072e0a24d30ac43a4f489cfeea27c318dff78d4f02769c8c2418f1d179b2a71158eb44bc680cf1bd4b2f7d7cde0fe93948b2e2a55c523b7b645
+  data.tar.gz: 35f880936914bd255eec0d3cc77f95352aef81b0dbe60feaada58877100e3c2b45468cd61fe6c0b471bf9836f0055aaff74fa16803cfccf7bfd917fab36542b3

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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/autocomplete_component.html.erb

@@ -1,25 +1,25 @@
-<%= tag.div(
+<%= tag.div(**merge_options(wrapper_options,
   data: { controller: "autocomplete", autocomplete_url_value: src },
   role: "combobox",
   class: "group relative"
-) do %>
+)) do %>
   <% if form_builder.class.module_parent_name == "Anchor" %>
     <%= form_builder.text_field(
       name,
       **merge_options(input_options, default_input_options)
     ) %>
     <%= form_builder.text_field(
-      "#{name}_id".to_sym,
+      :"#{name}_id",
       { class: "hidden", data: { autocomplete_target: "hidden" }}
     ) %>
   <% else %>
     <%= form_builder.input(
-      "#{name}_search".to_sym,
+      :"#{name}_search",
       input_html: merge_options(input_options, default_input_options)
     ) %>
     <div class="hidden">
       <%= form_builder.input(
-        "#{name}_id".to_sym,
+        :"#{name}_id",
         input_html: { data: { autocomplete_target: "hidden" } }
       ) %>
     </div>

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/error_message_component.rb

@@ -13,8 +13,8 @@ module Anchor
       text-sm
     ).freeze
 
-    def initialize(form_builder:, attribute:, **kwargs)
-      @form_builder = form_builder
+    def initialize(object:, attribute:, **kwargs)
+      @object = object
       @attribute = attribute
 
       super(**kwargs)
@@ -22,16 +22,14 @@ module Anchor
 
     private
 
-    attr_reader :attribute, :form_builder
-
-    delegate :object, to: :form_builder
+    attr_reader :attribute
 
     def error_message
-      object.errors.full_messages_for(attribute).to_sentence
+      @object.errors.full_messages_for(attribute).to_sentence
     end
 
     def render?
-      object.errors.has_key?(attribute)
+      @object.errors.has_key?(attribute)
     end
   end
 end

data/app/components/anchor/input_component.rb

@@ -20,23 +20,19 @@ module Anchor
     ).freeze
 
     def initialize(
-      form_builder:,
       attribute:,
-      type:,
       starting_icon: nil,
       ending_icon: nil,
       **kwargs
     )
-      @form_builder = form_builder
       @attribute = attribute
-      @type = type
       @starting_icon = starting_icon
       @ending_icon = ending_icon
 
       super(**kwargs)
     end
 
-    attr_reader :attribute, :type, :starting_icon, :ending_icon
+    attr_reader :attribute, :starting_icon, :ending_icon
 
     def options
       {

data/app/components/anchor/label_component.rb

@@ -8,14 +8,10 @@ module Anchor
 
     attr_accessor :options
 
-    def initialize(form_builder:, attribute:, **options)
-      @form_builder = form_builder
-      @attribute = attribute
-      @options = options.merge(
-        class: Array(options.delete(:class)) + LABEL_CLASSES
-      )
+    def initialize(object:, attribute:, required: nil)
+      @options = { class: LABEL_CLASSES }
       @required = ModelValidators
-        .new(@form_builder.object, options)
+        .new(object, required:)
         .attribute_required?(attribute)
 
       super()

data/app/components/anchor/radio_button_collection_component.rb

@@ -1,40 +1,7 @@
 module Anchor
   class RadioButtonCollectionComponent < Component
-    attr_reader :attribute, :descriptions, :form_builder
-
-    def initialize(
-      form_builder:,
-      attribute:,
-      collection:,
-      value_method:,
-      text_method:,
-      descriptions: nil,
-      **options
-    )
-      @form_builder = form_builder
-      @attribute = attribute
-      @collection = collection
-      @value_method = value_method
-      @text_method = text_method
-      @descriptions = descriptions
-      @options = options
-
-      super()
-    end
-
     def options
-      @options.merge(
-        class: Array(@options.delete(:class)) +
-          RadioButtonComponent::INPUT_CLASSES
-      )
-    end
-
-    def radio(radio:)
-      RadioButtonComponent.new(
-        radio:,
-        attribute:,
-        form_builder:
-      )
+      { class: RadioButtonComponent::INPUT_CLASSES }
     end
   end
 end

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

@@ -5,7 +5,7 @@
   <% if description.present? %>
     <div class="flex flex-col gap-1">
       <%= radio.label %>
-      <%= description_span %>
+      <%= tag.span description, id: description_id, class: DESCRIPTION_CLASSES %>
     </div>
   <% else %>
     <%= tag.div radio.label, class: "self-center" %>

data/app/components/anchor/radio_button_component.rb

@@ -36,24 +36,20 @@ module Anchor
       text-sm
     ).freeze
 
-    def initialize(radio:, attribute:, form_builder:, **kwargs)
+    def initialize(form_builder:, radio:, attribute:, **kwargs)
+      @form_builder = form_builder
       @radio = radio
       @attribute = attribute
-      @form_builder = form_builder
 
       super(**kwargs)
     end
 
     private
 
-    attr_reader :radio, :attribute, :form_builder
+    attr_reader :form_builder, :radio, :attribute
 
     delegate :value, :object, to: :radio
 
-    def description_span
-      tag.span description, id: description_id, class: DESCRIPTION_CLASSES
-    end
-
     def radio_options
       {
         aria: description.present? && aria_description,

data/app/components/anchor/select_component.rb

@@ -1,15 +1,11 @@
 module Anchor
   class SelectComponent < Component
-    attr_reader :attribute
-
     def initialize(
-      form_builder:,
       attribute:,
       choices:,
       show_marker: true,
       **kwargs
     )
-      @form_builder = form_builder
       @attribute = attribute
       @choices = choices
       @show_marker = show_marker
@@ -24,7 +20,7 @@ module Anchor
     def html_options
       {
         class: InputComponent::INPUT_CLASSES,
-        data: { testid: "select-#{attribute.to_s.dasherize}" },
+        data: { testid: "select-#{@attribute.to_s.dasherize}" },
       }
     end
 

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

@@ -32,15 +32,7 @@ module Anchor
       options = {},
       html_options = {}
     )
-      render RadioButtonCollectionComponent.new(
-        form_builder: self,
-        attribute:,
-        collection:,
-        value_method:,
-        text_method:,
-        **options,
-        **html_options
-      ) do |component|
+      render RadioButtonCollectionComponent.new do |component|
         super(
           attribute,
           collection,
@@ -49,7 +41,11 @@ module Anchor
           options,
           component.options.merge(html_options),
         ) do |radio|
-          render component.radio(radio:)
+          render RadioButtonComponent.new(
+            radio:,
+            attribute:,
+            form_builder: self
+          )
         end
       end
     end
@@ -86,9 +82,7 @@ module Anchor
 
     def email_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :email,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
@@ -98,7 +92,7 @@ module Anchor
 
     def error_message_for(attribute, options = {})
       render ErrorMessageComponent.new(
-        form_builder: self,
+        object:,
         attribute:,
         **options
       )
@@ -106,10 +100,9 @@ module Anchor
 
     def label(attribute, text = nil, options = {}, &block)
       render LabelComponent.new(
-        form_builder: self,
+        object:,
         attribute:,
-        text:,
-        **options
+        required: options.delete(:required) { :if_has_validators }
       ) do |component|
         if block.present?
           super
@@ -126,31 +119,26 @@ module Anchor
 
     def number_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :number,
         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
 
     def search_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :search,
         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
 
     def select(attribute, choices = nil, options = {}, html_options = {}, &)
       render SelectComponent.new(
-        form_builder: self,
         attribute:,
         choices:,
         show_marker: options.fetch(:show_marker, true),
@@ -168,9 +156,7 @@ module Anchor
 
     def text_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :text,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|

data/app/helpers/anchor/model_validators.rb

@@ -1,13 +1,18 @@
 module Anchor
   class ModelValidators
-    def initialize(model, options)
+    # Pass the value :if_has_validators to the required keyword argument to
+    # indicate an unspecified value. Passing any other value will result in
+    # `required`'s truthiness being used to determine whether the attribute is
+    # required, while passing :if_has_validators will check the model's
+    # validators.
+    def initialize(model, required: :if_has_validators)
       @model = model
-      @options = options
+      @required = required
     end
 
     def attribute_required?(attribute)
-      if options.has_key?(:required)
-        options[:required]
+      if required != :if_has_validators
+        required
       elsif has_validators?
         attribute_required_by_validators?(attribute)
       else
@@ -17,7 +22,7 @@ module Anchor
 
     private
 
-    attr_reader :model, :options
+    attr_reader :model, :required
 
     def has_validators?
       model.class.respond_to?(:validators_on)

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.0".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.0
 platform: ruby
 authors:
 - Buoy Software
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-08 00:00:00.000000000 Z
+date: 2024-01-10 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