Introduce ARIA snapshot tests for all components

.github/workflows/test.yml

@@ -218,7 +218,7 @@ jobs:
       run: |
         USE_BROWSER=firefox bundle exec rake test:system
   visual:
-    name: Visual Regressions
+    name: Visual and Semantic Markup Regressions
     if: ${{ github.event_name == 'pull_request' }}
     timeout-minutes: 20
     runs-on: ubuntu-latest-8-cores
@@ -257,17 +257,17 @@ jobs:
       uses: stefanzweifel/git-auto-commit-action@v5
       with:
         commit_message: Generating component snapshots
-        file_pattern: .playwright/screenshots/**/*.png
+        file_pattern: .playwright/screenshots/**/*.png .playwright/screenshots/**/*.yml
     - name: "Changes detected"
       if: steps.auto-commit.outputs.changes_detected == 'true'
       uses: phulsechinmay/[email protected]
       with:
         message: |
-          ### ⚠️ Visual differences found
+          ### ⚠️ Visual or Semantic markup differences found
 
-          Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.
+          Our visual and semantic markup comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.
 
-          [Review visual differences](https://github.com/primer/view_components/pull/${{ github.event.number }}/files?file-filters%5B%5D=.png&show-viewed-files=false)
+          [Review differences](https://github.com/primer/view_components/pull/${{ github.event.number }}/files?file-filters%5B%5D=.png&file-filters%5B%5D=.yml&show-viewed-files=false)
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         COMMENT_IDENTIFIER: 'visual-comparison-diff'
     - uses: actions/upload-artifact@v4

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/aria-snapshot.yml

@@ -0,0 +1,8 @@
+- toolbar:
+  - button "Search"
+  - button "Edit"
+  - button "Archive"
+  - button "Heart"
+  - button "Bookmark"
+  - button "Mention"
+  - button "Attach"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/default/aria-snapshot.yml

@@ -0,0 +1,8 @@
+- heading "Action List" [level=3]
+- list "Action List":
+  - listitem:
+    - link "Item one"
+  - listitem:
+    - link "Item two"
+  - listitem:
+    - link "Item three"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/heading/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- heading "This is a title" [level=3]
+- text: This is a subtitle

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_active/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Active item"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_danger/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Danger item"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_default/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Default item"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_disabled/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - button "Disabled item Item description" [disabled]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_leading_trailing_visual/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Item with trailing visual"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_trailing_action/aria-snapshot.yml

@@ -0,0 +1,4 @@
+- list "List heading":
+  - listitem:
+    - link "Default item"
+    - button "Button tooltip"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_with_description/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Default item This is a description"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/item_with_description_inline/aria-snapshot.yml

@@ -0,0 +1,3 @@
+- list "List heading":
+  - listitem:
+    - link "Default item This is a description"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/long_label_with_tooltip/aria-snapshot.yml

@@ -0,0 +1,9 @@
+- list "List heading":
+  - listitem:
+    - button "Really really long label that may wrap, truncate, or appear as a tooltip"
+  - listitem:
+    - button "Really really long label that may wrap, truncate, or appear as a tooltip"
+  - listitem:
+    - button "Really really long label that may wrap, truncate, or appear as a tooltip"
+  - listitem:
+    - button "Really really long label that may wrap, truncate, or appear as a tooltip"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/aria-snapshot--after-interaction.yml

@@ -0,0 +1,7 @@
+- button "Menu"
+- menu "Menu":
+  - menuitem "Copy link"
+  - menuitem "Quote reply"
+  - menuitem "Reference in new issue"
+  - menuitem "Edit Change settings"
+  - menuitem "Delete Sayonara"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Menu"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Menu"
+- menu "Menu":
+  - menuitemcheckbox "langermank Katie Langerman" [checked]
+  - menuitemcheckbox "jonrohan Jon Rohan"
+  - menuitemcheckbox "broccolinisoup Armağan Ersöz" [checked]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Menu"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- 'button "Menu: Quote reply"'
+- 'menu "Menu: Quote reply"':
+  - menuitemradio "Copy link Recommended"
+  - menuitemradio "Quote reply" [checked]
+  - menuitemradio "Reference in new issue"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/aria-snapshot.yml

@@ -0,0 +1 @@
+- 'button "Menu: Quote reply"'

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Menu"
+- menu "Menu":
+  - menuitemradio "Copy link"
+  - menuitemradio "Quote reply" [checked]
+  - menuitemradio "Reference in new issue"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Menu"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/aria-snapshot--after-interaction.yml

@@ -0,0 +1,4 @@
+- button "A wider menu"
+- menu "A wider menu":
+  - menuitemradio "Default This is an example for wide ActionMenus Recommended" [checked]
+  - menuitemradio "Extended It allows for extended descriptions with extra afforance for additional visuals"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "A wider menu"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/with_groups/aria-snapshot--after-interaction.yml

@@ -0,0 +1,20 @@
+- button "Favorite character"
+- menu "Favorite character":
+  - text: Battlestar Galactica
+  - group "Battlestar Galactica":
+    - menuitem "William Adama"
+    - menuitem "Kara \"Starbuck\" Thrace"
+    - menuitem "Sharon \"Boomer\" Valerii"
+    - menuitem "Gaius Baltar"
+  - text: Star Trek
+  - group "Star Trek":
+    - menuitem "Capt. Jean-luc Picard"
+    - menuitem "Capt. Kathryn M. Janeway"
+    - menuitem "Capt. Benjamin L. Sisko"
+    - menuitem "Capt. James T. Kirk"
+  - text: Star Wars
+  - group "Star Wars":
+    - menuitem "Leia Organa"
+    - menuitem "Luke Skywalker"
+    - menuitem "Han Solo"
+    - menuitem "Chewbacca"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/with_groups/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Favorite character"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/with_items_and_groups/aria-snapshot--after-interaction.yml

@@ -0,0 +1,11 @@
+- button "Meal preference"
+- menu "Meal preference":
+  - group:
+    - menuitem "Meat option"
+  - text: Vegetarian options
+  - group "Vegetarian options":
+    - menuitem "Grilled portbello mushroom"
+    - menuitem "Polenta"
+    - menuitem "Seitan"
+  - group:
+    - menuitem "Fish option"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/with_items_and_groups/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Meal preference"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/auto_complete/default/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- text: Select a fruit
+- combobox "Select a fruit"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/dismissible/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- paragraph: This is a dismissable banner.
+- button "Dismiss"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/full_width/aria-snapshot.yml

@@ -0,0 +1 @@
+- paragraph: This is a full width banner.

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_danger/aria-snapshot.yml

@@ -0,0 +1 @@
+- paragraph: This is a danger banner!

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_default/aria-snapshot.yml

@@ -0,0 +1 @@
+- paragraph: This is a default banner.

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_success/aria-snapshot.yml

@@ -0,0 +1 @@
+- paragraph: This is a success banner!

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_warning/aria-snapshot.yml

@@ -0,0 +1 @@
+- paragraph: This is a warning banner!

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/with_action_button/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- paragraph: This is a banner with an action!
+- button "Take action"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/with_action_content/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- paragraph: Did you know? Comments can be edited.
+- button "Edit"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/button_marketing/scheme_default/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Default"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/button_marketing/sizes_default/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Default"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/aria-snapshot.yml

@@ -0,0 +1,2 @@
+- checkbox "Jean-Luc Picard": "1"
+- text: Jean-Luc Picard With a caption

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/aria-snapshot.yml

@@ -0,0 +1,10 @@
+- group "I would go into battle with:":
+  - text: "I would go into battle with: With a caption"
+  - checkbox "Jean-Luc Picard": picard1
+  - text: Jean-Luc Picard
+  - checkbox "Hikaru Sulu": sulu1
+  - text: Hikaru Sulu
+  - checkbox "Kathryn Janeway": janeway1
+  - text: Kathryn Janeway
+  - checkbox "Benjamin Sisko": sisko1
+  - text: Benjamin Sisko

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Show Dialog"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/aria-snapshot--after-interaction.yml

@@ -0,0 +1,7 @@
+- button "Show overlay"
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content
+  - button "Cancel"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/dialog_inside_overlay/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Show overlay"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/initally_open/aria-snapshot.yml

@@ -0,0 +1,5 @@
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/left_side/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Show Dialog"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/aria-snapshot--after-interaction.yml

@@ -0,0 +1,5 @@
+- button "Show Dialog"
+- dialog "Test Dialog":
+  - heading "Test Dialog" [level=1]
+  - button "Close"
+  - text: Content

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/right_side/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Show Dialog"