primer_view_components 0.0.61 → 0.0.65

data/app/components/primer/component.rb

@@ -6,6 +6,7 @@ module Primer
   # @private
   class Component < ViewComponent::Base
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
+    include ViewComponent::PolymorphicSlots
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -14,12 +15,18 @@ module Primer
     include Status::Dsl
     include Audited::Dsl
 
+    INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
+
     private
 
     def raise_on_invalid_options?
       Rails.application.config.primer_view_components.raise_on_invalid_options
     end
 
+    def raise_on_invalid_aria?
+      Rails.application.config.primer_view_components.raise_on_invalid_aria
+    end
+
     def deprecated_component_warning(new_class: nil, version: nil)
       return if Rails.env.production? || silence_deprecations?
 
@@ -42,5 +49,75 @@ module Primer
     def silence_deprecations?
       Rails.application.config.primer_view_components.silence_deprecations
     end
+
+    def check_denylist(denylist = [], **arguments)
+      if should_raise_error?
+
+        # Convert denylist from:
+        # { [:p, :pt] => "message" } to:
+        # { p: "message", pt: "message" }
+        unpacked_denylist =
+          denylist.each_with_object({}) do |(keys, value), memo|
+            keys.each { |key| memo[key] = value }
+          end
+
+        violations = unpacked_denylist.keys & arguments.keys
+
+        if violations.any?
+          message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+          violations.each do |violation|
+            message += "\n The #{violation} argument is not allowed here. #{unpacked_denylist[violation]}"
+          end
+
+          raise(ArgumentError, message)
+        end
+      end
+
+      arguments
+    end
+
+    def validate_arguments(tag:, denylist_name: :system_arguments_denylist, **arguments)
+      deny_single_argument(:class, "Use `classes` instead.", **arguments)
+
+      if (denylist = arguments[denylist_name])
+        check_denylist(denylist, **arguments)
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        arguments.except!(denylist_name)
+        arguments.except!(*denylist.keys.flatten)
+      end
+
+      deny_aria_label(tag: tag, arguments: arguments)
+
+      arguments
+    end
+
+    def deny_single_argument(key, help_text, **arguments)
+      raise ArgumentError, "`#{key}` is an invalid argument. #{help_text}" \
+        if should_raise_error? && arguments.key?(key)
+
+      arguments.except!(key)
+    end
+
+    def deny_aria_label(tag:, arguments:)
+      return arguments.except!(:skip_aria_label_check) if arguments[:skip_aria_label_check]
+      return if arguments[:role]
+      return unless aria(:label, arguments)
+      return unless INVALID_ARIA_LABEL_TAGS.include?(tag)
+
+      raise ArgumentError, "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" if should_raise_aria_error?
+    end
+
+    def deny_tag_argument(**arguments)
+      deny_single_argument(:tag, "This component has a fixed tag.", **arguments)
+    end
+
+    def should_raise_error?
+      raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
+    end
+
+    def should_raise_aria_error?
+      raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
+    end
   end
 end

data/app/components/primer/counter_component.rb

@@ -51,7 +51,7 @@ module Primer
       @hide_if_zero = hide_if_zero
       @text = text
       @round = round
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @has_limit = !@limit.nil?
       @system_arguments[:title] = title

data/app/components/primer/details_component.rb

@@ -52,7 +52,7 @@ module Primer
     # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :details
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],

data/app/components/primer/dropdown/menu.rb

@@ -33,7 +33,7 @@ module Primer
         @direction = direction
         @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
 
-        @system_arguments = system_arguments
+        @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "details-menu"
         @system_arguments[:role] = "menu"
 

data/app/components/primer/dropdown.html.erb

@@ -1,7 +1,6 @@
 <%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
   <% c.summary(**@button_arguments) do %>
     <%= button %>
-    <% if @with_caret %><div class="dropdown-caret"></div><% end %>
   <% end %>
 
   <% c.body do %>

data/app/components/primer/dropdown.rb

@@ -9,6 +9,7 @@ module Primer
     renders_one :button, lambda { |**system_arguments, &block|
       @button_arguments = system_arguments
       @button_arguments[:button] = true
+      @button_arguments[:dropdown] = @with_caret
 
       view_context.capture { block&.call }
     }
@@ -87,7 +88,7 @@ module Primer
     #
     # @example Customizing the button
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button(scheme: :primary, variant: :small) do %>
+    #     <% c.button(scheme: :primary, size: :small) do %>
     #       Dropdown
     #     <% end %>
     #

data/app/components/primer/dropdown_menu_component.rb

@@ -42,7 +42,7 @@ module Primer
     def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
       @header = header
       @direction = direction
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @system_arguments[:tag] = "details-menu"
       @system_arguments[:role] = "menu"

data/app/components/primer/flash_component.rb

@@ -9,6 +9,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :action, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
 
