From 7c85c500569fe6e1b29665c2eed37d58625ab06f Mon Sep 17 00:00:00 2001
From: Hector Garcia <hectahertz@github.com>
Date: Mon, 28 Feb 2022 21:55:17 +0100
Subject: [PATCH] Fix sequence of content in Subhead (#1950)

* Fix sequence of content in Subhead

When a heading, description, and action are rendered in the Subhead
component, the content now follows logical order on screen readers.

* Add changeset

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
---
 .changeset/fuzzy-bananas-kiss.md   | 5 +++++
 docs/content/components/subhead.md | 2 +-
 src/subhead/subhead.scss           | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-bananas-kiss.md

diff --git a/.changeset/fuzzy-bananas-kiss.md b/.changeset/fuzzy-bananas-kiss.md
new file mode 100644
index 0000000000..803ec81c74
--- /dev/null
+++ b/.changeset/fuzzy-bananas-kiss.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix sequence of content in Subhead
diff --git a/docs/content/components/subhead.md b/docs/content/components/subhead.md
index 10fbba6b5f..4dc887b243 100644
--- a/docs/content/components/subhead.md
+++ b/docs/content/components/subhead.md
@@ -65,8 +65,8 @@ Use all the elements together to create a Subhead with actions and a description
 ```html live title="Subhead with actions and description"
 <div class="Subhead">
   <h2 class="Subhead-heading">Subhead with actions and description</h2>
-  <div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
   <div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
+  <div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
 </div>
 ```
 
diff --git a/src/subhead/subhead.scss b/src/subhead/subhead.scss
index 6c51d01179..932dd05fb1 100644
--- a/src/subhead/subhead.scss
+++ b/src/subhead/subhead.scss
@@ -18,6 +18,7 @@
   font-size: $h2-size;
   font-weight: $font-weight-normal;
   flex: 1 1 auto;
+  order: 0;
 }
 
 // Make the text bold and red for dangerous content
@@ -31,6 +32,7 @@
   font-size: $body-font-size;
   color: var(--color-fg-muted);
   flex: 1 100%;
+  order: 2;
 }
 
 // Add 1 or 2 buttons to the right of the heading
@@ -38,6 +40,7 @@
   margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+  order: 1;
 
   + .Subhead-description {
     margin-top: $spacer-1;