Fix typos, improve titles and layout

dotherightthing · Sep 24, 2020 · 51bc553 · 51bc553
1 parent 3be1186
commit 51bc553
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/cypress/integration/tabbed-carousel.js b/cypress/integration/tabbed-carousel.js
@@ -197,7 +197,7 @@ describe('Tabbed Carousel', function () {
                                     });
 
                                     it('+ When the tab panel has the focus, moves focus to the first tab panel navigation button', function () {
-                                        cy.log('Nav moved after slide in order to have the active slide adjacent to the active tab in the tab sequence. This is in contrast with the WAI - ARIA Carousel example, which doesn\'t have tab navigation');
+                                        cy.log('Nav moved after slide in order to have the active slide adjacent to the active tab in the tab sequence. This is in contrast with the WAI-ARIA Carousel example, which doesn\'t have tab navigation');
 
                                         cy.get('@testAnchor')
                                             .tab().tab().tab();
@@ -207,7 +207,7 @@ describe('Tabbed Carousel', function () {
                                     });
 
                                     it('+ When the first tab panel navigation button has the focus, moves focus to the next tab panel navigation button', function () {
-                                        cy.log('Nav moved after slide in order to have the active slide adjacent to the active tab in the tab sequence. This is in contrast with the WAI - ARIA Carousel example, which doesn\'t have tab navigation');
+                                        cy.log('Nav moved after slide in order to have the active slide adjacent to the active tab in the tab sequence. This is in contrast with the WAI-ARIA Carousel example, which doesn\'t have tab navigation');
 
                                         cy.get('@testAnchor')
                                             .tab().tab().tab()

diff --git a/scss/_shared.scss b/scss/_shared.scss
@@ -30,6 +30,10 @@ h2 {
     margin: 0;
 }
 
+[id^='test-'] {
+    margin-bottom: 48px;
+}
+
 .test-focus-start {
     background-color: $color-component-bg;
     padding: 4px;

diff --git a/tabbed-carousel.html b/tabbed-carousel.html
@@ -11,7 +11,7 @@
         <h1>Tabbed carousel</h1>
         <p>See Cypress unit tests for specification.</p>
         <div id="test-1">
-            <h2>Test 1</h2>
+            <h2>Example 1: Tabs with Manual Activation</h2>
             <button class="test-focus-start" id="test-1-start">Start test</button>
             <div class="tabbed-carousel" data-initial-selection="1">
                 <div role="tablist" aria-label="Choose photo to display">
@@ -65,7 +65,7 @@ <h2>Image 5</h2>
             </div>
         </div>
         <div id="test-2">
-            <h2>Test 2: Selection follows focus</h2>
+            <h2>Example 2: Tabs with Automatic Activation</h2>
             <button class="test-focus-start" id="test-2-start">Start test</button>
             <div class="tabbed-carousel" data-selection-follows-focus="true" data-initial-selection="1">
                 <div role="tablist" aria-label="Choose photo to display">