diff --git a/content/body/combobox.php b/content/body/combobox.php
index fb4b769d..d1dff6e0 100644
--- a/content/body/combobox.php
+++ b/content/body/combobox.php
@@ -790,4 +790,4 @@
-= includeNPMInstructions('combobox') ?>
\ No newline at end of file
+= includeNPMInstructions('combobox', array(), false, array(), '.enable-combobox') ?>
\ No newline at end of file
diff --git a/content/body/dropdown.php b/content/body/dropdown.php
index dbe00c3a..3a5a3002 100644
--- a/content/body/dropdown.php
+++ b/content/body/dropdown.php
@@ -31,8 +31,8 @@
- Safari with Voiceover doesn't update the state when the
- drawer is opened.
+ Safari with Voiceover occasionally doesn't announce the state when the
+ drawer is opened (most of the time it does, but I have noticed it enough to make mention of it here).
Chrome with Voiceover report "Disclosure triangle" as the role, which is a quite odd and misleading.
@@ -166,6 +166,7 @@
ARIA version
true, 'comment' => 'This is best solution for both new and existing work.')) ?>
+ true)) ?>
Even though this is not native, it is pretty easy to set up. There is really one HTML attribute that you have to
@@ -321,3 +322,13 @@
+
+= includeNPMInstructions(
+ 'enable-drawer',
+ array(),
+ false,
+ array(),
+ null,
+ true
+ )
+?>
\ No newline at end of file
diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php
index 5a78912d..676d55f7 100644
--- a/content/body/focus-styling.php
+++ b/content/body/focus-styling.php
@@ -131,8 +131,97 @@
I encourage everyone reading this to implement this on all the websites they code. From a UX perspective, it just
makes it easier for everyone to use the websites you code.
-
\ No newline at end of file
+Sometimes, you will want to style focus states without the CSS outline
property. If you do this, but instead of using outline: none
to remove the default focus ring, developers should use outline with the transparent
colour:
+
+
+
+
+
+ Figure 6. Adding a transparent outline along with your custom focus state that doesn't have an outline
+
+
+
+
+
+button.special-style:focus { outline: transparent 2px solid; border-bottom: 2px solid #00f; }
+
\ No newline at end of file
diff --git a/content/body/listbox.php b/content/body/listbox.php
index aa53d94e..81845b9c 100644
--- a/content/body/listbox.php
+++ b/content/body/listbox.php
@@ -440,4 +440,11 @@ class="enable-listbox__button">
}
-= includeNPMInstructions('enable-listbox') ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'enable-listbox',
+ array(),
+ false,
+ array(),
+ null,
+ true
+) ?>
\ No newline at end of file
diff --git a/content/body/npm.php b/content/body/npm.php
new file mode 100644
index 00000000..464fd556
--- /dev/null
+++ b/content/body/npm.php
@@ -0,0 +1,78 @@
+
+ The following pages have modules that can be imported in your own projects via NPM:
+
+
+
+
+Webpack Setup Instructions
+
+Follow these steps to import these into your project:
+
+
+
+ You will notice that the examples ask you to include the npm modules like this:
+
+
+// import the js module
+import enableCarousel from '~enable-a11y/js/modules/enable-carousel';
+
+// import the CSS
+import '~enable-a11y/css/enable-carousel';
+
+...
+
+// How to initialize the enableCarousel library
+enableCarousel.init();
+
+...
+
+
+
+ The ~
is resolved by putting the following in your webpack.config.js
:
+
+
+module.exports = {
+
+ ...
+
+ resolve: {
+ extensions: ['.js', '.jsx', '.scss', '.css', '*.html'],
+ modules: [
+ path.resolve('./src/js'),
+ path.resolve('./node_modules')
+ ],
+ alias: {
+ '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y'),
+ '~glider-js': path.resolve(__dirname, 'node_modules/glider-js'),
+ '../enable-node-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module'),
+ '../../enable-node-libs/glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider'),
+ '../../enable-node-libs/jquery/dist/jquery.min.js': path.resolve(__dirname, 'node_modules/jquery/src/jquery'),
+ '../enable-node-libs/ableplayer/thirdparty/js.cookie.js': path.resolve(__dirname, 'node_modules/js-cookie/dist/js.cookie')
+ },
+
+ ...
+ }
+}
+
+
+ Note the ../enable-node-libs/
and ../../enable-node-libs/
path aliases. This is due to the production Enable having fixed versions of some third party JavaScript libraries. In your code, these libraries will point to the production NPM versions inside your code (i.e. glider-js
, accessibility-js-routines
, js-cookie
and jquery
(jQuery is needed for AblePlayer only).
+
+
+
+
+
+
+
+
+
+
+
+
+ ${title}
+
+
+
+
+
\ No newline at end of file
diff --git a/content/body/pagination-table.php b/content/body/pagination-table.php
index 994234d3..9cb17ad4 100644
--- a/content/body/pagination-table.php
+++ b/content/body/pagination-table.php
@@ -1814,5 +1814,11 @@
}
-= includeNPMInstructions('paginate') ?>
+= includeNPMInstructions(
+ 'paginate',
+ array(),
+ false,
+ array(),
+ '.pagination__table'
+) ?>
diff --git a/content/body/pause-anim-control.php b/content/body/pause-anim-control.php
index 948f65be..d5435f76 100644
--- a/content/body/pause-anim-control.php
+++ b/content/body/pause-anim-control.php
@@ -20,6 +20,9 @@
= $title ?>
+
+ true, 'comment' => 'This can be used for new builds or existing work with animations. You should always test the animations you are using to see if it works with this component. If not, please look at the detailed notes below on how to have your animations support this component.')) ?>
+ true)) ?>
Pause all the CSS, Canvas, SVG SMIL and GIF
animations on this page with the checkbox at the top of this page.
@@ -367,7 +370,7 @@
-
+
Video not supported.
@@ -406,7 +409,7 @@
+ data-root-path="./js/enable-libs/ableplayer/">
@@ -454,4 +457,12 @@
}
-
\ No newline at end of file
+
+= includeNPMInstructions(
+ 'pause-anim-control'
+ )
+?>
+
+
+
+
diff --git a/content/body/sortable-table.php b/content/body/sortable-table.php
index 2f00b27a..61043c07 100644
--- a/content/body/sortable-table.php
+++ b/content/body/sortable-table.php
@@ -156,4 +156,9 @@ class="deque-table-sortable"
}
- = includeNPMInstructions('sortable-tables') ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'sortable-tables',
+ array(),
+ false,
+ array(),
+ '.pagination__table') ?>
\ No newline at end of file
diff --git a/content/body/spinner.php b/content/body/spinner.php
index e56ac94d..6bec543d 100644
--- a/content/body/spinner.php
+++ b/content/body/spinner.php
@@ -205,4 +205,10 @@
}
-= includeNPMInstructions('spinbutton', array()) ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'spinbutton',
+ array(),
+ false,
+ array(),
+ '.spinbutton'
+) ?>
\ No newline at end of file
diff --git a/content/body/switch.php b/content/body/switch.php
index 17fc4858..ce7e068d 100644
--- a/content/body/switch.php
+++ b/content/body/switch.php
@@ -83,4 +83,11 @@ class="switch" aria-describedby="speakerPower-checked">
}
-= includeNPMInstructions('switch') ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'switch',
+ array(),
+ false,
+ array(),
+ null,
+ true
+) ?>
\ No newline at end of file
diff --git a/content/body/tabs.php b/content/body/tabs.php
index 3ec18f64..6ed975fe 100644
--- a/content/body/tabs.php
+++ b/content/body/tabs.php
@@ -188,7 +188,7 @@
{
"label": "Use data-owns to connect tabs with their tabpanel",
"highlight": "%INLINE%originalHTMLExample1 ||| data-owns",
- "notes": "This will be used by the JavaScript code to connect the tab with the tabpanel using aria-owns"
+ "notes": "This will be used by the JavaScript code to connect the tab with the tabpanel using aria-controls"
},
{
"label": "Your JavaScript should place ARIA roles in document",
@@ -197,8 +197,8 @@
},
{
"label": "Your JavaScript should connect tabs to tabpanels",
- "highlight": "%INLINE%example1 ||| aria-owns",
- "notes": "Each tab must have an aria-owns attribute that corresponds to its tabpanel ."
+ "highlight": "%INLINE%example1 ||| aria-controls",
+ "notes": "Each tab must have an aria-controls attribute that corresponds to its tabpanel ."
},
{
"label": "Your JavaScript should apply aria-selected values are set correctly",
@@ -224,4 +224,10 @@
}
-= includeNPMInstructions('tabs') ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'tabs',
+ array(),
+ false,
+ array(),
+ '.enable-tablist'
+) ?>
\ No newline at end of file
diff --git a/content/body/text-resize.php b/content/body/text-resize.php
index 4afd62c6..ba985b9c 100644
--- a/content/body/text-resize.php
+++ b/content/body/text-resize.php
@@ -65,7 +65,13 @@ functionality
@px: 16rem;
-// 2. Set your pixel values as fractions. For example,
+// 2. set the base font-size of the body tag to the same
+// amount in pixels.
+body {
+ font-size: 16px;
+}
+
+// 3. Set your pixel values as fractions. For example,
// 16px would be 16/@px, 200px would be 200/@px, and so on.
.example {
@@ -77,9 +83,9 @@ functionality
// Compiled output
// .example {
-// font-size: 1rem;
-// margin: 1.25rem 0;
-// padding: 1.25rem 0.625rem;
+// font-size: 1rem;
+// margin: 1.25rem 0;
+// padding: 1.25rem 0.625rem;
// }
// http://lesscss.org/features/#features-overview-feature-operations
diff --git a/content/body/tooltip.php b/content/body/tooltip.php
index c6efc0a9..ba5f4045 100644
--- a/content/body/tooltip.php
+++ b/content/body/tooltip.php
@@ -131,4 +131,11 @@
}
-= includeNPMInstructions('tooltip', array()) ?>
\ No newline at end of file
+= includeNPMInstructions(
+ 'tooltip',
+ array(),
+ false,
+ array(),
+ null,
+ true
+) ?>
\ No newline at end of file
diff --git a/content/body/video-player.php b/content/body/video-player.php
index 4e63ca2c..56c386e2 100644
--- a/content/body/video-player.php
+++ b/content/body/video-player.php
@@ -85,7 +85,7 @@
-
+
@@ -147,4 +147,15 @@
}
- = includeNPMInstructions('ablePlayerCustomizations') ?>
\ No newline at end of file
+ = includeNPMInstructions(
+ 'ablePlayerCustomizations',
+ array(),
+ false,
+ array(
+ "otherImports" => "// AblePlayer uses this module, available via NPM import Cookies from 'js-cookie';"
+ ),
+ null,
+ false,
+ true
+ )
+ ?>
\ No newline at end of file
diff --git a/content/bottom/npm.php b/content/bottom/npm.php
new file mode 100644
index 00000000..55adbae8
--- /dev/null
+++ b/content/bottom/npm.php
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/content/bottom/pagination-table.php b/content/bottom/pagination-table.php
index 0641f029..a6dd6796 100644
--- a/content/bottom/pagination-table.php
+++ b/content/bottom/pagination-table.php
@@ -1,6 +1,6 @@
+
\ No newline at end of file
diff --git a/templates/includes/functions.php b/templates/includes/functions.php
index 306df721..a94d8399 100644
--- a/templates/includes/functions.php
+++ b/templates/includes/functions.php
@@ -56,13 +56,16 @@ function dashesToCamelCase($string, $capitalizeFirstCharacter = false)
}
-function includeNPMInstructions($moduleName, $supportingModuleNames = array('js/modules/accessibility.module.js'), $isPolyfill = false, $other = array()) {
+function includeNPMInstructions($moduleName, $supportingModuleNames = array('js/modules/accessibility.module.js'), $isPolyfill = false, $other = array(), $doesHaveAddMethod = null, $willWorkAfterPageLoad = false, $noInit = false) {
includeFileWithVariables('includes/npm.php', array(
'moduleName' => $moduleName,
'moduleVar' => dashesToCamelCase($moduleName),
'supportingModuleNames' => $supportingModuleNames,
'isPolyfill' => $isPolyfill,
- 'other' => $other
+ 'other' => $other,
+ 'doesHaveAddMethod' => $doesHaveAddMethod,
+ 'willWorkAfterPageLoad' => $willWorkAfterPageLoad,
+ 'noInit' => $noInit
));
}
@@ -119,9 +122,17 @@ function includeShowcodeStaticEnd() {
function getURIFilename() {
$uri = $_SERVER['REQUEST_URI'];
+
$uriFile = explode('/', $uri);
- $uriFile = $uriFile[count($uriFile) - 1];
- return $uriFile;
+
+ $lastIndex = count($uriFile) - 1;
+ $dirSlug = $uriFile[$lastIndex - 1];
+ $fileSlug = $uriFile[$lastIndex];
+ if ($dirSlug === 'info') {
+ return $dirSlug . '/' . $fileSlug;
+ } else {
+ return $fileSlug;
+ }
}
function getMetadata() {
diff --git a/templates/includes/npm.php b/templates/includes/npm.php
index 0b1e3e88..42844ac0 100644
--- a/templates/includes/npm.php
+++ b/templates/includes/npm.php
@@ -57,32 +57,69 @@
- Install the enable-a11y
NPM project . Developers who are using webpack should
+ Install the enable-a11y
NPM project . Developers who are using webpack should
know how to configure webpack to import the enable modules correctly .
You can use the module like this:
+// import the JS module
import = $moduleVar ?> from '~enable-a11y/js/modules/= $moduleName ?>';
-@import '~enable-a11y/css/= $moduleName ?>';
-...
+= $other["otherImports"] ?? '' ?>
+
+
+// import the CSS for the module
+import '~enable-a11y/css/= $moduleName ?>';
+
+
// How to initialize the = $moduleVar ?> library
= $moduleVar ?>.init();
+
+// There is no .init() function to call.
+
-...
+
+// If you are adding a new instance of this component after page load,
+// then do the following (where el is the DOM node of the newly created
+// element, which contains the CSS class = $doesHaveAddMethod ?>):
+el.add();
+
+
+
+// Note that this component will work with DOM elements coded like
+// the examples above added after page load. There is no need to call
+// an .add() method, like we do with the Enable combobox component.
+
+= $other["otherSampleCode"] ?? '' ?>
= $other["es6Notes"] ?? '' ?>
- Alternatively, you can include the styles in your project's CSS using:
+ Alternatively, if you are using LESS you can include the styles in your project's CSS using:
@import '~enable-a11y/css/= $moduleName ?>';
+
+ (If you are using it in your CSS, you will have to add the .css
suffix)
@@ -94,7 +131,7 @@
- Grab the source by either using NPM , using NPM , grabbing a ZIP file or cloning the enable source code from github.
diff --git a/templates/includes/showcode-template.php b/templates/includes/showcode-template.php
index 1ecde0bc..abe3c097 100755
--- a/templates/includes/showcode-template.php
+++ b/templates/includes/showcode-template.php
@@ -22,8 +22,8 @@ class="showcode__heading">Example code
= $extra ?>
-
-
+
+
+
+
+