patternfly · wesruv · Feb 9, 2021 · Feb 17, 2021 · Feb 24, 2021 · Feb 24, 2021
diff --git a/elements/pfe-primary-detail/README.md b/elements/pfe-primary-detail/README.md
@@ -1,7 +1,7 @@
 # PatternFly Element | Primary detail element
 
-
 ## Usage
+
 A primary-detail layout is an interface that shows a list of items and the corresponding details of the selected item.
 
 This component is an implementation of one of the "Primary detail simple list in card" from [Patternfly React](https://www.patternfly.org/v4/demos/primary-detail), more layouts may be implemented later.
@@ -56,8 +56,30 @@ This component is an implementation of one of the "Primary detail simple list in
 ```
 
 ### Accessibility
+
 The default markup should have semantic markup if the component can't load, once it loads the component the appropriate tab interactions and appropriate markup for assistive tech is handled for you.
 
+#### Focus Indicator Styles
+
+The component requires visible focus indicator styles for focusable elements (ie.`links`, `buttons`, `[tabindex="0"]`) in order to meet [**WCAG 2.0/2.1 AA compliance**](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible). Below is a good example of styles to use for the focus indicator, these styles match the focus indicator of `pfe-navigation`. The `padding` style is to increase the clickable area of links in order to help users have a better experience when trying to click the links, this also helps users with limited mobility.
+
+```html
+  pfe-primary-detail .focus-styles:focus,
+  pfe-primary-detail .focus-styles:hover {
+    outline: 1px dashed #000;
+    outline-width: 2px;
+  }
+
+  pfe-primary-detail ul.focus-styles:hover,
+  pfe-primary-detail :not(pfe-cta).focus-styles:hover {
+      outline: 0;
+  }
+
+  pfe-primary-detail a.focus-styles {
+    padding: 8px;
+  }
+```
+
 ## Slots
 
 For this component to work, there should be an equal number of `details-nav` and `details` slotted elements.

diff --git a/elements/pfe-primary-detail/demo/index.html b/elements/pfe-primary-detail/demo/index.html
@@ -69,15 +69,80 @@
       .ansible-styles .pfe-primary-detail__toggle--active {
         font-weight: bold;
       }
+
+      pfe-primary-detail .focus-styles:focus,
+      pfe-primary-detail .focus-styles:hover {
+        outline: 1px dashed #000;
+        outline-width: 2px;
+      }
+
+      pfe-primary-detail ul.focus-styles:hover,
+      pfe-primary-detail :not(pfe-cta).focus-styles:hover {
+          outline: 0;
+      }
+
+      pfe-primary-detail a.focus-styles {
+        padding: 8px;
+      }
     </style>
 
   </head>
   <body unresolved>
     <h1><code>pfe-primary-detail</code></h1>
 
+    <h2>Default styles with Focus Indicator styles </h2>
+    <pfe-primary-detail consistent-height>
+      <h3  slot="details-nav--header" style="font-size: inherit; margin: 0 0 0.5em; padding: 9px 0.75em 0.75em;">
+        <a href="#">
+          Integrations
+        </a>
+      </h3>
+      <h3 slot="details-nav">Infrastructure and Management</h3>
+      <ul slot="details">
+        <li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
+        <li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+      </ul>
+
+      <h3 slot="details-nav">Cloud Computing</h3>
+      <ul slot="details">
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+        <li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
+        <li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+        <li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
+        <li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+      </ul>
+
+      <h3 slot="details-nav">Storage</h3>
+      <ul slot="details">
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+      </ul>
+
+      <h3 slot="details-nav">Runtimes</h3>
+      <ul slot="details">
+        <li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
+        <li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
+        <li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
+        <li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
+      </ul>
+    </pfe-primary-detail>
+
     <h2>Default styles with a nav footer</h2>
-    <pfe-primary-detail>
+    <pfe-primary-detail consistent-height>
       <h3 slot="details-nav">Infrastructure and Management</h3>
+
       <ul slot="details">
         <li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
         <li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>

diff --git a/elements/pfe-primary-detail/src/pfe-primary-detail.html b/elements/pfe-primary-detail/src/pfe-primary-detail.html
@@ -1,8 +1,8 @@
 <div id="details-nav">
   <slot name="details-nav--header"></slot>
   <slot name="details-nav"></slot>
-  <slot name="details-nav--footer"></slot>
 </div>
 <div id="details-wrapper">
   <slot name="details"></slot>
 </div>
+<slot name="details-nav--footer"></slot>