From 0b3c06b1ba35932d42da18a144bcdb4e201bec26 Mon Sep 17 00:00:00 2001 From: Zoltan Hawryluk Date: Wed, 27 Apr 2022 14:37:22 -0400 Subject: [PATCH] Adding NPM info --- TODO.txt | 35 + bin/promote-node-modules-to-server.sh | 4 +- content/body/carousel.php | 13 +- content/body/chart.php | 2 +- content/body/combobox.php | 2 +- content/body/dropdown.php | 15 +- content/body/focus-styling.php | 95 +- content/body/listbox.php | 9 +- content/body/npm.php | 78 ++ content/body/pagination-table.php | 8 +- content/body/pause-anim-control.php | 17 +- content/body/sortable-table.php | 7 +- content/body/spinner.php | 8 +- content/body/switch.php | 9 +- content/body/tabs.php | 14 +- content/body/text-resize.php | 14 +- content/body/tooltip.php | 9 +- content/body/video-player.php | 15 +- content/bottom/npm.php | 3 + content/bottom/pagination-table.php | 2 +- content/bottom/sortable-pagination-table.php | 2 +- content/bottom/sortable-table.php | 2 +- content/bottom/table.php | 2 +- content/head/carousel.php | 2 +- content/head/pause-anim-control.php | 2 +- content/head/spinner.php | 2 +- content/head/video-player.php | 4 +- css/ablePlayerCustomizations.css | 67 ++ css/chart.css | 16 + css/date.css | 1 + css/pause-anim-control.css | 100 ++ css/pause-animations-demo copy.css | 140 +++ css/pause-animations-demo.css | 102 +- css/range.css | 3 +- css/shared/a11y.css | 1 + css/shared/all.css | 1 + css/shared/landmarks.css | 1 + css/showcode.css | 5 +- css/spinbutton.css | 53 + css/treeLinks.css | 1 + data/ice-cream.csv | 21 + .../dist/accessibility.module.js | 41 + .../dialog-polyfill/index.js | 0 .../glider-js/glider.css | 0 .../glider-js/glider.js | 0 .../indent.js/lib}/indent.min.js | 0 .../dist/jquery.validate.min.js | 0 .../jquery/dist/jquery.min.js | 0 .../dist/textZoomEvent.module.js | 0 js-list.txt | 4 +- js/demos/accessible-text-svg.js | 4 +- js/demos/alert.js | 2 +- js/demos/checkbox.js | 2 +- js/demos/dialog-example.js | 2 +- js/demos/form.js | 8 +- js/demos/hero-image-text-resize.js | 2 +- js/demos/line-chart copy.js | 128 +++ js/demos/line-chart.js | 23 +- js/demos/marquee.js | 2 +- js/demos/pause-anim-control.js | 4 +- js/demos/progress.js | 2 +- js/demos/radiogroup.js | 2 +- js/demos/status.js | 2 +- js/demos/timer.js | 2 +- js/demos/tooltip.js | 2 +- js/demos/video-player.js | 2 +- .../ableplayer/Gruntfile.js | 0 js/{libs => enable-libs}/ableplayer/LICENSE | 0 js/{libs => enable-libs}/ableplayer/README.md | 0 .../ableplayer/_config.yml | 0 .../ableplayer/build/ableplayer.dist.js | 0 .../ableplayer/build/ableplayer.js | 0 .../ableplayer/build/ableplayer.min.css | 0 .../ableplayer/build/ableplayer.min.js | 0 .../ableplayer/build/ableplayer.min.js.txt | 0 .../ableplayer/button-icons/able-icons.svg | 0 .../button-icons/black/captions.png | Bin .../button-icons/black/chapters.png | Bin .../ableplayer/button-icons/black/close.png | Bin .../button-icons/black/descriptions.png | Bin .../button-icons/black/ellipsis.png | Bin .../ableplayer/button-icons/black/faster.png | Bin .../ableplayer/button-icons/black/forward.png | Bin .../black/fullscreen-collapse.png | Bin .../button-icons/black/fullscreen-expand.png | Bin .../ableplayer/button-icons/black/help.png | Bin .../ableplayer/button-icons/black/next.png | Bin .../ableplayer/button-icons/black/pause.png | Bin .../ableplayer/button-icons/black/pipe.png | Bin .../ableplayer/button-icons/black/play.png | Bin .../button-icons/black/preferences.png | Bin .../button-icons/black/previous.png | Bin .../ableplayer/button-icons/black/rabbit.png | Bin .../ableplayer/button-icons/black/restart.png | Bin .../ableplayer/button-icons/black/rewind.png | Bin .../ableplayer/button-icons/black/sign.png | Bin .../ableplayer/button-icons/black/slower.png | Bin .../ableplayer/button-icons/black/stop.png | Bin .../button-icons/black/transcript.png | Bin .../ableplayer/button-icons/black/turtle.png | Bin .../button-icons/black/volume-loud.png | Bin .../button-icons/black/volume-medium.png | Bin .../button-icons/black/volume-mute.png | Bin .../button-icons/black/volume-soft.png | Bin .../ableplayer/button-icons/fonts/able.eot | Bin .../ableplayer/button-icons/fonts/able.svg | 0 .../ableplayer/button-icons/fonts/able.ttf | Bin .../ableplayer/button-icons/fonts/able.woff | Bin .../button-icons/white/captions.png | Bin .../button-icons/white/chapters.png | Bin .../ableplayer/button-icons/white/close.png | Bin .../button-icons/white/descriptions.png | Bin .../button-icons/white/ellipsis.png | Bin .../ableplayer/button-icons/white/faster.png | Bin .../ableplayer/button-icons/white/forward.png | Bin .../white/fullscreen-collapse.png | Bin .../button-icons/white/fullscreen-expand.png | Bin .../ableplayer/button-icons/white/help.png | Bin .../ableplayer/button-icons/white/next.png | Bin .../ableplayer/button-icons/white/pause.png | Bin .../ableplayer/button-icons/white/pipe.png | Bin .../ableplayer/button-icons/white/play.png | Bin .../button-icons/white/preferences.png | Bin .../button-icons/white/previous.png | Bin .../ableplayer/button-icons/white/rabbit.png | Bin .../ableplayer/button-icons/white/restart.png | Bin .../ableplayer/button-icons/white/rewind.png | Bin .../ableplayer/button-icons/white/sign.png | Bin .../ableplayer/button-icons/white/slower.png | Bin .../ableplayer/button-icons/white/stop.png | Bin .../button-icons/white/transcript.png | Bin .../ableplayer/button-icons/white/turtle.png | Bin .../button-icons/white/volume-loud.png | Bin .../button-icons/white/volume-medium.png | Bin .../button-icons/white/volume-mute.png | Bin .../button-icons/white/volume-soft.png | Bin .../ableplayer/images/wingrip.png | Bin .../ableplayer/package-lock.json | 0 .../ableplayer/package.json | 0 .../ableplayer/scripts/JQuery.doWhen.js | 0 .../ableplayer/scripts/ableplayer-base.js | 0 .../ableplayer/scripts/browser.js | 0 .../ableplayer/scripts/buildplayer.js | 0 .../ableplayer/scripts/caption.js | 0 .../ableplayer/scripts/chapters.js | 0 .../ableplayer/scripts/control.js | 0 .../ableplayer/scripts/description.js | 0 .../ableplayer/scripts/dialog.js | 0 .../ableplayer/scripts/dragdrop.js | 0 .../ableplayer/scripts/event.js | 0 .../ableplayer/scripts/initialize.js | 0 .../ableplayer/scripts/langs.js | 0 .../ableplayer/scripts/metadata.js | 0 .../ableplayer/scripts/misc.js | 0 .../ableplayer/scripts/preference.js | 0 .../ableplayer/scripts/search.js | 0 .../ableplayer/scripts/sign.js | 0 .../ableplayer/scripts/slider.js | 0 .../ableplayer/scripts/track.js | 0 .../ableplayer/scripts/transcript.js | 0 .../ableplayer/scripts/translation.js | 0 .../ableplayer/scripts/ttml2webvtt.js | 0 .../ableplayer/scripts/vimeo.js | 0 .../ableplayer/scripts/volume.js | 0 .../ableplayer/scripts/vts.js | 0 .../ableplayer/scripts/webvtt.js | 0 .../ableplayer/scripts/youtube.js | 0 .../ableplayer/styles/ableplayer.css | 0 .../ableplayer/thirdparty/js.cookie.js | 0 .../ableplayer/translations/ca.js | 0 .../ableplayer/translations/cs.js | 0 .../ableplayer/translations/de.js | 0 .../ableplayer/translations/en.js | 0 .../ableplayer/translations/es.js | 0 .../ableplayer/translations/fr.js | 0 .../ableplayer/translations/he.js | 0 .../ableplayer/translations/id.js | 0 .../ableplayer/translations/it.js | 0 .../ableplayer/translations/ja.js | 0 .../ableplayer/translations/nb.js | 0 .../ableplayer/translations/nl.js | 0 .../ableplayer/translations/pt-br.js | 0 .../ableplayer/translations/sv.js | 0 .../ableplayer/translations/tr.js | 0 .../ableplayer/translations/zh-tw.js | 0 .../lib => js/enable-libs}/indent.min.js | 0 js/{libs => enable-libs}/showcode.js | 18 +- js/{libs => enable-libs}/smoothscroll.js | 0 js/global.js | 4 +- js/modules/ablePlayerCustomizations.js | 7 +- js/modules/combobox.js | 12 +- js/modules/enable-carousel.js | 2 +- js/modules/enable-dialog.js | 4 +- js/modules/enable-hamburger.js | 2 +- js/modules/enable-listbox.js | 2 +- .../{sortable-table.js => sortable-tables.js} | 0 js/modules/pause-anim-control.js | 4 +- js/modules/radiogroup.js | 2 +- js/modules/tabs.js | 8 +- js/npmList.js | 36 + ...yer.less => ablePlayerCustomizations.less} | 0 less/chart.less | 13 + less/pause-anim-control.less | 106 ++ less/pause-animations-demo.less | 145 +-- less/range.less | 4 +- less/shared/a11y.less | 1 + less/showcode.less | 6 +- less/{spinner.less => spinbutton.less} | 0 package-lock.json | 961 +++++++++--------- package.json | 2 +- templates/data/meta-info.json | 53 +- templates/includes/common-head-tags.php | 4 +- templates/includes/example-footer.php | 2 +- templates/includes/functions.php | 19 +- templates/includes/npm.php | 49 +- templates/includes/showcode-template.php | 8 +- 216 files changed, 1791 insertions(+), 804 deletions(-) create mode 100644 content/body/npm.php create mode 100644 content/bottom/npm.php create mode 100644 css/ablePlayerCustomizations.css create mode 100644 css/pause-anim-control.css create mode 100644 css/pause-animations-demo copy.css create mode 100644 css/spinbutton.css create mode 100644 data/ice-cream.csv rename {libs => enable-node-libs}/accessibility-js-routines/dist/accessibility.module.js (95%) rename {libs => enable-node-libs}/dialog-polyfill/index.js (100%) rename {libs => enable-node-libs}/glider-js/glider.css (100%) rename {libs => enable-node-libs}/glider-js/glider.js (100%) rename {js/libs => enable-node-libs/indent.js/lib}/indent.min.js (100%) rename {libs => enable-node-libs}/jquery-validation/dist/jquery.validate.min.js (100%) rename {libs => enable-node-libs}/jquery/dist/jquery.min.js (100%) rename {libs => enable-node-libs}/text-zoom-event/dist/textZoomEvent.module.js (100%) create mode 100644 js/demos/line-chart copy.js rename js/{libs => enable-libs}/ableplayer/Gruntfile.js (100%) rename js/{libs => enable-libs}/ableplayer/LICENSE (100%) rename js/{libs => enable-libs}/ableplayer/README.md (100%) rename js/{libs => enable-libs}/ableplayer/_config.yml (100%) rename js/{libs => enable-libs}/ableplayer/build/ableplayer.dist.js (100%) rename js/{libs => enable-libs}/ableplayer/build/ableplayer.js (100%) rename js/{libs => enable-libs}/ableplayer/build/ableplayer.min.css (100%) rename js/{libs => enable-libs}/ableplayer/build/ableplayer.min.js (100%) rename js/{libs => enable-libs}/ableplayer/build/ableplayer.min.js.txt (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/able-icons.svg (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/captions.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/chapters.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/close.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/descriptions.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/ellipsis.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/faster.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/forward.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/fullscreen-collapse.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/fullscreen-expand.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/help.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/next.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/pause.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/pipe.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/play.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/preferences.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/previous.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/rabbit.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/restart.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/rewind.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/sign.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/slower.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/stop.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/transcript.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/turtle.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/volume-loud.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/volume-medium.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/volume-mute.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/black/volume-soft.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/fonts/able.eot (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/fonts/able.svg (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/fonts/able.ttf (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/fonts/able.woff (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/captions.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/chapters.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/close.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/descriptions.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/ellipsis.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/faster.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/forward.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/fullscreen-collapse.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/fullscreen-expand.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/help.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/next.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/pause.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/pipe.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/play.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/preferences.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/previous.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/rabbit.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/restart.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/rewind.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/sign.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/slower.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/stop.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/transcript.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/turtle.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/volume-loud.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/volume-medium.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/volume-mute.png (100%) rename js/{libs => enable-libs}/ableplayer/button-icons/white/volume-soft.png (100%) rename js/{libs => enable-libs}/ableplayer/images/wingrip.png (100%) rename js/{libs => enable-libs}/ableplayer/package-lock.json (100%) rename js/{libs => enable-libs}/ableplayer/package.json (100%) rename js/{libs => enable-libs}/ableplayer/scripts/JQuery.doWhen.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/ableplayer-base.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/browser.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/buildplayer.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/caption.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/chapters.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/control.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/description.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/dialog.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/dragdrop.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/event.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/initialize.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/langs.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/metadata.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/misc.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/preference.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/search.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/sign.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/slider.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/track.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/transcript.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/translation.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/ttml2webvtt.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/vimeo.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/volume.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/vts.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/webvtt.js (100%) rename js/{libs => enable-libs}/ableplayer/scripts/youtube.js (100%) rename js/{libs => enable-libs}/ableplayer/styles/ableplayer.css (100%) rename js/{libs => enable-libs}/ableplayer/thirdparty/js.cookie.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/ca.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/cs.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/de.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/en.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/es.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/fr.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/he.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/id.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/it.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/ja.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/nb.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/nl.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/pt-br.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/sv.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/tr.js (100%) rename js/{libs => enable-libs}/ableplayer/translations/zh-tw.js (100%) rename {libs/indent.js/lib => js/enable-libs}/indent.min.js (100%) rename js/{libs => enable-libs}/showcode.js (98%) rename js/{libs => enable-libs}/smoothscroll.js (100%) rename js/modules/es4/{sortable-table.js => sortable-tables.js} (100%) create mode 100644 js/npmList.js rename less/{video-player.less => ablePlayerCustomizations.less} (100%) create mode 100644 less/pause-anim-control.less rename less/{spinner.less => spinbutton.less} (100%) diff --git a/TODO.txt b/TODO.txt index e1ec172c..2151b221 100644 --- a/TODO.txt +++ b/TODO.txt @@ -7,6 +7,41 @@ Safari OSX: Aria-label vs tabindex="-1" +COMPONENTS ADDED AFTER PAGE LOAD +CAROUSEL -- NEW ITEMS AFTER PAGE LOAD. + +EDITING VTT FILES FROM TEAMS: + +1) Open Visual Studio Code with the vtt file and do a reg ex searchon this: + +([^0-9])\n([^\r\n0-9]) + +And replace with this; + +$1 $2 + + +2) Do a sync on the subtitles (there will be a delta of about X seconds -- i think it's about 10 ... not sure). + +3) Do a repetitive Tools -> Break/split small links + +4) Do a spell check + +5) Go over copy once over in Visual Studio code. + +6) Go over copy again in Subtitle Edit. + + + + + + + + + + + + NEED TO LOOK AT MOBILE TOOLTIPS. INTERPOLATE.JS and other modules. RECHECK ES6 MODULE INFO. diff --git a/bin/promote-node-modules-to-server.sh b/bin/promote-node-modules-to-server.sh index 2ca9aacf..23ecc459 100755 --- a/bin/promote-node-modules-to-server.sh +++ b/bin/promote-node-modules-to-server.sh @@ -2,7 +2,7 @@ const fs = require('fs'); const fsExtra = require('fs-extra') console.log('clearing lib directory'); -fsExtra.emptyDirSync('libs'); +fsExtra.emptyDirSync('enable-node-libs'); // we must copy the needed node modules into the lib directory @@ -21,7 +21,7 @@ const nodeFiles = [ nodeFiles.forEach((fullPath) => { const explodedPath = fullPath.split('/'); let fileName = explodedPath.pop(); - let dir = explodedPath.join('/').replace(/^node_modules\//, 'libs/'); + let dir = explodedPath.join('/').replace(/^node_modules\//, 'enable-node-libs/'); console.log('dir', dir); if (!fs.existsSync(dir)) { diff --git a/content/body/carousel.php b/content/body/carousel.php index 0e3b5d89..0c959272 100644 --- a/content/body/carousel.php +++ b/content/body/carousel.php @@ -160,6 +160,13 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to } - "

Note: If you want to have the skip links like in the example above, please ensure you also include the NPM module for skip links as well.

" -)) ?> + "

Note: If you want to have the skip links like in the example above, please ensure you also include the NPM module for skip links as well.

", + "otherSampleCode" => "// Note that this component doesn't currently work when
// new components are added after page load." + ) + ) +?> diff --git a/content/body/chart.php b/content/body/chart.php index 1b263feb..1b571651 100644 --- a/content/body/chart.php +++ b/content/body/chart.php @@ -39,7 +39,7 @@
- Family Birthdays (Table Coded Using Figcaption) + Canadian Ice Cream Mix Production, in kilolitres
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 @@ - \ No newline at end of file + \ 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 @@ + + \ 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
    +
    + + + + \ 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"> } - \ No newline at end of file + \ 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:

    + +
      +
    1. +

      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-cookieand jquery (jQuery is needed for AblePlayer only).

      + + +
      2. +
    + + + + + + + + + + \ 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 @@ } - + 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 @@

+ + 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 @@

-