BugFix: Use first-of-type for buttongroup selector (#5343)

* BugFix: Use first-of-type for buttongroup selector

* test(vrt): update snapshots

* Create big-jokes-jog.md

---------

Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>

Author: jonrohan

.changeset/big-jokes-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+BugFix: Fix issue in ButtonGroup Overlay screenshots by updating the selector to use `:is(button, a)` and `:first-of-type` and `:last-of-type` pseudo-classes.

.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png

@@ -3,18 +3,18 @@
   vertical-align: middle;
   isolation: isolate;
 
-  & > *:not([data-loading-wrapper]) {
+  & > *:not([data-loading-wrapper]):is(button, a) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
     border-radius: 0;
 
-    &:first-child {
+    &:first-of-type {
       border-top-left-radius: var(--borderRadius-medium);
       border-bottom-left-radius: var(--borderRadius-medium);
     }
 
-    &:last-child {
+    &:last-of-type {
       border-top-right-radius: var(--borderRadius-medium);
       border-bottom-right-radius: var(--borderRadius-medium);
     }

.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png

@@ -19,17 +19,17 @@ const StyledButtonGroup = toggleStyledComponent(
     vertical-align: middle;
     isolation: isolate;
 
-    && > *:not([data-loading-wrapper]) {
+    && > *:not([data-loading-wrapper]):is(button, a) {
       margin-inline-end: -1px;
       position: relative;
       border-radius: 0;
 
-      :first-child {
+      :first-of-type {
         border-top-left-radius: ${get('radii.2')};
         border-bottom-left-radius: ${get('radii.2')};
       }
 
-      :last-child {
+      :last-of-type {
         border-top-right-radius: ${get('radii.2')};
         border-bottom-right-radius: ${get('radii.2')};
       }