Merge pull request uswds#663 from 18F/fix-nonwrapping-code

Add word-break opportunities

Author: Maya Benari

_components/accordions.md

@@ -145,10 +145,10 @@ lead: Accordions are a list of headers that can be clicked to hide or reveal add
         Code header areas in the accordion as <code>&lt;buttons&gt;</code> so that they are usable with both screen readers and the keyboard.
       </li>
       <li>
-        Buttons should  state whether they are expanded or not with the appropriate attribute: use either  <code>aria-expanded=’true’</code> or <code>aria-expanded=’false’</code>.
+        Buttons should  state whether they are expanded or not with the appropriate attribute: use either  <code>aria-expanded=<wbr>’true’</code> or <code>aria-expanded=<wbr>’false’</code>.
       </li>
       <li>
-        Each button has a unique name <code>aria-controls=’collapsible-#’</code> that associates the control to the appropriate region by referencing the controlled elements <code>id</code>.
+        Each button has a unique name <code>aria-controls=<wbr>’collapsible-#’</code> that associates the control to the appropriate region by referencing the controlled elements <code>id</code>.
       </li>
       <li>
         Each content area has an <code>aria-hidden</code> attribute set to either <code>true</code> or <code>false</code>. When <code>false</code>, the element (and all children) are neither visible or perceivable, and assistive technologies will skip this content.

_components/alerts.md

@@ -51,7 +51,7 @@ lead: Alerts keep users informed of important and sometimes time-sensitive chang
   <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content">
     <h4 class="usa-heading">Accessibility</h4>
     <ul class="usa-content-list">
-      <li>Use the ARIA <code>role="alert"</code> to inform assistive technologies of a time-sensitive and important message that is not interactive. If the message is interactive, use the <code>alertdialogue</code> role instead.
+      <li>Use the ARIA <code>role=<wbr>"alert"</code> to inform assistive technologies of a time-sensitive and important message that is not interactive. If the message is interactive, use the <code>alertdialogue</code> role instead.
       <li>Do not visually hide alert messages on the page and then make them visible when they are needed.  Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.</li>
     </ul>
 

_elements/form-controls.md

@@ -10,8 +10,8 @@ lead: Form controls allow users to enter information into a page.
 <p>As you customize form controls from this library, be sure they continue to meet the following accessibility requirements:</p>
 
 <ul class="usa-content-list">
-  <li>All form control tags should have an associated label. The labels for attribute value should match the related input <code>id</code> attribute and should also be unique to the entire page. For example, the input with <code>id="favorite-pie"</code> will always have a label with <code>for="favorite-pie"</code>. This way screen readers are able to perceive the relevant content.</li>
-  <li>Any additional information—such as required, optional, or example text—should be wrapped within the label tags. For example: <code>&lt;label for="name"&gt;Favorite Pie &lt;span&gt;Optional&lt;/span&gt;&lt;/label&gt;</code>. This way screen readers know what additional information is related to each field.</li>
+  <li>All form control tags should have an associated label. The labels for attribute value should match the related input <code>id</code> attribute and should also be unique to the entire page. For example, the input with <code>id=<wbr>"favorite-pie"</code> will always have a label with <code>for=<wbr>"favorite-pie"</code>. This way screen readers are able to perceive the relevant content.</li>
+  <li>Any additional information—such as required, optional, or example text—should be wrapped within the label tags. For example: <code>&lt;label for=<wbr>"name"&gt;Favorite Pie &lt;span&gt;Optional&lt;/span&gt;&lt;/label&gt;</code>. This way screen readers know what additional information is related to each field.</li>
   <li>Do not replace <code>&lt;input&gt;</code> tag-based form controls with styled <code>&lt;div&gt;</code> tags, or use JavaScript to create 'fake' form controls. Screen readers have a difficult time reading form controls that are not written in semantic HTML.</li>
   <li>If you adjust the color scheme of the buttons, ensure a minimum contrast ratio of 4.5:1 (for small text, 3:1 for large) for all states of the button. This includes default, hover, selected, and disabled.</li>
 </ul>
@@ -118,7 +118,7 @@ lead: Form controls allow users to enter information into a page.
     <ul class="usa-content-list">
       <li>Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use.</li>
       <li>Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.</li>
-      <li>When most users will (or should) pick a particular option, make it the default: <code>&lt;option selected="selected"&gt;Default&lt;/option&gt;</code></li>
+      <li>When most users will (or should) pick a particular option, make it the default: <code>&lt;option selected=<wbr>"selected"&gt;Default<wbr>&lt;/option&gt;</code></li>
       <li>Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.</li>
     </ul>
   </div>

_elements/tables.md

@@ -105,7 +105,7 @@ lead: Tables show tabular data in columns and rows.
   <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content">
     <h4 class="usa-heading">Accessibility</h4>
     <ul class="usa-content-list">
-      <li>Simple tables can have two levels of headers. Each header cell should have <code>scope='col'</code> or <code>scope='row'</code>.</li>
+      <li>Simple tables can have two levels of headers. Each header cell should have <code>scope=<wbr>'col'</code> or <code>scope=<wbr>'row'</code>.</li>
       <li>Complex tables are tables with more than two levels of headers. Each header should be given a unique <code>id</code> and each data cell should have a <code>headers</code> attribute with each related header cell’s <code>id</code> listed.</li>
     </ul>