@@ -41,7 +42,7 @@ module Primer
     #   <%= render(Primer::FlashComponent.new) do |component| %>
     #     This is a flash message with actions!
     #     <% component.action do %>
-    #       <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
+    #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
     #     <% end %>
     #   <% end %>
     #
@@ -54,7 +55,7 @@ module Primer
     def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
       @icon = icon
       @dismissible = dismissible
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],

data/app/components/primer/flex_component.rb

@@ -61,31 +61,31 @@ module Primer
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
     # @example Default
-    #   <%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Justify center
-    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Align end
-    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Direction column
-    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>

data/app/components/primer/flex_item_component.rb

@@ -2,7 +2,7 @@
 
 module Primer
   # Use `FlexItem` to specify the ability of a flex item to alter its
-  # dimensions to fill available space
+  # dimensions to fill available space.
   #
   # @deprecated
   #   Use <%= link_to_component(Primer::BoxComponent) %> instead.

data/app/components/primer/hellip_button.rb

@@ -20,7 +20,7 @@ module Primer
     # @param inline [Boolean] Whether or not the button is inline.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(inline: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       validate_aria_label
 

data/app/components/primer/hidden_text_expander.rb

@@ -22,7 +22,7 @@ module Primer
     # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(inline: false, button_arguments: {}, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @button_arguments = button_arguments
 
       @system_arguments[:tag] = :span

data/app/components/primer/image.rb

@@ -27,10 +27,10 @@ module Primer
     # @param lazy [Boolean] Whether or not to lazily load the image.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(src:, alt:, lazy: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
+      @src = src
       @system_arguments[:tag] = :img
-      @system_arguments[:src] = src
       @system_arguments[:alt] = alt
 
       return unless lazy
@@ -40,7 +40,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseComponent.new(**@system_arguments))
+      render(Primer::BaseComponent.new(src: image_path(@src), **@system_arguments))
     end
   end
 end

data/app/components/primer/image_crop.rb

@@ -6,6 +6,7 @@ module Primer
     # A loading indicator that is shown while the image is loading.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :loading, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:"data-loading-slot"] = true
 
@@ -27,7 +28,7 @@ module Primer
     # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(src:, rounded: true, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = "image-crop"
       @system_arguments[:src] = src
       @system_arguments[:rounded] = true if rounded

data/app/components/primer/label_component.rb

@@ -11,19 +11,26 @@ module Primer
     DEFAULT_TAG = :span
     TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
 
+    DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
-      primary: "Label--primary",
-      secondary: "Label--secondary",
-      info: "Label--info",
-      success: "Label--success",
-      warning: "Label--warning",
-      danger: "Label--danger",
+      DEFAULT_SCHEME => "",
+      :primary => "Label--primary",
+      :secondary => "Label--secondary",
+      :accent => "Label--accent",
+      :success => "Label--success",
+      :attention => "Label--attention",
+      :danger => "Label--danger",
+      :severe => "Label--severe",
+      :done => "Label--done",
+      :sponsors => "Label--sponsors",
       # deprecated
-      orange: "Label--orange",
-      purple: "Label--purple"
+      :info => "Label--info",
+      :warning => "Label--warning",
+      :orange => "Label--orange",
+      :purple => "Label--purple"
     }.freeze
-    DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
-    SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
+    DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
+    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
@@ -35,10 +42,13 @@ module Primer
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :info)) { "Info" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :accent)) { "Accent" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :warning)) { "Warning" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :attention)) { "Attention" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :severe)) { "Severe" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :done)) { "Done" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :sponsors)) { "Sponsors" } %>
     #
     # @example Variants
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
@@ -48,7 +58,7 @@ module Primer
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, variant: nil, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(

data/app/components/primer/layout_component.rb

@@ -7,6 +7,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :main, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
       system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
       system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)

data/app/components/primer/local_time.rb

@@ -33,7 +33,7 @@ module Primer
     # @param time_zone_name [Symbol] <%= one_of(Primer::LocalTime::TEXT_TYPE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(datetime:, initial_text: nil, weekday: DEFAULT_TEXT_TYPE, year: DEFAULT_DIGIT_TYPE, month: DEFAULT_TEXT_TYPE, day: DEFAULT_DIGIT_TYPE, hour: DEFAULT_DIGIT_TYPE, minute: DEFAULT_DIGIT_TYPE, second: DEFAULT_DIGIT_TYPE, time_zone_name: DEFAULT_TEXT_TYPE, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @datetime = datetime
 

