From bf70400033f6d0aa4c57020f37ba8ccd51e9ef7a Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Mon, 12 Dec 2022 20:09:56 -0800
Subject: [PATCH] Addressing a11y feedback on the SegmentedControl (#1586)

---
 .changeset/slimy-humans-cheer.md                   |  5 +++++
 app/components/primer/alpha/segmented_control.pcss | 12 ++++++++++++
 app/components/primer/alpha/segmented_control.rb   | 10 +++++-----
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/slimy-humans-cheer.md

diff --git a/.changeset/slimy-humans-cheer.md b/.changeset/slimy-humans-cheer.md
new file mode 100644
index 0000000000..b5ba2a40bd
--- /dev/null
+++ b/.changeset/slimy-humans-cheer.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Updating touch targets on SegmentedControl
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
index 983f125476..fc68c6ae5c 100644
--- a/app/components/primer/alpha/segmented_control.pcss
+++ b/app/components/primer/alpha/segmented_control.pcss
@@ -75,6 +75,10 @@
 
     &.Button--iconOnly {
       width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
+      }
     }
   }
 
@@ -84,6 +88,10 @@
 
     &.Button--iconOnly {
       width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
+      }
     }
   }
 
@@ -93,6 +101,10 @@
 
     &.Button--iconOnly {
       width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+
+      &::before {
+        @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
+      }
     }
   }
 
diff --git a/app/components/primer/alpha/segmented_control.rb b/app/components/primer/alpha/segmented_control.rb
index fbc5dcf9d9..98a8ee4b48 100644
--- a/app/components/primer/alpha/segmented_control.rb
+++ b/app/components/primer/alpha/segmented_control.rb
@@ -26,7 +26,7 @@ class SegmentedControl < Primer::Component
 
       # @example Basic usage
       #
-      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
       #     <%= c.with_item(label: "Preview", selected: true) %>
       #     <%= c.with_item(label: "Raw") %>
       #     <%= c.with_item(label: "Blame") %>
@@ -34,28 +34,28 @@ class SegmentedControl < Primer::Component
       #
       # @example Small
       #
-      #   <%= render(Primer::Alpha::SegmentedControl.new(size: :small)) do |c| %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c| %>
       #     <%= c.with_item(label: "Preview", selected: true) %>
       #     <%= c.with_item(label: "Raw") %>
       #     <%= c.with_item(label: "Blame") %>
       #   <% end %>
       #
       # @example With icons
-      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
       #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
       #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
       #     <%= c.with_item(label: "Blame", icon: :people) %>
       #   <% end %>
       #
       # @example With icons only
-      #   <%= render(Primer::Alpha::SegmentedControl.new(hide_labels: true)) do |c| %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |c| %>
       #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
       #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
       #     <%= c.with_item(label: "Blame", icon: :people) %>
       #   <% end %>
       #
       # @example Fill width of parent
-      #   <%= render(Primer::Alpha::SegmentedControl.new(full_width: true)) do |c| %>
+      #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |c| %>
       #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
       #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
       #     <%= c.with_item(label: "Blame", icon: :people) %>