add accessibility features and list component in documentation app

Author: michaelthorpe

apps/docs/src/common/component-stories.ts

@@ -12,7 +12,8 @@ const storySources = [
   require('../../../../components/timeline/spec/Timeline.stories.mdx'),
   require('../../../../components/date-time/spec/DateTime.stories.mdx'),
   require('../../../../components/date-display/spec/DateDisplay.stories.mdx'),
-  require('../../../../components/time/spec/Time.stories.mdx')
+  require('../../../../components/time/spec/Time.stories.mdx'),
+  require('../../../../components/timeout-modal/spec/TimeoutModal.stories.mdx')
 ];
 export const stories = storySources.reduce(reduceToLookup, {})
 

components/timeout-modal/spec/TimeoutModal.stories.mdx

@@ -10,32 +10,30 @@ import readMe from '../README.md';
     chromatic: { viewports: [640, 480] },
     description: 'HODS timeout modal',
     jest: ['TimeoutModal'],
-    notes: readMe
+    notes: readMe,
+     docs: {
+        inlineStories: false,
+        iframeHeight: 500,
+      }
   } }
 />
 
 # timeout-modal
 
-HODS timeout modal
+HODS Timeout Modal
 
 <Preview withToolbar>
-  <Story name="TimeoutModal">
+  <Story name="5 Minutes Timeout Modal">
   <Page>
-    <TimeoutModal isOpen={true} timerDurationInSeconds={300} />
+    <TimeoutModal
+        isOpen={true}
+        timerDurationInSeconds={60}
+        onTimeout={() => console.log("timed out")}
+        onContinue={() => console.log("continue")}
+        onSignout={() => console.log("sign out")}
+    />
   </Page>
   </Story>
 </Preview>
 
 <Props of={ TimeoutModal } />
-
-
-## Stories
-### Standard
-
-A standard timeout-modal.
-
-<Preview>
-  <Story name="Standard">
-    <TimeoutModal />
-  </Story>
-</Preview>

components/timeout-modal/src/TimeoutModal.tsx

@@ -53,8 +53,8 @@ export const TimeoutModal: FC<TimeoutModalProps> = ({
             To protect your information, you will be signed out in <Timer className={classes('timer')} timerFrom={isOpen ? timerDurationInSeconds : 0} onTimeout={onTimeout}/>.
           </p>
           <div className={classes('buttons')}>
-            <button role='button' onClick={onTimeout}>Continue on this page</button>
-            <a role='link' onClick={onSignout}>Sign out</a>
+            <button role='button' onClick={onContinue} tabIndex={0}>Continue on this page</button>
+            <a role='link' onClick={onSignout} tabIndex={1}>Sign out</a>
           </div>
         </dialog>
       </div>

components/timeout-modal/src/Timer.tsx

@@ -15,7 +15,7 @@ export const Timer: FC<TimerProps> = ({
 }) => {
     const [runTimer, setRunTimer] = useState(true)
     const [timer, setTimer] = useState(timerFrom);
-    let formattedTimer = timer < 60 ? Math.ceil(timer / 20) * 20 : Math.ceil(timer / 60);
+    let formattedTimer = timer < 61 ? Math.ceil(timer / 20) * 20 : Math.ceil(timer / 60);
     const interval = useRef(null);
 
     useEffect(() => {
@@ -26,7 +26,7 @@ export const Timer: FC<TimerProps> = ({
 
     if(runTimer && timer == 0) {
         clearInterval(interval.current);
-        onTimeout;
+        onTimeout();
     }
 
     return (