Fix heading order issues, exclusive of Accordion because there's a PR making major changes to that component's view currently open

script/puppeteer-tests.js

@@ -73,32 +73,18 @@ describe('UI tests', function () {
 
   const skippedRules = {
     'Accordion': ['heading-order', 'region'],
-    'Balloon': ['color-contrast', 'heading-order', 'label'],
+    'Balloon': ['color-contrast', 'label'],
-    'Button': ['heading-order'],
+    'Checkbox': ['region'],
-    'Checkbox': ['heading-order', 'region'],
-    'ClickableSvg': ['heading-order'],
-    'ClickableText': ['heading-order'],
-    'Colors': ['heading-order'],
-    'Confetti': ['heading-order'],
-    'Container': ['heading-order'],
-    'DisclosureIndicator': ['heading-order'],
-    'Fonts': ['heading-order'],
-    'Heading': ['heading-order'],
     'Loading': ['color-contrast'],
-    'Menu': ['heading-order', 'region'],
+    'Menu': ['region'],
     'Modal': ['region'],
-    'Message': ['heading-order', 'region'],
+    'Message': ['region'],
-    'Page': ['color-contrast', 'heading-order', 'select-name'],
+    'Page': ['color-contrast', 'select-name'],
     'RadioButton': ['duplicate-id', 'region'],
-    'SegmentedControl': ['heading-order', 'region'],
+    'SegmentedControl': ['region'],
     'Select': ['label'],
-    'SideNav': ['heading-order'],
+    'Switch': ['aria-allowed-attr'],
-    'SortableTable': ['heading-order'],
-    'Switch': ['aria-allowed-attr', 'heading-order'],
-    'Table': ['heading-order'],
     'Tabs': ['region'],
-    'Text': ['heading-order'],
-    'Tooltip': ['heading-order'],
   }
 
   const specialProcessing = {

styleguide-app/Debug/Control/View.elm

@@ -59,7 +59,7 @@ viewExampleCode ellieLink component values =
                     [ details
                         []
                         [ summary []
-                            [ Heading.h4
+                            [ Heading.h3
                                 [ Heading.css [ Css.display Css.inline ]
                                 ]
                                 [ text example.sectionName ]
@@ -87,7 +87,7 @@ viewExampleCode ellieLink component values =
 viewSection : String -> List (Html msg) -> Html msg
 viewSection name children =
     section [ css [ flex (int 1) ] ]
-        (Heading.h3 [] [ text name ]
+        (Heading.h2 [] [ text name ]
             :: children
         )
 

styleguide-app/Examples/Checkbox.elm

@@ -46,7 +46,7 @@ example =
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
             , viewDisabledCheckbox "styleguide-checkbox-disabled" state
             , viewMultilineCheckboxes state
-            , h3 [] [ text "Premium Checkboxes" ]
+            , h2 [] [ text "Premium Checkboxes" ]
             , viewPremiumCheckboxes state
             ]
     , categories = [ Inputs ]
@@ -140,7 +140,7 @@ viewMultilineCheckboxes : State -> Html Msg
 viewMultilineCheckboxes state =
     Html.section
         [ css [ Css.width (Css.px 500) ] ]
-        [ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ]
+        [ Html.h2 [] [ Html.text "Multiline Text in Checkboxes" ]
         , let
             id =
                 "styleguide-checkbox-multiline"

styleguide-app/Examples/Colors.elm

@@ -91,7 +91,7 @@ example =
               , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
               ]
                 |> viewColors
-            , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
+            , Heading.h2 [] [ Html.text "Background Highlight Colors" ]
             , Text.mediumBody [ Text.plaintext "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
             , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
               , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
@@ -109,7 +109,7 @@ example =
               , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
               ]
                 |> viewColors
-            , Heading.h3 [] [ Html.text "Text Highlight Colors" ]
+            , Heading.h2 [] [ Html.text "Text Highlight Colors" ]
             , Text.mediumBody [ Text.plaintext "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
             , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
               , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )

styleguide-app/Examples/Fonts.elm

@@ -43,13 +43,13 @@ example =
             |> List.map viewPreview
     , view =
         \ellieLinkConfig _ ->
-            [ Heading.h3 [] [ Html.text "baseFont" ]
+            [ Heading.h2 [] [ Html.text "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h3 [] [ Html.text "quizFont" ]
+            , Heading.h2 [] [ Html.text "quizFont" ]
             , Html.p [ css [ Fonts.quizFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h3 [] [ Html.text "ugFont" ]
+            , Heading.h2 [] [ Html.text "ugFont" ]
             , Html.p [ css [ Fonts.ugFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]

styleguide-app/Examples/Page.elm

@@ -117,7 +117,7 @@ viewExample viewName view recoveryText extras =
             , Css.marginBottom (Css.px 20)
             ]
         ]
-        [ Heading.h3 [] [ Html.text viewName ]
+        [ Heading.h2 [] [ Html.text viewName ]
         , Html.div [] extras
         , Html.code []
             [ Html.text <|

styleguide-app/Examples/SortableTable.elm

@@ -137,9 +137,9 @@ example =
                     , { firstName = "First5", lastName = "Last5", coins = 5 }
                     ]
             in
-            [ Heading.h3 [] [ Html.text "With sortable headers" ]
+            [ Heading.h2 [] [ Html.text "With sortable headers" ]
             , SortableTable.view config sortState data
-            , Heading.h3 [] [ Html.text "Loading" ]
+            , Heading.h2 [] [ Html.text "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
     }

styleguide-app/Examples/Switch.elm

@@ -45,7 +45,7 @@ example =
         ]
     , view =
         \ellieLinkConfig interactiveIsOn ->
-            [ Heading.h3 [] [ Html.text "Interactive" ]
+            [ Heading.h2 [] [ Html.text "Interactive" ]
             , Switch.view
                 [ Switch.onSwitch Switch
                 , Switch.id "switch-interactive"
@@ -58,14 +58,14 @@ example =
                     )
                 ]
                 interactiveIsOn
-            , Heading.h3 [] [ Html.text "Disabled (On)" ]
+            , Heading.h2 [] [ Html.text "Disabled (On)" ]
             , Switch.view
                 [ Switch.disabled
                 , Switch.id "switch-disabled-on"
                 , Switch.label (Html.text "Permanently on")
                 ]
                 True
-            , Heading.h3 [] [ Html.text "Disabled (Off)" ]
+            , Heading.h2 [] [ Html.text "Disabled (Off)" ]
             , Switch.view
                 [ Switch.disabled
                 , Switch.id "switch-disabled-off"

styleguide-app/Examples/Table.elm

@@ -106,15 +106,15 @@ example =
                     , { firstName = "First5", lastName = "Last5", submitted = 8 }
                     ]
             in
-            [ Heading.h3 [] [ Html.text "With header" ]
+            [ Heading.h2 [] [ Html.text "With header" ]
             , Table.view columns data
-            , Heading.h3 [] [ Html.text "Without header" ]
+            , Heading.h2 [] [ Html.text "Without header" ]
             , Table.viewWithoutHeader columns data
-            , Heading.h3 [] [ Html.text "With additional cell styles" ]
+            , Heading.h2 [] [ Html.text "With additional cell styles" ]
             , Table.view columns data
-            , Heading.h3 [] [ Html.text "Loading" ]
+            , Heading.h2 [] [ Html.text "Loading" ]
             , Table.viewLoading columns
-            , Heading.h3 [] [ Html.text "Loading without header" ]
+            , Heading.h2 [] [ Html.text "Loading without header" ]
             , Table.viewLoadingWithoutHeader columns
             ]
     }

styleguide-app/Examples/Tooltip.elm

@@ -114,7 +114,7 @@ update msg model =
 
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
-    [ Heading.h3 [] [ Html.text "Using the Tooltip module" ]
+    [ Heading.h2 [] [ Html.text "Using the Tooltip module" ]
     , Text.mediumBody
         [ Text.html
             [ Html.text "Label the Tooltip as either being the "