Tablist Examples: Improve support for magnification (pull #2625)

Resolves #2284 and #2257 with the following changes: 
1. Changes CSS so it defines tab width as a percentage of screen width. This prevents screen magnification from causing horizontal scrolling. As the screen is magnified ,the height of the tabs increases and the tab content reflows to fit the new dimensions.
2. Adds explanation of the use of percentage to the Accessibility Features section.

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

content/patterns/tabs/examples/css/tabs.css

@@ -3,12 +3,13 @@
 }
 
 [role="tablist"] {
-  min-width: 550px;
+  min-width: 100%;
 }
 
 [role="tab"],
 [role="tab"]:focus,
 [role="tab"]:hover {
+  display: inline-block;
   position: relative;
   z-index: 2;
   top: 2px;
@@ -18,10 +19,13 @@
   border: 1px solid hsl(219deg 1% 72%);
   border-bottom: 2px solid hsl(219deg 1% 72%);
   border-radius: 5px 5px 0 0;
-  overflow: visible;
   background: hsl(220deg 20% 94%);
   outline: none;
   font-weight: bold;
+  max-width: 22%;
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
 }
 
 [role="tab"][aria-selected="true"] {
@@ -58,7 +62,7 @@
   border-radius: 0 5px 5px;
   background: hsl(220deg 43% 99%);
   min-height: 10em;
-  min-width: 550px;
+  width: 100%;
   overflow: auto;
 }
 

content/patterns/tabs/examples/tabs-automatic.html

@@ -60,7 +60,7 @@ <h3 id="tablist-1">Danish Composers</h3>
                 <span class="focus">Ida da Fonseca</span>
               </button>
               <button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
-                <span class="focus">Peter Lange-Müller</span>
+                <span class="focus">Peter Müller</span>
               </button>
             </div>
 
@@ -123,6 +123,9 @@ <h2>Accessibility Features</h2>
               </li>
             </ul>
           </li>
+          <li>
+            To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width.  As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
+          </li>
         </ul>
       </section>
 

content/patterns/tabs/examples/tabs-manual.html

@@ -62,7 +62,7 @@ <h3 id="tablist-1">Danish Composers</h3>
                 <span class="focus">Ida da Fonseca</span>
               </button>
               <button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
-                <span class="focus">Peter Lange-Müller</span>
+                <span class="focus">Peter Müller</span>
               </button>
             </div>
 
@@ -127,7 +127,11 @@ <h2>Accessibility Features</h2>
           </li>
           <li>
             Note that since the first element in every <code>tabpanel</code> is a focusable element (i.e., a link), the <code>tabpanel</code> is <strong>not</strong> included in the page <kbd>Tab</kbd> sequence.
-            To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, it is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.</li>
+            To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, it is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
+          </li>
+          <li>
+             To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width.  As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
+         </li>
         </ul>
       </section>