Addressing a11y feedback on the SegmentedControl (#1586)

primer · Dec 13, 2022 · bf70400 · bf70400
1 parent 50572b1
commit bf70400
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/slimy-humans-cheer.md 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
@@ -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
@@ -26,36 +26,36 @@ 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") %>
       #   <% end %>
       #
       # @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) %>