minor changes to home page and navigation/links

dylanb · Jun 9, 2017 · 1bab2a6 · 1bab2a6
1 parent 87b3653
commit 1bab2a6
Show file tree

Hide file tree

Showing 15 changed files with 25 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -61,12 +61,14 @@ <h2><span class="octicon octicon-link"></span>Accessibility Examples</h2>
           <p>
             Here are examples of <a href="rwd/part4">responsive accessible tables</a>.
           </p>
-      </section>
-      <section>
-        <h2><span class="octicon octicon-link"></span>Mime - Capturing Mock Library for Node.js</h2>
-          <p>
-            Mime is a capturing mock library for Node.js. It uses harmony-reflect Proxy objects (part of the ES 6 JavaScript standard) to allow for very simple capturing mock objects and capturing callbacks to be created and used within an automated test framework such as Mocha. Take a look at the <a href="mime/overview.html">Mime home page</a>, the <a href="mime/index.html">Mime API documentation</a> or the <a href="mime/examples.html">Mime examples</a>.
-          </p>
+          <h3>Other examples</h3>
+          <ul>
+            <li><a href="/rwd/part6/">Keyboard event logger</a></li>
+            <li><a href="/group_labels.html/">ARIA group labels</a></li>
+            <li><a href="/trap.html/">Keyboard trap</a></li>
+            <li><a href="/duplicate_ids.html/">Duplicate ID accessibility issues example</a></li>
+            <li><a href="/onchange_select.html/">Accessible select with onchange event handler</a></li>
+          </ul>
       </section>
       <footer>
         <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>

diff --git a/rwd/part1/index.html b/rwd/part1/index.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<div class="header"><div class="header-content">Header</div><div class="search">Search</div></div>
 		<div class="navigation">Navigation</div>
 		<div>

diff --git a/rwd/part2/index.html b/rwd/part2/index.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<header>
 			<div class="header-content">Header</div>
 			<div class="search" role="search">Search</div>

diff --git a/rwd/part4/comparison.html b/rwd/part4/comparison.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<h2>Responsive Comparison Table</h2>
 		<p>
 			This table is suitable for comparing products on both a mobile device and a desktop. It is derived from the <a href="http://www.amazon.com/">Amazon.com</a> product comparison table.

diff --git a/rwd/part4/index.html b/rwd/part4/index.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<h1>Accessible Responsive Tables</h1>
 		<ul>
 			<li>

diff --git a/rwd/part4/responsive.html b/rwd/part4/responsive.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<h1>Accessible Responsive Tables</h1>
 		<p>
 			The two tables below look exactly the same at the desktop breakpoint. The difference is that the second one is adds some in-context headers at the small screen break point and remains accessible, despite changing the display properties from table to block for responsiveness.

diff --git a/rwd/part5/content_popup.html b/rwd/part5/content_popup.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" type="text/css" href="../libs/jquery.mobile.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<div id="other-page" data-role="page" data-url="other-page">
 			<div data-role="header">
 				<a href="index.html" data-icon="arrow-l" class="ui-btn-left">Back</a>

diff --git a/rwd/part5/content_replaced.html b/rwd/part5/content_replaced.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" type="text/css" href="../libs/jquery.mobile.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<div data-role="page">
 			<div data-role="header" style="overflow:hidden;">
 				<a href="index.html" data-icon="arrow-l" class="ui-btn-left">Back</a>

diff --git a/rwd/part5/index.html b/rwd/part5/index.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<h1>Focus Examples</h1>
 		<ul>
 			<li>

diff --git a/rwd/part6/event_logger.html b/rwd/part6/event_logger.html
@@ -6,6 +6,7 @@
 		<link rel="stylesheet" type="text/css" href="responsive.css">
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<header>
 			<div class="topleft">
 				<h1>Keyboard Event Logger</h1>

diff --git a/rwd/part6/index.html b/rwd/part6/index.html
@@ -4,6 +4,7 @@
 		<title>Part 6: Keyboard and Gestures</title>
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<h1>Part 6: Keyboard and Gestures</h1>
 		<ul>
 			<li>

diff --git a/rwd/part6/touch_event_logger.html b/rwd/part6/touch_event_logger.html
@@ -7,6 +7,7 @@
 		<script src="https://hammerjs.github.io/dist/hammer.js"></script>
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<div>
 			<main>
 				<h1>Touch Event Logger</h1>

diff --git a/rwd/part6/touch_slider.html b/rwd/part6/touch_slider.html
@@ -56,6 +56,7 @@
 		</style>
 	</head>
 	<body>
+		<a href="/">Back to dylanb.github.io</a>
 		<div>
 			<main>
 				<h1>Touch Slider</h1>

diff --git a/shadowDOM/v1_example.html b/shadowDOM/v1_example.html
@@ -3,6 +3,7 @@
     <head>
     </head>
     <body>
+        <a href="/">Back to dylanb.github.io</a>
         <div class="stories">
             <li><a href="//example.com/stories/1">A story</a></li>
             <li><a href="//example.com/stories/2">Another story</a></li>

diff --git a/shadowDOM/v1_menu_example.html b/shadowDOM/v1_menu_example.html
@@ -3,6 +3,7 @@
     <head>
     </head>
     <body style="background-color:blue;color:white;">
+        <a href="/">Back to dylanb.github.io</a>
         <h1>Demonstrate Chrome shadow DOM bugs</h1>
         <p>
             Run this page in Chrome and Safari (OS X). What you see in Chrome does not match what you see in Safari and if you refresh the page, Chrome's display of the fallback content might change.
@@ -58,7 +59,7 @@ <h1>Demonstrate Chrome shadow DOM bugs</h1>
                     group.style.backgroundColor = 'initial'
                 }
                 // Empty string in slot name attribute or absence thereof work the same, so no need for special handling.
-                group.innerHTML = '<ul class="menucontainer"><slot name="news">Fallback<li>one</li><li>two</li></slot></ul><slot></slot>';
+                group.innerHTML = '<ul class="menucontainer"><slot role="link" name="news">Fallback<li>one</li><li>two</li></slot></ul><slot role="link"></slot>';
                 return group;
             }
 
@@ -71,7 +72,8 @@ <h1>Demonstrate Chrome shadow DOM bugs</h1>
                         ':host-context(html) { border: 2px solid white;}'
                 } else {
                     style.textContent = '' +
-                        'slot { display:block; background-color: white;}' + // no effect
+                        // 'slot { display:block; background-color: white;}' + // no effect on Chrome
+                        'slot { display:block; border: 1px dotted white;}' + // no effect on Chrome
                         ':host { border: 2px solid white;}'
                 }
                 return style;
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
     		<link rel="stylesheet" type="text/css" href="responsive.css">
     	</head>
     	<body>
+    		<a href="/">Back to dylanb.github.io</a>
     		<h1>Accessible Responsive Tables</h1>
     		<ul>
     			<li>
@@ Expand Down @@