data/app/components/primer/markdown.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Markdown` to wrap markdown content
+  # Use `Markdown` to wrap markdown content.
   class Markdown < Primer::Component
     status :beta
 

data/app/components/primer/menu_component.rb

@@ -26,6 +26,7 @@ module Primer
     # @param selected [Boolean] Whether the item is the current selection
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :items, lambda { |href:, selected: false, **system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :a
       system_arguments[:href] = href
       system_arguments[:"aria-current"] = :page if selected
@@ -58,7 +59,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :nav
       @system_arguments[:classes] = class_names(
         "menu",

data/app/components/primer/navigation/tab_component.rb

@@ -20,6 +20,7 @@ module Primer
       renders_one :panel, lambda { |**system_arguments|
         return unless @with_panel
 
+        deny_tag_argument(**system_arguments)
         system_arguments[:id] = @panel_id
         system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel

data/app/components/primer/octicon_component.rb

@@ -65,8 +65,10 @@ module Primer
         # Filter out classify options to prevent them from becoming invalid html attributes.
         # Note height and width are both classify options and valid html attributes.
         octicon_options = {
-          height: SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-        }.merge(@system_arguments.slice(:height, :width))
+          height: @system_arguments[:height] || SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+          width: @system_arguments[:width]
+        }
+        octicon_options.compact!
 
         @icon = Octicons::Octicon.new(icon_key, octicon_options)
         Primer::Octicon::Cache.set(cache_key, @icon)

data/app/components/primer/octicon_symbols_component.rb

@@ -6,8 +6,8 @@ module Primer
   # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
   class OcticonSymbolsComponent < Primer::Component
     # @example Symbol dictionary
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :icon_success)) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :text_danger)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :success)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :danger)) %>
     #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, size: :medium)) %>
     #   <%= render(Primer::OcticonSymbolsComponent.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
     #

data/app/components/primer/popover_component.rb

@@ -108,15 +108,15 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         "Popover"
       )
       @system_arguments[:position] ||= :relative
-      @system_arguments[:right] = false unless system_arguments.key?(:right)
-      @system_arguments[:left] = false unless system_arguments.key?(:left)
+      @system_arguments[:right] = false unless @system_arguments.delete(:right)
+      @system_arguments[:left] = false unless @system_arguments.delete(:left)
     end
 
     def render?

data/app/components/primer/progress_bar_component.rb

@@ -10,7 +10,8 @@ module Primer
     # @param percentage [Integer] The percent complete
     # @param bg [Symbol] The background color
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_many :items, lambda { |percentage: 0, bg: :success_inverse, **system_arguments|
+    renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :span
       system_arguments[:bg] = bg
       system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
@@ -35,25 +36,25 @@ module Primer
     #
     # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.item(bg: :info_inverse, percentage: 50) %>
+    #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
     #   <% end %>
     #
     # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.item(bg: :danger_inverse, percentage: 75) %>
+    #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
     #   <% end %>
     #
     # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.item(percentage: 10) %>
-    #     <% component.item(bg: :info_inverse, percentage: 20) %>
-    #     <% component.item(bg: :danger_inverse, percentage: 30) %>
+    #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
+    #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(size: SIZE_DEFAULT, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Progress",

data/app/components/primer/spinner_component.html.erb

@@ -1,7 +1,4 @@
-<span role="status">
-  <span class="sr-only">Loading</span>
-  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
-    <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
-  <% end %>
-</span>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
+<% end %>

data/app/components/primer/spinner_component.rb

@@ -30,7 +30,7 @@ module Primer
     # @param style [String] Custom element styles.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :svg
       @system_arguments[:style] ||= style
       @system_arguments[:animation] = :rotate

data/app/components/primer/subhead_component.rb

@@ -36,6 +36,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :actions, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
 
@@ -46,6 +47,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :description, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
 
@@ -111,7 +113,7 @@ module Primer
     # @param hide_border [Boolean] Whether to hide the border under the heading.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(spacious: false, hide_border: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @system_arguments[:tag] = :div
       @system_arguments[:classes] =

data/app/components/primer/tab_container_component.rb

@@ -26,7 +26,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = "tab-container"
     end
 

data/app/components/primer/time_ago_component.rb

@@ -12,7 +12,7 @@ module Primer
     # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(time:, micro: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:datetime] = time.utc.iso8601
       @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
       @system_arguments[:tag] = "time-ago"

data/app/components/primer/timeline_item_component.rb

@@ -27,6 +27,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :body, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(
         "TimelineItem-body",
@@ -40,7 +41,7 @@ module Primer
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
     #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.badge(bg: :success_inverse, color: :text_white, icon: :check) %>
+    #       <% component.badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
     #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
@@ -48,7 +49,7 @@ module Primer
     # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(condensed: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         "TimelineItem",
@@ -67,7 +68,7 @@ module Primer
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
-        @system_arguments = system_arguments
+        @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
           "TimelineItem-badge",

data/app/components/primer/tooltip.rb

@@ -72,6 +72,7 @@ module Primer
       @system_arguments = system_arguments
       @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:aria] = { label: label }
+      @system_arguments[:skip_aria_label_check] = true
 
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],