├── .babelrc ├── .editorconfig ├── .eslintrc ├── .github └── issue-template.md ├── .gitignore ├── .nvmrc ├── .sass-lint.yml ├── CNAME ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── dist ├── all │ └── all.css ├── assets │ ├── angry-pepper.jpg │ ├── blackicon.jpg │ ├── blueicon.jpg │ ├── butterfly.jpg │ ├── chevron_left_round_red.png │ ├── chevron_right_round_red.png │ ├── chevron_up_round_red.png │ ├── dog.jpg │ ├── glasswing.jpg │ ├── gold-banded.jpg │ ├── gus-grissom.jpg │ ├── hr.png │ ├── icon_address.png │ ├── icon_address.svg │ ├── icon_email.png │ ├── icon_email.svg │ ├── icon_facebook_small.png │ ├── icon_facebook_small.svg │ ├── icon_facebook_small_hover.png │ ├── icon_facebook_small_hover.svg │ ├── icon_github.png │ ├── icon_instagram_small.png │ ├── icon_instagram_small.svg │ ├── icon_instagram_small_hover.png │ ├── icon_instagram_small_hover.svg │ ├── icon_new-tab.png │ ├── icon_phone.png │ ├── icon_phone.svg │ ├── icon_snapchat_small.png │ ├── icon_snapchat_small.svg │ ├── icon_snapchat_small_hover.png │ ├── icon_snapchat_small_hover.svg │ ├── icon_twitter.png │ ├── icon_twitter_small.png │ ├── icon_twitter_small.svg │ ├── icon_twitter_small_hover.png │ ├── icon_twitter_small_hover.svg │ ├── icon_you-tube_small.png │ ├── icon_you-tube_small.svg │ ├── icon_you-tube_small_hover.png │ ├── icon_you-tube_small_hover.svg │ ├── lacewing.jpg │ ├── mae-jemison.jpg │ ├── minus_round_red.png │ ├── plus_round_red.png │ ├── px-video-sprite.svg │ ├── searchicon.png │ ├── site-logo.png │ ├── snail.jpg │ ├── snow.jpg │ ├── starry.jpg │ ├── swallowtail.jpg │ ├── test.mp3 │ ├── tracy-caldwell.jpg │ ├── videos │ │ ├── badges-demo.mov │ │ ├── read-more.m4a │ │ ├── read-more.mov │ │ ├── read-more.mp4 │ │ ├── read-more.png │ │ ├── read-more.txt │ │ ├── read-more.vtt │ │ └── read-more.webm │ └── w3c.png ├── css │ ├── accordion.css │ ├── audio.css │ ├── breadcrumbs.css │ ├── buttons.css │ ├── cards-basic-grid.css │ ├── cards-basic.css │ ├── cards-bio-details.css │ ├── cards-bio-grid.css │ ├── cards-click.css │ ├── cards-color-overlay.css │ ├── cards-highlight-full.css │ ├── cards-highlight-left.css │ ├── cards-highlight-right.css │ ├── cards-hover.css │ ├── checkboxes.css │ ├── global.css │ ├── headings.css │ ├── icons.css │ ├── image-gallery.css │ ├── images.css │ ├── link-focus.css │ ├── lists.css │ ├── navigation-basic.css │ ├── navigation-dropdown.css │ ├── navigation-footer.css │ ├── navigation-mobile.css │ ├── pagination.css │ ├── radio-buttons.css │ ├── read-more.css │ ├── resources.css │ ├── search.css │ ├── select-lists.css │ ├── site-logo.css │ ├── skip-links.css │ ├── svgs.css │ ├── tables.css │ ├── tabs.css │ ├── text-fields.css │ ├── toggles.css │ ├── tooltips.css │ └── videos.css ├── favicons │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── js │ ├── accordion.js │ ├── aria-card-flip.js │ ├── aria-switch.js │ ├── aria-toggle.js │ ├── aria-tooltips.js │ ├── back-to-top.js │ ├── button-state.js │ ├── button.js │ ├── clipboard.min.js │ ├── copy-button.js │ ├── jump-link-fix.js │ ├── menu.js │ ├── mobile-menu-icon.js │ ├── mobile-menu.js │ ├── px-video.js │ ├── sidebar-slide.js │ ├── strings.js │ ├── tables.js │ └── tabs.js └── style-guide │ ├── homepage.html │ ├── index.html │ ├── item-cards-basic.html │ ├── item-cards-cards-basic-grid.html │ ├── item-cards-cards-bio-details.html │ ├── item-cards-cards-bio-grid.html │ ├── item-cards-cards-color-overlay.html │ ├── item-cards-cards-flip-click.html │ ├── item-cards-cards-flip-hover.html │ ├── item-cards-cards-highlight-full.html │ ├── item-cards-cards-highlight-left.html │ ├── item-cards-cards-highlight-right.html │ ├── item-cards.html │ ├── item-forms-checkboxes.html │ ├── item-forms-radio-buttons.html │ ├── item-forms-search.html │ ├── item-forms-select-lists.html │ ├── item-forms-text-fields.html │ ├── item-forms-toggles.html │ ├── item-forms-tooltips.html │ ├── item-forms.html │ ├── item-general-buttons.html │ ├── item-general-colors.html │ ├── item-general-link-focus.html │ ├── item-general-read-more.html │ ├── item-general-skip-links.html │ ├── item-general-typography.html │ ├── item-general.html │ ├── item-media-audio.html │ ├── item-media-image-gallery.html │ ├── item-media-images.html │ ├── item-media-site-logo.html │ ├── item-media-svgs.html │ ├── item-media-videos.html │ ├── item-media.html │ ├── item-navigation-accordion.html │ ├── item-navigation-breadcrumbs.html │ ├── item-navigation-navigation-basic.html │ ├── item-navigation-navigation-dropdown.html │ ├── item-navigation-navigation-footer.html │ ├── item-navigation-navigation-mobile.html │ ├── item-navigation-pagination.html │ ├── item-navigation.html │ ├── item-resources.html │ ├── item-structure-headings.html │ ├── item-structure-lists.html │ ├── item-structure-tables.html │ ├── item-structure-tabs.html │ ├── item-structure.html │ ├── kss-assets │ ├── kss.css │ ├── kss.js │ ├── local.css │ ├── main.js │ └── rainbow.min.js │ ├── section-cards.html │ ├── section-forms.html │ ├── section-general.html │ ├── section-media.html │ ├── section-navigation.html │ ├── section-resources.html │ └── section-structure.html ├── docs ├── CNAME ├── _config.yml ├── all │ └── all.css ├── assets │ ├── angry-pepper.jpg │ ├── blackicon.jpg │ ├── blueicon.jpg │ ├── butterfly.jpg │ ├── chevron_left_round_red.png │ ├── chevron_right_round_red.png │ ├── chevron_up_round_red.png │ ├── dog.jpg │ ├── glasswing.jpg │ ├── gold-banded.jpg │ ├── gus-grissom.jpg │ ├── hr.png │ ├── icon_address.png │ ├── icon_address.svg │ ├── icon_email.png │ ├── icon_email.svg │ ├── icon_facebook_small.png │ ├── icon_facebook_small.svg │ ├── icon_facebook_small_hover.png │ ├── icon_facebook_small_hover.svg │ ├── icon_github.png │ ├── icon_instagram_small.png │ ├── icon_instagram_small.svg │ ├── icon_instagram_small_hover.png │ ├── icon_instagram_small_hover.svg │ ├── icon_new-tab.png │ ├── icon_phone.png │ ├── icon_phone.svg │ ├── icon_snapchat_small.png │ ├── icon_snapchat_small.svg │ ├── icon_snapchat_small_hover.png │ ├── icon_snapchat_small_hover.svg │ ├── icon_twitter.png │ ├── icon_twitter_small.png │ ├── icon_twitter_small.svg │ ├── icon_twitter_small_hover.png │ ├── icon_twitter_small_hover.svg │ ├── icon_you-tube_small.png │ ├── icon_you-tube_small.svg │ ├── icon_you-tube_small_hover.png │ ├── icon_you-tube_small_hover.svg │ ├── lacewing.jpg │ ├── mae-jemison.jpg │ ├── minus_round_red.png │ ├── plus_round_red.png │ ├── px-video-sprite.svg │ ├── searchicon.png │ ├── site-logo.png │ ├── snail.jpg │ ├── snow.jpg │ ├── starry.jpg │ ├── swallowtail.jpg │ ├── test.mp3 │ ├── tracy-caldwell.jpg │ ├── videos │ │ ├── badges-demo.mov │ │ ├── read-more.m4a │ │ ├── read-more.mov │ │ ├── read-more.mp4 │ │ ├── read-more.png │ │ ├── read-more.txt │ │ ├── read-more.vtt │ │ └── read-more.webm │ └── w3c.png ├── browserconfig.xml ├── css │ ├── accordion.css │ ├── audio.css │ ├── breadcrumbs.css │ ├── buttons.css │ ├── cards-basic-grid.css │ ├── cards-basic.css │ ├── cards-bio-details.css │ ├── cards-bio-grid.css │ ├── cards-click.css │ ├── cards-color-overlay.css │ ├── cards-highlight-full.css │ ├── cards-highlight-left.css │ ├── cards-highlight-right.css │ ├── cards-hover.css │ ├── checkboxes.css │ ├── global.css │ ├── headings.css │ ├── icons.css │ ├── image-gallery.css │ ├── images.css │ ├── link-focus.css │ ├── lists.css │ ├── navigation-basic.css │ ├── navigation-dropdown.css │ ├── navigation-footer.css │ ├── navigation-mobile.css │ ├── pagination.css │ ├── radio-buttons.css │ ├── read-more.css │ ├── resources.css │ ├── search.css │ ├── select-lists.css │ ├── site-logo.css │ ├── skip-links.css │ ├── svgs.css │ ├── tables.css │ ├── tabs.css │ ├── text-fields.css │ ├── toggles.css │ ├── tooltips.css │ └── videos.css ├── favicons │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── js │ ├── accordion.js │ ├── aria-card-flip.js │ ├── aria-switch.js │ ├── aria-toggle.js │ ├── aria-tooltips.js │ ├── back-to-top.js │ ├── button-state.js │ ├── button.js │ ├── clipboard.min.js │ ├── copy-button.js │ ├── jump-link-fix.js │ ├── menu.js │ ├── mobile-menu-icon.js │ ├── mobile-menu.js │ ├── px-video.js │ ├── sidebar-slide.js │ ├── strings.js │ ├── tables.js │ └── tabs.js └── style-guide │ ├── homepage.html │ ├── index.html │ ├── item-cards-basic.html │ ├── item-cards-cards-basic-grid.html │ ├── item-cards-cards-bio-details.html │ ├── item-cards-cards-bio-grid.html │ ├── item-cards-cards-color-overlay.html │ ├── item-cards-cards-flip-click.html │ ├── item-cards-cards-flip-hover.html │ ├── item-cards-cards-highlight-full.html │ ├── item-cards-cards-highlight-left.html │ ├── item-cards-cards-highlight-right.html │ ├── item-cards.html │ ├── item-forms-checkboxes.html │ ├── item-forms-radio-buttons.html │ ├── item-forms-search.html │ ├── item-forms-select-lists.html │ ├── item-forms-text-fields.html │ ├── item-forms-toggles.html │ ├── item-forms-tooltips.html │ ├── item-forms.html │ ├── item-general-buttons.html │ ├── item-general-colors.html │ ├── item-general-link-focus.html │ ├── item-general-read-more.html │ ├── item-general-skip-links.html │ ├── item-general-typography.html │ ├── item-general.html │ ├── item-media-audio.html │ ├── item-media-image-gallery.html │ ├── item-media-images.html │ ├── item-media-site-logo.html │ ├── item-media-svgs.html │ ├── item-media-videos.html │ ├── item-media.html │ ├── item-navigation-accordion.html │ ├── item-navigation-breadcrumbs.html │ ├── item-navigation-navigation-basic.html │ ├── item-navigation-navigation-dropdown.html │ ├── item-navigation-navigation-footer.html │ ├── item-navigation-navigation-mobile.html │ ├── item-navigation-pagination.html │ ├── item-navigation.html │ ├── item-resources.html │ ├── item-structure-headings.html │ ├── item-structure-lists.html │ ├── item-structure-tables.html │ ├── item-structure-tabs.html │ ├── item-structure.html │ ├── kss-assets │ ├── kss.css │ ├── kss.js │ ├── local.css │ ├── main.js │ └── rainbow.min.js │ ├── section-cards.html │ ├── section-forms.html │ ├── section-general.html │ ├── section-media.html │ ├── section-navigation.html │ ├── section-resources.html │ └── section-structure.html ├── gulp-tasks ├── clean.js ├── compile.js ├── compress.js ├── concat.js ├── lint.js ├── move.js └── styleguide.js ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── components ├── accordion │ ├── accordion.scss │ └── accordion.twig ├── audio │ ├── audio.scss │ └── audio.twig ├── breadcrumbs │ ├── breadcrumbs.scss │ └── breadcrumbs.twig ├── buttons │ ├── buttons.scss │ └── buttons.twig ├── cards-basic-grid │ ├── cards-basic-grid.json │ ├── cards-basic-grid.scss │ └── cards-basic-grid.twig ├── cards-basic │ ├── cards-basic.json │ ├── cards-basic.scss │ └── cards-basic.twig ├── cards-bio-details │ ├── cards-bio-details.json │ ├── cards-bio-details.scss │ └── cards-bio-details.twig ├── cards-bio-grid │ ├── cards-bio-grid-names.twig │ ├── cards-bio-grid.json │ ├── cards-bio-grid.scss │ └── cards-bio-grid.twig ├── cards-color-overlay │ ├── cards-color-overlay.scss │ └── cards-color-overlay.twig ├── cards-flip-click │ ├── cards-click.scss │ └── cards-click.twig ├── cards-flip-hover │ ├── cards-hover.scss │ └── cards-hover.twig ├── cards-highlight-full │ ├── cards-highlight-full.scss │ └── cards-highlight-full.twig ├── cards-highlight-left │ ├── cards-highlight-left.scss │ └── cards-highlight-left.twig ├── cards-highlight-right │ ├── cards-highlight-right.scss │ └── cards-highlight-right.twig ├── checkboxes │ ├── checkboxes.scss │ └── checkboxes.twig ├── headings │ ├── headings.scss │ └── headings.twig ├── homepage.md ├── icons │ └── icons.scss ├── image-gallery │ ├── image-gallery.scss │ └── image-gallery.twig ├── images │ ├── images.scss │ └── images.twig ├── link-focus │ ├── link-focus.scss │ └── link-focus.twig ├── lists │ ├── lists.scss │ └── lists.twig ├── navigation-basic │ ├── navigation-basic.scss │ └── navigation-basic.twig ├── navigation-footer │ ├── navigation-footer.scss │ └── navigation-footer.twig ├── navigation-mobile │ ├── navigation-mobile.scss │ └── navigation-mobile.twig ├── pagination │ ├── pagination.scss │ └── pagination.twig ├── radio-buttons │ ├── radio-buttons.scss │ └── radio-buttons.twig ├── read-more │ ├── read-more.scss │ └── read-more.twig ├── resources │ ├── resources.scss │ └── resources.twig ├── search │ ├── search.scss │ └── search.twig ├── select-lists │ ├── select-lists.scss │ └── select-lists.twig ├── site-logo │ ├── site-logo.scss │ └── site-logo.twig ├── skip-links │ ├── skip-links.scss │ └── skip-links.twig ├── svgs │ ├── svgs.scss │ └── svgs.twig ├── tables │ ├── tables.scss │ └── tables.twig ├── tabs │ ├── tabs.scss │ └── tabs.twig ├── text-inputs │ ├── text-fields.scss │ └── text-fields.twig ├── toggles │ ├── toggles.scss │ └── toggles.twig ├── tooltips │ ├── tooltips.scss │ └── tooltips.twig └── videos │ ├── videos.scss │ └── videos.twig ├── global ├── base │ └── _base.scss ├── global.scss ├── js │ ├── accordion.js │ ├── aria-card-flip.js │ ├── aria-switch.js │ ├── aria-toggle.js │ ├── aria-tooltips.js │ ├── back-to-top.js │ ├── button-state.js │ ├── button.js │ ├── clipboard.min.js │ ├── copy-button.js │ ├── jump-link-fix.js │ ├── menu.js │ ├── mobile-menu-icon.js │ ├── mobile-menu.js │ ├── px-video.js │ ├── sidebar-slide.js │ ├── strings.js │ ├── tables.js │ └── tabs.js └── utils │ ├── _breakpoints.scss │ ├── _colors.scss │ ├── _functions.scss │ ├── _init.scss │ ├── _mixins.scss │ ├── _overrides.scss │ ├── _typography.scss │ └── _variables.scss ├── index-copy.html └── style-guide └── builder ├── builder.js ├── index.twig ├── kss-assets ├── kss.css ├── kss.js ├── local.css ├── main.js └── rainbow.min.js └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ], 5 | "plugins": [ 6 | "transform-remove-strict-mode" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.github/issue-template.md: -------------------------------------------------------------------------------- 1 | ## Issue 2 | Brief description of the issue. Please list any specific steps. 3 | 4 | ## Example 5 | Something that demonstrates the issue - CodePen, gif, image, etc. Be specific. 6 | 7 | ## Additional Information 8 | Operating System and version: 9 | Browser and version: 10 | Assistive technology used (if applicable): 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore the node modules folder (created by 'npm install'). 2 | node_modules 3 | 4 | # We absolutely don't want to have the .sass-cache in git. 5 | .sass-cache 6 | 7 | # Ignore any errors thrown by npm. 8 | npm-debug.log 9 | 10 | # Ignore any map files. These don't need to be committed. 11 | *.map 12 | 13 | # Ignore OS Mac (mostly) & Windows files 14 | ._* 15 | .DS_Store 16 | .DS_Store? 17 | .Spotlight-V100 18 | .Trashes 19 | Desktop.ini 20 | ehthumbs.db 21 | Thumbs.db 22 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v7.4.0 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | www.a11y-style-guide.com 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 |

How to Contribute

2 |

This has a KSS node base, so learn a bit about how KSS node works.

3 |

To make local changes to components, do the following:

4 | 18 |

This will run all the gulp commands including the style guide update. If you want to contribute back, please do so! This is a great Git resource if you need to brush-up on your skills (all levels)

19 |
20 |

Tips and Tricks

21 |
28 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dist/assets/angry-pepper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/angry-pepper.jpg -------------------------------------------------------------------------------- /dist/assets/blackicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/blackicon.jpg -------------------------------------------------------------------------------- /dist/assets/blueicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/blueicon.jpg -------------------------------------------------------------------------------- /dist/assets/butterfly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/butterfly.jpg -------------------------------------------------------------------------------- /dist/assets/chevron_left_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/chevron_left_round_red.png -------------------------------------------------------------------------------- /dist/assets/chevron_right_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/chevron_right_round_red.png -------------------------------------------------------------------------------- /dist/assets/chevron_up_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/chevron_up_round_red.png -------------------------------------------------------------------------------- /dist/assets/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/dog.jpg -------------------------------------------------------------------------------- /dist/assets/glasswing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/glasswing.jpg -------------------------------------------------------------------------------- /dist/assets/gold-banded.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/gold-banded.jpg -------------------------------------------------------------------------------- /dist/assets/gus-grissom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/gus-grissom.jpg -------------------------------------------------------------------------------- /dist/assets/hr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/hr.png -------------------------------------------------------------------------------- /dist/assets/icon_address.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_address.png -------------------------------------------------------------------------------- /dist/assets/icon_address.svg: -------------------------------------------------------------------------------- 1 | icon_address -------------------------------------------------------------------------------- /dist/assets/icon_email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_email.png -------------------------------------------------------------------------------- /dist/assets/icon_email.svg: -------------------------------------------------------------------------------- 1 | icon_email -------------------------------------------------------------------------------- /dist/assets/icon_facebook_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_facebook_small.png -------------------------------------------------------------------------------- /dist/assets/icon_facebook_small.svg: -------------------------------------------------------------------------------- 1 | icon_facebook_small -------------------------------------------------------------------------------- /dist/assets/icon_facebook_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_facebook_small_hover.png -------------------------------------------------------------------------------- /dist/assets/icon_facebook_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_facebook_small -------------------------------------------------------------------------------- /dist/assets/icon_github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_github.png -------------------------------------------------------------------------------- /dist/assets/icon_instagram_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_instagram_small.png -------------------------------------------------------------------------------- /dist/assets/icon_instagram_small.svg: -------------------------------------------------------------------------------- 1 | icon_instagram_small -------------------------------------------------------------------------------- /dist/assets/icon_instagram_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_instagram_small_hover.png -------------------------------------------------------------------------------- /dist/assets/icon_instagram_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_instagram_small_hover -------------------------------------------------------------------------------- /dist/assets/icon_new-tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_new-tab.png -------------------------------------------------------------------------------- /dist/assets/icon_phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_phone.png -------------------------------------------------------------------------------- /dist/assets/icon_phone.svg: -------------------------------------------------------------------------------- 1 | icon_phone -------------------------------------------------------------------------------- /dist/assets/icon_snapchat_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_snapchat_small.png -------------------------------------------------------------------------------- /dist/assets/icon_snapchat_small.svg: -------------------------------------------------------------------------------- 1 | icon_snapchat_small -------------------------------------------------------------------------------- /dist/assets/icon_snapchat_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_snapchat_small_hover.png -------------------------------------------------------------------------------- /dist/assets/icon_snapchat_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_snapchat_small_hover -------------------------------------------------------------------------------- /dist/assets/icon_twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_twitter.png -------------------------------------------------------------------------------- /dist/assets/icon_twitter_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_twitter_small.png -------------------------------------------------------------------------------- /dist/assets/icon_twitter_small.svg: -------------------------------------------------------------------------------- 1 | icon_twitter_small -------------------------------------------------------------------------------- /dist/assets/icon_twitter_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_twitter_small_hover.png -------------------------------------------------------------------------------- /dist/assets/icon_twitter_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_twitter_small_hover -------------------------------------------------------------------------------- /dist/assets/icon_you-tube_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_you-tube_small.png -------------------------------------------------------------------------------- /dist/assets/icon_you-tube_small.svg: -------------------------------------------------------------------------------- 1 | icon_you-tube_small -------------------------------------------------------------------------------- /dist/assets/icon_you-tube_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/icon_you-tube_small_hover.png -------------------------------------------------------------------------------- /dist/assets/icon_you-tube_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_you-tube_small_hover -------------------------------------------------------------------------------- /dist/assets/lacewing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/lacewing.jpg -------------------------------------------------------------------------------- /dist/assets/mae-jemison.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/mae-jemison.jpg -------------------------------------------------------------------------------- /dist/assets/minus_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/minus_round_red.png -------------------------------------------------------------------------------- /dist/assets/plus_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/plus_round_red.png -------------------------------------------------------------------------------- /dist/assets/searchicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/searchicon.png -------------------------------------------------------------------------------- /dist/assets/site-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/site-logo.png -------------------------------------------------------------------------------- /dist/assets/snail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/snail.jpg -------------------------------------------------------------------------------- /dist/assets/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/snow.jpg -------------------------------------------------------------------------------- /dist/assets/starry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/starry.jpg -------------------------------------------------------------------------------- /dist/assets/swallowtail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/swallowtail.jpg -------------------------------------------------------------------------------- /dist/assets/test.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/test.mp3 -------------------------------------------------------------------------------- /dist/assets/tracy-caldwell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/tracy-caldwell.jpg -------------------------------------------------------------------------------- /dist/assets/videos/badges-demo.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/badges-demo.mov -------------------------------------------------------------------------------- /dist/assets/videos/read-more.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/read-more.m4a -------------------------------------------------------------------------------- /dist/assets/videos/read-more.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/read-more.mov -------------------------------------------------------------------------------- /dist/assets/videos/read-more.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/read-more.mp4 -------------------------------------------------------------------------------- /dist/assets/videos/read-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/read-more.png -------------------------------------------------------------------------------- /dist/assets/videos/read-more.txt: -------------------------------------------------------------------------------- 1 | Here is some placeholder info about the Read More video. -------------------------------------------------------------------------------- /dist/assets/videos/read-more.vtt: -------------------------------------------------------------------------------- 1 | Here is some placeholder info about the Read More video. -------------------------------------------------------------------------------- /dist/assets/videos/read-more.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/videos/read-more.webm -------------------------------------------------------------------------------- /dist/assets/w3c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/assets/w3c.png -------------------------------------------------------------------------------- /dist/css/cards-highlight-left.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/css/cards-highlight-left.css -------------------------------------------------------------------------------- /dist/css/cards-highlight-right.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/css/cards-highlight-right.css -------------------------------------------------------------------------------- /dist/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /dist/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /dist/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /dist/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /dist/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /dist/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /dist/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/apple-icon.png -------------------------------------------------------------------------------- /dist/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /dist/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /dist/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /dist/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /dist/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/favicon.ico -------------------------------------------------------------------------------- /dist/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /dist/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /dist/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /dist/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /dist/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /dist/js/accordion.js: -------------------------------------------------------------------------------- 1 | ;(function ( $, doc ) { 2 | 'use strict'; 3 | 4 | var accordion = $('.accordion__trigger'); 5 | 6 | accordion.on('click',function(event) { 7 | //check if the panel is already expanded 8 | var isExpanded = $(this).attr('aria-expanded') == 'true'; 9 | var accordionContent = '#' + $(this).attr('aria-controls'); 10 | 11 | if(isExpanded) { 12 | //hide the content panel and mark expanded as false 13 | $(accordionContent).attr('aria-hidden',true).slideUp(); 14 | $(this).attr('aria-expanded',false); 15 | } else { 16 | $(accordionContent).attr('aria-hidden',false).slideDown(); 17 | $(this).attr('aria-expanded', true); 18 | } 19 | 20 | event.preventDefault(); 21 | }); 22 | 23 | accordion.on('keydown',function(event){ 24 | //navigate up and down 25 | if (event.keyCode == 40) { 26 | $(this).closest('.js-accordion__panel').next().find(accordion).focus(); 27 | } 28 | if (event.keyCode == 38) { 29 | $(this).closest('.js-accordion__panel').prev().find(accordion).focus(); 30 | } 31 | }); 32 | 33 | })( jQuery, this.document ); 34 | -------------------------------------------------------------------------------- /dist/js/aria-card-flip.js: -------------------------------------------------------------------------------- 1 | (function(win, doc) { 2 | 'use strict'; 3 | if (!doc.querySelectorAll || !win.addEventListener) { 4 | return; 5 | } 6 | var toggles = doc.querySelectorAll('[aria-controls]'); 7 | var togglecount = toggles.length; 8 | var toggleID; 9 | var togglecontent; 10 | var i; 11 | var target; 12 | for (i = 0; i < togglecount; i = i + 1) { 13 | toggleID = toggles[i].getAttribute('aria-controls'); 14 | togglecontent = doc.getElementById(toggleID); 15 | togglecontent.setAttribute('aria-hidden', 'true'); 16 | togglecontent.setAttribute('tabindex', '-1'); 17 | } 18 | 19 | var cards = document.querySelectorAll(".card.effect__click"); 20 | for ( var i = 0, len = cards.length; i < len; i++ ) { 21 | var card = cards[i]; 22 | clickListener( card ); 23 | } 24 | 25 | function clickListener(card) { 26 | card.addEventListener( 'click', function() { 27 | var c = this.classList; 28 | c.contains('flipped') === true ? c.remove('flipped') : c.add('flipped'); 29 | }); 30 | } 31 | 32 | function toggle(ev) { 33 | ev = ev || win.event; 34 | target = ev.target || ev.srcElement; 35 | 36 | if (target.hasAttribute('aria-controls')) { 37 | toggleID = target.getAttribute('aria-controls'); 38 | togglecontent = doc.getElementById(toggleID); 39 | 40 | if (togglecontent.getAttribute('aria-hidden') == 'true') { 41 | togglecontent.setAttribute('aria-hidden', 'false'); 42 | target.setAttribute('aria-expanded', 'true'); 43 | } else { 44 | 45 | togglecontent.setAttribute('aria-hidden', 'true'); 46 | target.setAttribute('aria-expanded', 'false'); 47 | } 48 | } 49 | } 50 | 51 | // Each card needs its own specific ID 52 | doc.getElementById('flip1').addEventListener('click', toggle, false); 53 | doc.getElementById('flip2').addEventListener('click', toggle, false); 54 | doc.getElementById('flip3').addEventListener('click', toggle, false); 55 | doc.getElementById('flip4').addEventListener('click', toggle, false); 56 | 57 | }(this, this.document)); 58 | -------------------------------------------------------------------------------- /dist/js/back-to-top.js: -------------------------------------------------------------------------------- 1 | ;(function ( $, doc ) { 2 | 'use strict'; 3 | 4 | var $win = $(window); 5 | var $html = $('html'); 6 | var scrollTimeout; // global for any pending scrollTimeout 7 | 8 | $win.scroll(function () { 9 | if ( scrollTimeout ) { 10 | // clear the timeout, if one is pending 11 | clearTimeout(scrollTimeout); 12 | scrollTimeout = null; 13 | } 14 | scrollTimeout = setTimeout(scrollHandler, 200); 15 | }); 16 | 17 | 18 | var scrollHandler = function () { 19 | if ( $win.scrollTop() >= 200 && !$html.hasClass('show-back-to-top') ) { 20 | $html.addClass('show-back-to-top'); 21 | } 22 | else if ( $win.scrollTop() <= 200 ) { 23 | $html.removeClass('show-back-to-top'); 24 | } 25 | }; 26 | 27 | if ( $win.scrollTop() >= 200 ) { 28 | $html.addClass('show-back-to-top'); 29 | } 30 | 31 | scrollHandler(); 32 | 33 | 34 | $('.back-to-top').on('click', function () { 35 | var $targetNode = $(this).attr('href').split('h1')[1]; 36 | $('h1' + $targetNode).attr('tabindex', '-1'); 37 | $html.removeClass('show-back-to-top'); 38 | $('h1' + $targetNode).focus(); 39 | }); 40 | 41 | })( jQuery, this.document ); 42 | -------------------------------------------------------------------------------- /dist/js/button-state.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | var pressedBtn = document.getElementById('button_state'); 3 | 4 | pressedBtn.addEventListener('click', function (e) { 5 | pressedBtn.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 6 | }); 7 | 8 | var pressedBtn2 = document.getElementById('button_like'); 9 | 10 | pressedBtn2.addEventListener('click', function (e) { 11 | pressedBtn2.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 12 | }); 13 | 14 | var pressedBtn3 = document.getElementById('button_all'); 15 | 16 | pressedBtn3.addEventListener('click', function (e) { 17 | pressedBtn3.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 18 | }); 19 | 20 | var pressedBtn4 = document.getElementById('button_search'); 21 | 22 | pressedBtn4.addEventListener('click', function (e) { 23 | pressedBtn4.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 24 | }); 25 | })(document, jQuery); 26 | -------------------------------------------------------------------------------- /dist/js/button.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | function handleBtnClick(event) { 3 | toggleButton(event.target); 4 | } 5 | 6 | function handleBtnKeyPress(event) { 7 | // Check to see if space or enter were pressed 8 | if (event.keyCode === 32 || event.keyCode === 13) { 9 | // Prevent the default action to stop scrolling when space is pressed 10 | event.preventDefault(); 11 | toggleButton(event.target); 12 | } 13 | } 14 | 15 | function toggleButton(element) { 16 | // Check to see if the button is pressed 17 | var pressed = (element.getAttribute("aria-pressed") === "true"); 18 | // Change aria-pressed to the opposite state 19 | element.setAttribute("aria-pressed", !pressed); 20 | } 21 | })(document, jQuery); 22 | -------------------------------------------------------------------------------- /dist/js/copy-button.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | var clip = new Clipboard('.copy-button'); 3 | 4 | clip.on('success', function(e) { 5 | $('.copied').show(); 6 | $('.copied').fadeOut(2000); 7 | }); 8 | })(document, jQuery); 9 | -------------------------------------------------------------------------------- /dist/js/jump-link-fix.js: -------------------------------------------------------------------------------- 1 | var jumpLinkFix = function () { 2 | var el = document.getElementById( location.hash.substring( 1 ) ); 3 | 4 | if ( el ) { 5 | if ( !/^(?:a|select|input|button|textarea)$/i.test( el.tagName ) ) { 6 | el.tabIndex = -1; 7 | } 8 | el.focus(); 9 | } // if 10 | }; 11 | -------------------------------------------------------------------------------- /dist/js/mobile-menu-icon.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | // Set button to click. Toggle button example 1. 3 | var button = document.getElementById( 'menu-toggle-ex1' ); 4 | 5 | // Click the button. 6 | button.onclick = function() { 7 | 8 | // Toggle class "opened". Set also aria-expanded to true or false. 9 | if ( -1 !== button.className.indexOf( 'opened' ) ) { 10 | button.className = button.className.replace( ' opened', '' ); 11 | button.setAttribute( 'aria-expanded', 'false' ); 12 | } else { 13 | button.className += ' opened'; 14 | button.setAttribute( 'aria-expanded', 'true' ); 15 | } 16 | 17 | }; 18 | 19 | // Set button to click. Toggle button example 2. 20 | var button2 = document.getElementById( 'menu-toggle-ex2' ); 21 | 22 | // Click the button. 23 | button2.onclick = function() { 24 | 25 | // Toggle class "opened". Set also aria-expanded to true or false. 26 | if ( -1 !== button2.className.indexOf( 'opened' ) ) { 27 | button2.className = button2.className.replace( ' opened', '' ); 28 | button2.setAttribute( 'aria-expanded', 'false' ); 29 | } else { 30 | button2.className += ' opened'; 31 | button2.setAttribute( 'aria-expanded', 'true' ); 32 | } 33 | 34 | }; 35 | 36 | })(document, jQuery); 37 | -------------------------------------------------------------------------------- /dist/js/mobile-menu.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | $('#toggle-menu').click(function(e) { 3 | e.preventDefault(); 4 | $('ul').toggleClass('active'); 5 | }); 6 | 7 | 8 | // Set button to click. Mobile menu button. 9 | var buttonmm = document.getElementById( 'toggle-menu' ); 10 | 11 | // Click the button. 12 | buttonmm.onclick = function() { 13 | 14 | // Toggle class "opened". Set also aria-expanded to true or false. 15 | if ( -1 !== buttonmm.className.indexOf( 'opened' ) ) { 16 | buttonmm.className = buttonmm.className.replace( ' opened', '' ); 17 | buttonmm.setAttribute( 'aria-expanded', 'false' ); 18 | } else { 19 | buttonmm.className += ' opened'; 20 | buttonmm.setAttribute( 'aria-expanded', 'true' ); 21 | } 22 | 23 | }; 24 | })(document, jQuery); -------------------------------------------------------------------------------- /dist/js/sidebar-slide.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | 'use strict'; 3 | 4 | // the nav is open by default, so set 5 | // aria-expanded to be true by default 6 | // also add aria-controls to provide context 7 | // (to ATs that actually respect aria-controls) 8 | // as to what element this button is toggling 9 | $('.nav-btn').attr({ 10 | 'aria-expanded': 'true', 11 | 'aria-controls': 'kss-nav-list' 12 | }); 13 | 14 | $('.nav-btn').on('click', function() { 15 | $('.kss-sidebar').toggleClass('kss-sidebar-collapsed'); 16 | // when the button is triggered, toggle between expanded 17 | // state being true/false 18 | if ( $(this).attr('aria-expanded') === 'true' ) { 19 | $(this).attr('aria-expanded', 'false'); 20 | } 21 | else { 22 | $(this).attr('aria-expanded', 'true'); 23 | } 24 | }); 25 | })(document, jQuery); 26 | -------------------------------------------------------------------------------- /dist/js/strings.js: -------------------------------------------------------------------------------- 1 | var GLOBAL_STRINGS = { 2 | "PLAY": "Play", 3 | "PAUSE": "Pause", 4 | "TOGGLE_FULL_SCREEN": "Toggle full screen", 5 | "MUTE": "Mute", 6 | "RESTART": "Restart", 7 | "CAPTIONS": "Closed captions", 8 | "REWIND": "Rewind", 9 | "FORWARD": "Forward" 10 | } -------------------------------------------------------------------------------- /dist/js/tables.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var i, 5 | element; 6 | 7 | //create headers for the mobile view 8 | (function () { 9 | var headers = document.getElementById("responsive-tableID").querySelectorAll("th"), 10 | index = 1, 11 | columns = document.getElementById("responsive-tableID").querySelectorAll("td"), 12 | headerName, 13 | responsiveHeader; 14 | 15 | if (columns.length > 0) { 16 | for (i = 0; i < columns.length; i += 1) { 17 | if (index > headers.length) { 18 | index = 1; 19 | } 20 | //mobile headers are actually td 21 | element = columns[i]; 22 | headerName = document.getElementById("responsive-tableID").querySelector('th:nth-of-type(' + index + ')').textContent; 23 | responsiveHeader = document.createElement("td"); 24 | 25 | responsiveHeader.className = "responsive-header"; 26 | responsiveHeader.innerHTML = headerName; 27 | element.parentNode.insertBefore(responsiveHeader, element); 28 | 29 | index+=1; 30 | } 31 | } 32 | }()); 33 | 34 | var tableMinWidth, 35 | hasBeenSet = false; 36 | 37 | //addds mobile class for table when table is larger than screen 38 | function sytleTable () { 39 | var tableWidth = document.querySelector('.responsive-table').offsetWidth, 40 | windowWidth = window.innerWidth, 41 | responsiveTables = document.getElementsByClassName('responsive-table'); 42 | 43 | if (tableWidth >= windowWidth) { 44 | if (!hasBeenSet) { 45 | tableMinWidth = tableWidth; 46 | hasBeenSet = true; 47 | } 48 | 49 | for (i = 0; i < responsiveTables.length; i += 1) { 50 | element = responsiveTables[i]; 51 | element.classList.add("mobile"); 52 | } 53 | 54 | } else if (tableWidth >= tableMinWidth) { 55 | 56 | for (i = 0; i < responsiveTables.length ; i += 1) { 57 | element = responsiveTables[i]; 58 | element.classList.remove("mobile"); 59 | } 60 | 61 | } 62 | } 63 | 64 | window.onresize = function () { 65 | sytleTable(); 66 | }; 67 | 68 | sytleTable(); 69 | }; //window.onload -------------------------------------------------------------------------------- /dist/style-guide/kss-assets/kss.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var KssStateGenerator; 3 | 4 | KssStateGenerator = (function() { 5 | 6 | function KssStateGenerator() { 7 | var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; 8 | pseudos = /(\:hover|\:disabled|\:active|\:visited|\:focus)/g; 9 | // try { 10 | _ref = document.styleSheets; 11 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 12 | stylesheet = _ref[_i]; 13 | idxs = []; 14 | _ref2 = stylesheet.cssRules || []; 15 | for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { 16 | rule = _ref2[idx]; 17 | if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { 18 | replaceRule = function(matched, stuff) { 19 | return ".pseudo-class-" + matched.replace(':', ''); 20 | }; 21 | this.insertRule(rule.cssText.replace(pseudos, replaceRule)); 22 | } 23 | } 24 | } 25 | // } catch (_error) {console.log(_error.message);} 26 | } 27 | 28 | KssStateGenerator.prototype.insertRule = function(rule) { 29 | var headEl, styleEl; 30 | headEl = document.getElementsByTagName('head')[0]; 31 | styleEl = document.createElement('style'); 32 | styleEl.type = 'text/css'; 33 | if (styleEl.styleSheet) { 34 | styleEl.styleSheet.cssText = rule; 35 | } else { 36 | styleEl.appendChild(document.createTextNode(rule)); 37 | } 38 | return headEl.appendChild(styleEl); 39 | }; 40 | 41 | return KssStateGenerator; 42 | 43 | })(); 44 | 45 | new KssStateGenerator; 46 | 47 | }).call(this); 48 | -------------------------------------------------------------------------------- /dist/style-guide/kss-assets/local.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/dist/style-guide/kss-assets/local.css -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | a11y-style-guide.com -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /docs/assets/angry-pepper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/angry-pepper.jpg -------------------------------------------------------------------------------- /docs/assets/blackicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/blackicon.jpg -------------------------------------------------------------------------------- /docs/assets/blueicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/blueicon.jpg -------------------------------------------------------------------------------- /docs/assets/butterfly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/butterfly.jpg -------------------------------------------------------------------------------- /docs/assets/chevron_left_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/chevron_left_round_red.png -------------------------------------------------------------------------------- /docs/assets/chevron_right_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/chevron_right_round_red.png -------------------------------------------------------------------------------- /docs/assets/chevron_up_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/chevron_up_round_red.png -------------------------------------------------------------------------------- /docs/assets/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/dog.jpg -------------------------------------------------------------------------------- /docs/assets/glasswing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/glasswing.jpg -------------------------------------------------------------------------------- /docs/assets/gold-banded.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/gold-banded.jpg -------------------------------------------------------------------------------- /docs/assets/gus-grissom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/gus-grissom.jpg -------------------------------------------------------------------------------- /docs/assets/hr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/hr.png -------------------------------------------------------------------------------- /docs/assets/icon_address.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_address.png -------------------------------------------------------------------------------- /docs/assets/icon_address.svg: -------------------------------------------------------------------------------- 1 | icon_address -------------------------------------------------------------------------------- /docs/assets/icon_email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_email.png -------------------------------------------------------------------------------- /docs/assets/icon_email.svg: -------------------------------------------------------------------------------- 1 | icon_email -------------------------------------------------------------------------------- /docs/assets/icon_facebook_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_facebook_small.png -------------------------------------------------------------------------------- /docs/assets/icon_facebook_small.svg: -------------------------------------------------------------------------------- 1 | icon_facebook_small -------------------------------------------------------------------------------- /docs/assets/icon_facebook_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_facebook_small_hover.png -------------------------------------------------------------------------------- /docs/assets/icon_facebook_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_facebook_small -------------------------------------------------------------------------------- /docs/assets/icon_github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_github.png -------------------------------------------------------------------------------- /docs/assets/icon_instagram_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_instagram_small.png -------------------------------------------------------------------------------- /docs/assets/icon_instagram_small.svg: -------------------------------------------------------------------------------- 1 | icon_instagram_small -------------------------------------------------------------------------------- /docs/assets/icon_instagram_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_instagram_small_hover.png -------------------------------------------------------------------------------- /docs/assets/icon_instagram_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_instagram_small_hover -------------------------------------------------------------------------------- /docs/assets/icon_new-tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_new-tab.png -------------------------------------------------------------------------------- /docs/assets/icon_phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_phone.png -------------------------------------------------------------------------------- /docs/assets/icon_phone.svg: -------------------------------------------------------------------------------- 1 | icon_phone -------------------------------------------------------------------------------- /docs/assets/icon_snapchat_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_snapchat_small.png -------------------------------------------------------------------------------- /docs/assets/icon_snapchat_small.svg: -------------------------------------------------------------------------------- 1 | icon_snapchat_small -------------------------------------------------------------------------------- /docs/assets/icon_snapchat_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_snapchat_small_hover.png -------------------------------------------------------------------------------- /docs/assets/icon_snapchat_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_snapchat_small_hover -------------------------------------------------------------------------------- /docs/assets/icon_twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_twitter.png -------------------------------------------------------------------------------- /docs/assets/icon_twitter_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_twitter_small.png -------------------------------------------------------------------------------- /docs/assets/icon_twitter_small.svg: -------------------------------------------------------------------------------- 1 | icon_twitter_small -------------------------------------------------------------------------------- /docs/assets/icon_twitter_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_twitter_small_hover.png -------------------------------------------------------------------------------- /docs/assets/icon_twitter_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_twitter_small_hover -------------------------------------------------------------------------------- /docs/assets/icon_you-tube_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_you-tube_small.png -------------------------------------------------------------------------------- /docs/assets/icon_you-tube_small.svg: -------------------------------------------------------------------------------- 1 | icon_you-tube_small -------------------------------------------------------------------------------- /docs/assets/icon_you-tube_small_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/icon_you-tube_small_hover.png -------------------------------------------------------------------------------- /docs/assets/icon_you-tube_small_hover.svg: -------------------------------------------------------------------------------- 1 | icon_you-tube_small_hover -------------------------------------------------------------------------------- /docs/assets/lacewing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/lacewing.jpg -------------------------------------------------------------------------------- /docs/assets/mae-jemison.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/mae-jemison.jpg -------------------------------------------------------------------------------- /docs/assets/minus_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/minus_round_red.png -------------------------------------------------------------------------------- /docs/assets/plus_round_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/plus_round_red.png -------------------------------------------------------------------------------- /docs/assets/searchicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/searchicon.png -------------------------------------------------------------------------------- /docs/assets/site-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/site-logo.png -------------------------------------------------------------------------------- /docs/assets/snail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/snail.jpg -------------------------------------------------------------------------------- /docs/assets/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/snow.jpg -------------------------------------------------------------------------------- /docs/assets/starry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/starry.jpg -------------------------------------------------------------------------------- /docs/assets/swallowtail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/swallowtail.jpg -------------------------------------------------------------------------------- /docs/assets/test.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/test.mp3 -------------------------------------------------------------------------------- /docs/assets/tracy-caldwell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/tracy-caldwell.jpg -------------------------------------------------------------------------------- /docs/assets/videos/badges-demo.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/badges-demo.mov -------------------------------------------------------------------------------- /docs/assets/videos/read-more.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/read-more.m4a -------------------------------------------------------------------------------- /docs/assets/videos/read-more.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/read-more.mov -------------------------------------------------------------------------------- /docs/assets/videos/read-more.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/read-more.mp4 -------------------------------------------------------------------------------- /docs/assets/videos/read-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/read-more.png -------------------------------------------------------------------------------- /docs/assets/videos/read-more.txt: -------------------------------------------------------------------------------- 1 | Here is some placeholder info about the Read More video. -------------------------------------------------------------------------------- /docs/assets/videos/read-more.vtt: -------------------------------------------------------------------------------- 1 | Here is some placeholder info about the Read More video. -------------------------------------------------------------------------------- /docs/assets/videos/read-more.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/videos/read-more.webm -------------------------------------------------------------------------------- /docs/assets/w3c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/assets/w3c.png -------------------------------------------------------------------------------- /docs/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /docs/css/cards-highlight-left.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/css/cards-highlight-left.css -------------------------------------------------------------------------------- /docs/css/cards-highlight-right.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/css/cards-highlight-right.css -------------------------------------------------------------------------------- /docs/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /docs/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /docs/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /docs/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /docs/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /docs/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /docs/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/apple-icon.png -------------------------------------------------------------------------------- /docs/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /docs/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /docs/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /docs/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /docs/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/favicon.ico -------------------------------------------------------------------------------- /docs/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /docs/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /docs/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /docs/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /docs/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /docs/js/accordion.js: -------------------------------------------------------------------------------- 1 | ;(function ( $, doc ) { 2 | 'use strict'; 3 | 4 | var accordion = $('.accordion__trigger'); 5 | 6 | accordion.on('click',function(event) { 7 | //check if the panel is already expanded 8 | var isExpanded = $(this).attr('aria-expanded') == 'true'; 9 | var accordionContent = '#' + $(this).attr('aria-controls'); 10 | 11 | if(isExpanded) { 12 | //hide the content panel and mark expanded as false 13 | $(accordionContent).attr('aria-hidden',true).slideUp(); 14 | $(this).attr('aria-expanded',false); 15 | } else { 16 | $(accordionContent).attr('aria-hidden',false).slideDown(); 17 | $(this).attr('aria-expanded', true); 18 | } 19 | 20 | event.preventDefault(); 21 | }); 22 | 23 | accordion.on('keydown',function(event){ 24 | //navigate up and down 25 | if (event.keyCode == 40) { 26 | $(this).closest('.js-accordion__panel').next().find(accordion).focus(); 27 | } 28 | if (event.keyCode == 38) { 29 | $(this).closest('.js-accordion__panel').prev().find(accordion).focus(); 30 | } 31 | }); 32 | 33 | })( jQuery, this.document ); 34 | -------------------------------------------------------------------------------- /docs/js/aria-card-flip.js: -------------------------------------------------------------------------------- 1 | (function(win, doc) { 2 | 'use strict'; 3 | if (!doc.querySelectorAll || !win.addEventListener) { 4 | return; 5 | } 6 | var toggles = doc.querySelectorAll('[aria-controls]'); 7 | var togglecount = toggles.length; 8 | var toggleID; 9 | var togglecontent; 10 | var i; 11 | var target; 12 | for (i = 0; i < togglecount; i = i + 1) { 13 | toggleID = toggles[i].getAttribute('aria-controls'); 14 | togglecontent = doc.getElementById(toggleID); 15 | togglecontent.setAttribute('aria-hidden', 'true'); 16 | togglecontent.setAttribute('tabindex', '-1'); 17 | } 18 | 19 | var cards = document.querySelectorAll(".card.effect__click"); 20 | for ( var i = 0, len = cards.length; i < len; i++ ) { 21 | var card = cards[i]; 22 | clickListener( card ); 23 | } 24 | 25 | function clickListener(card) { 26 | card.addEventListener( 'click', function() { 27 | var c = this.classList; 28 | c.contains('flipped') === true ? c.remove('flipped') : c.add('flipped'); 29 | }); 30 | } 31 | 32 | function toggle(ev) { 33 | ev = ev || win.event; 34 | target = ev.target || ev.srcElement; 35 | 36 | if (target.hasAttribute('aria-controls')) { 37 | toggleID = target.getAttribute('aria-controls'); 38 | togglecontent = doc.getElementById(toggleID); 39 | 40 | if (togglecontent.getAttribute('aria-hidden') == 'true') { 41 | togglecontent.setAttribute('aria-hidden', 'false'); 42 | target.setAttribute('aria-expanded', 'true'); 43 | } else { 44 | 45 | togglecontent.setAttribute('aria-hidden', 'true'); 46 | target.setAttribute('aria-expanded', 'false'); 47 | } 48 | } 49 | } 50 | 51 | // Each card needs its own specific ID 52 | doc.getElementById('flip1').addEventListener('click', toggle, false); 53 | doc.getElementById('flip2').addEventListener('click', toggle, false); 54 | doc.getElementById('flip3').addEventListener('click', toggle, false); 55 | doc.getElementById('flip4').addEventListener('click', toggle, false); 56 | 57 | }(this, this.document)); 58 | -------------------------------------------------------------------------------- /docs/js/back-to-top.js: -------------------------------------------------------------------------------- 1 | ;(function ( $, doc ) { 2 | 'use strict'; 3 | 4 | var $win = $(window); 5 | var $html = $('html'); 6 | var scrollTimeout; // global for any pending scrollTimeout 7 | 8 | $win.scroll(function () { 9 | if ( scrollTimeout ) { 10 | // clear the timeout, if one is pending 11 | clearTimeout(scrollTimeout); 12 | scrollTimeout = null; 13 | } 14 | scrollTimeout = setTimeout(scrollHandler, 200); 15 | }); 16 | 17 | 18 | var scrollHandler = function () { 19 | if ( $win.scrollTop() >= 200 && !$html.hasClass('show-back-to-top') ) { 20 | $html.addClass('show-back-to-top'); 21 | } 22 | else if ( $win.scrollTop() <= 200 ) { 23 | $html.removeClass('show-back-to-top'); 24 | } 25 | }; 26 | 27 | if ( $win.scrollTop() >= 200 ) { 28 | $html.addClass('show-back-to-top'); 29 | } 30 | 31 | scrollHandler(); 32 | 33 | 34 | $('.back-to-top').on('click', function () { 35 | var $targetNode = $(this).attr('href').split('h1')[1]; 36 | $('h1' + $targetNode).attr('tabindex', '-1'); 37 | $html.removeClass('show-back-to-top'); 38 | $('h1' + $targetNode).focus(); 39 | }); 40 | 41 | })( jQuery, this.document ); 42 | -------------------------------------------------------------------------------- /docs/js/button-state.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | var pressedBtn = document.getElementById('button_state'); 3 | 4 | pressedBtn.addEventListener('click', function (e) { 5 | pressedBtn.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 6 | }); 7 | 8 | var pressedBtn2 = document.getElementById('button_like'); 9 | 10 | pressedBtn2.addEventListener('click', function (e) { 11 | pressedBtn2.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 12 | }); 13 | 14 | var pressedBtn3 = document.getElementById('button_all'); 15 | 16 | pressedBtn3.addEventListener('click', function (e) { 17 | pressedBtn3.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 18 | }); 19 | 20 | var pressedBtn4 = document.getElementById('button_search'); 21 | 22 | pressedBtn4.addEventListener('click', function (e) { 23 | pressedBtn4.setAttribute('aria-pressed', e.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'); 24 | }); 25 | })(document, jQuery); 26 | -------------------------------------------------------------------------------- /docs/js/button.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | function handleBtnClick(event) { 3 | toggleButton(event.target); 4 | } 5 | 6 | function handleBtnKeyPress(event) { 7 | // Check to see if space or enter were pressed 8 | if (event.keyCode === 32 || event.keyCode === 13) { 9 | // Prevent the default action to stop scrolling when space is pressed 10 | event.preventDefault(); 11 | toggleButton(event.target); 12 | } 13 | } 14 | 15 | function toggleButton(element) { 16 | // Check to see if the button is pressed 17 | var pressed = (element.getAttribute("aria-pressed") === "true"); 18 | // Change aria-pressed to the opposite state 19 | element.setAttribute("aria-pressed", !pressed); 20 | } 21 | })(document, jQuery); 22 | -------------------------------------------------------------------------------- /docs/js/copy-button.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | var clip = new Clipboard('.copy-button'); 3 | 4 | clip.on('success', function(e) { 5 | $('.copied').show(); 6 | $('.copied').fadeOut(2000); 7 | }); 8 | })(document, jQuery); 9 | -------------------------------------------------------------------------------- /docs/js/jump-link-fix.js: -------------------------------------------------------------------------------- 1 | var jumpLinkFix = function () { 2 | var el = document.getElementById( location.hash.substring( 1 ) ); 3 | 4 | if ( el ) { 5 | if ( !/^(?:a|select|input|button|textarea)$/i.test( el.tagName ) ) { 6 | el.tabIndex = -1; 7 | } 8 | el.focus(); 9 | } // if 10 | }; 11 | -------------------------------------------------------------------------------- /docs/js/mobile-menu-icon.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | // Set button to click. Toggle button example 1. 3 | var button = document.getElementById( 'menu-toggle-ex1' ); 4 | 5 | // Click the button. 6 | button.onclick = function() { 7 | 8 | // Toggle class "opened". Set also aria-expanded to true or false. 9 | if ( -1 !== button.className.indexOf( 'opened' ) ) { 10 | button.className = button.className.replace( ' opened', '' ); 11 | button.setAttribute( 'aria-expanded', 'false' ); 12 | } else { 13 | button.className += ' opened'; 14 | button.setAttribute( 'aria-expanded', 'true' ); 15 | } 16 | 17 | }; 18 | 19 | // Set button to click. Toggle button example 2. 20 | var button2 = document.getElementById( 'menu-toggle-ex2' ); 21 | 22 | // Click the button. 23 | button2.onclick = function() { 24 | 25 | // Toggle class "opened". Set also aria-expanded to true or false. 26 | if ( -1 !== button2.className.indexOf( 'opened' ) ) { 27 | button2.className = button2.className.replace( ' opened', '' ); 28 | button2.setAttribute( 'aria-expanded', 'false' ); 29 | } else { 30 | button2.className += ' opened'; 31 | button2.setAttribute( 'aria-expanded', 'true' ); 32 | } 33 | 34 | }; 35 | 36 | })(document, jQuery); 37 | -------------------------------------------------------------------------------- /docs/js/mobile-menu.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | $('#toggle-menu').click(function(e) { 3 | e.preventDefault(); 4 | $('ul').toggleClass('active'); 5 | }); 6 | 7 | 8 | // Set button to click. Mobile menu button. 9 | var buttonmm = document.getElementById( 'toggle-menu' ); 10 | 11 | // Click the button. 12 | buttonmm.onclick = function() { 13 | 14 | // Toggle class "opened". Set also aria-expanded to true or false. 15 | if ( -1 !== buttonmm.className.indexOf( 'opened' ) ) { 16 | buttonmm.className = buttonmm.className.replace( ' opened', '' ); 17 | buttonmm.setAttribute( 'aria-expanded', 'false' ); 18 | } else { 19 | buttonmm.className += ' opened'; 20 | buttonmm.setAttribute( 'aria-expanded', 'true' ); 21 | } 22 | 23 | }; 24 | })(document, jQuery); -------------------------------------------------------------------------------- /docs/js/sidebar-slide.js: -------------------------------------------------------------------------------- 1 | !((document, $) => { 2 | 'use strict'; 3 | 4 | // the nav is open by default, so set 5 | // aria-expanded to be true by default 6 | // also add aria-controls to provide context 7 | // (to ATs that actually respect aria-controls) 8 | // as to what element this button is toggling 9 | $('.nav-btn').attr({ 10 | 'aria-expanded': 'true', 11 | 'aria-controls': 'kss-nav-list' 12 | }); 13 | 14 | $('.nav-btn').on('click', function() { 15 | $('.kss-sidebar').toggleClass('kss-sidebar-collapsed'); 16 | // when the button is triggered, toggle between expanded 17 | // state being true/false 18 | if ( $(this).attr('aria-expanded') === 'true' ) { 19 | $(this).attr('aria-expanded', 'false'); 20 | } 21 | else { 22 | $(this).attr('aria-expanded', 'true'); 23 | } 24 | }); 25 | })(document, jQuery); 26 | -------------------------------------------------------------------------------- /docs/js/strings.js: -------------------------------------------------------------------------------- 1 | var GLOBAL_STRINGS = { 2 | "PLAY": "Play", 3 | "PAUSE": "Pause", 4 | "TOGGLE_FULL_SCREEN": "Toggle full screen", 5 | "MUTE": "Mute", 6 | "RESTART": "Restart", 7 | "CAPTIONS": "Closed captions", 8 | "REWIND": "Rewind", 9 | "FORWARD": "Forward" 10 | } -------------------------------------------------------------------------------- /docs/js/tables.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 'use strict'; 3 | 4 | var i, 5 | element; 6 | 7 | //create headers for the mobile view 8 | (function () { 9 | var headers = document.getElementById("responsive-tableID").querySelectorAll("th"), 10 | index = 1, 11 | columns = document.getElementById("responsive-tableID").querySelectorAll("td"), 12 | headerName, 13 | responsiveHeader; 14 | 15 | if (columns.length > 0) { 16 | for (i = 0; i < columns.length; i += 1) { 17 | if (index > headers.length) { 18 | index = 1; 19 | } 20 | //mobile headers are actually td 21 | element = columns[i]; 22 | headerName = document.getElementById("responsive-tableID").querySelector('th:nth-of-type(' + index + ')').textContent; 23 | responsiveHeader = document.createElement("td"); 24 | 25 | responsiveHeader.className = "responsive-header"; 26 | responsiveHeader.innerHTML = headerName; 27 | element.parentNode.insertBefore(responsiveHeader, element); 28 | 29 | index+=1; 30 | } 31 | } 32 | }()); 33 | 34 | var tableMinWidth, 35 | hasBeenSet = false; 36 | 37 | //addds mobile class for table when table is larger than screen 38 | function sytleTable () { 39 | var tableWidth = document.querySelector('.responsive-table').offsetWidth, 40 | windowWidth = window.innerWidth, 41 | responsiveTables = document.getElementsByClassName('responsive-table'); 42 | 43 | if (tableWidth >= windowWidth) { 44 | if (!hasBeenSet) { 45 | tableMinWidth = tableWidth; 46 | hasBeenSet = true; 47 | } 48 | 49 | for (i = 0; i < responsiveTables.length; i += 1) { 50 | element = responsiveTables[i]; 51 | element.classList.add("mobile"); 52 | } 53 | 54 | } else if (tableWidth >= tableMinWidth) { 55 | 56 | for (i = 0; i < responsiveTables.length ; i += 1) { 57 | element = responsiveTables[i]; 58 | element.classList.remove("mobile"); 59 | } 60 | 61 | } 62 | } 63 | 64 | window.onresize = function () { 65 | sytleTable(); 66 | }; 67 | 68 | sytleTable(); 69 | }; //window.onload -------------------------------------------------------------------------------- /docs/style-guide/kss-assets/kss.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var KssStateGenerator; 3 | 4 | KssStateGenerator = (function() { 5 | 6 | function KssStateGenerator() { 7 | var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; 8 | pseudos = /(\:hover|\:disabled|\:active|\:visited|\:focus)/g; 9 | // try { 10 | _ref = document.styleSheets; 11 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 12 | stylesheet = _ref[_i]; 13 | idxs = []; 14 | _ref2 = stylesheet.cssRules || []; 15 | for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { 16 | rule = _ref2[idx]; 17 | if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { 18 | replaceRule = function(matched, stuff) { 19 | return ".pseudo-class-" + matched.replace(':', ''); 20 | }; 21 | this.insertRule(rule.cssText.replace(pseudos, replaceRule)); 22 | } 23 | } 24 | } 25 | // } catch (_error) {console.log(_error.message);} 26 | } 27 | 28 | KssStateGenerator.prototype.insertRule = function(rule) { 29 | var headEl, styleEl; 30 | headEl = document.getElementsByTagName('head')[0]; 31 | styleEl = document.createElement('style'); 32 | styleEl.type = 'text/css'; 33 | if (styleEl.styleSheet) { 34 | styleEl.styleSheet.cssText = rule; 35 | } else { 36 | styleEl.appendChild(document.createTextNode(rule)); 37 | } 38 | return headEl.appendChild(styleEl); 39 | }; 40 | 41 | return KssStateGenerator; 42 | 43 | })(); 44 | 45 | new KssStateGenerator; 46 | 47 | }).call(this); 48 | -------------------------------------------------------------------------------- /docs/style-guide/kss-assets/local.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cehfisher/a11y-style-guide/ffabbd19127bd51e0396b650516090c76647ede3/docs/style-guide/kss-assets/local.css -------------------------------------------------------------------------------- /gulp-tasks/clean.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include Our Plugins 6 | //======================================================= 7 | var del = require('del'); 8 | 9 | // Export our tasks. 10 | module.exports = { 11 | 12 | // Clean style guide files. 13 | styleguide: function() { 14 | // You can use multiple globbing patterns as you would with `gulp.src` 15 | return del([ 16 | './dist/style-guide/*' 17 | ], {force: true}); 18 | }, 19 | 20 | // Clean CSS files. 21 | css: function() { 22 | return del([ 23 | './dist/css/*' 24 | ], {force: true}); 25 | }, 26 | 27 | // Clean JS files. 28 | js: function() { 29 | return del([ 30 | './dist/js/*' 31 | ], {force: true}); 32 | }, 33 | docs: function() { 34 | return del([ 35 | './docs/style-guide/', 36 | './docs/css/', 37 | './docs/assets/', 38 | './docs/all/', 39 | './docs/js/' 40 | ], {force: true}); 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /gulp-tasks/compile.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include gulp 6 | //======================================================= 7 | var gulp = require('gulp'); 8 | 9 | //======================================================= 10 | // Include Our Plugins 11 | //======================================================= 12 | var sass = require('gulp-sass'); 13 | var prefix = require('gulp-autoprefixer'); 14 | var sourcemaps = require('gulp-sourcemaps'); 15 | var sync = require('browser-sync'); 16 | var babel = require('gulp-babel'); 17 | var rename = require('gulp-rename'); 18 | 19 | // Small error handler helper function. 20 | function handleError(err) { 21 | console.log(err.toString()); 22 | this.emit('end'); 23 | } 24 | 25 | // Export our tasks. 26 | module.exports = { 27 | 28 | // Compile Sass. 29 | sass: function() { 30 | return gulp.src('./src/{global,layout,components}/**/*.scss') 31 | .pipe( 32 | sass({ outputStyle: 'nested' }) 33 | .on('error', handleError) 34 | ) 35 | .pipe(prefix({ 36 | cascade: false 37 | })) 38 | .pipe(rename(function (path) { 39 | path.dirname = ''; 40 | return path; 41 | })) 42 | .pipe(gulp.dest('./dist/css')) 43 | .pipe(sync.stream({match: '**/*.css'})); 44 | }, 45 | 46 | // Compile JavaScript. 47 | js: function() { 48 | return gulp.src([ 49 | './src/{global,layout,components}/**/*.es6.js' 50 | ], { base: './' }) 51 | .pipe(sourcemaps.init()) 52 | .pipe( 53 | babel() 54 | .on('error', handleError) 55 | ) 56 | .pipe(rename(function (path) { 57 | // Currently not using ES6 modules so for now 58 | // es6 files are compiled into individual JS files. 59 | // Eventually this can use ES6 Modules and compile 60 | // all files within a component directory into a single 61 | // foo.bundle.js file. In that case the bundle name should 62 | // reflect the components directory name. 63 | path.dirname = ''; 64 | path.basename = path.basename.replace(/\.es6/, ''); 65 | return path; 66 | })) 67 | .pipe(sourcemaps.write('./')) 68 | .pipe(gulp.dest('./dist/js')); 69 | } 70 | }; 71 | -------------------------------------------------------------------------------- /gulp-tasks/compress.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include gulp 6 | //======================================================= 7 | var gulp = require('gulp'); 8 | 9 | //======================================================= 10 | // Include Our Plugins 11 | //======================================================= 12 | var rename = require('gulp-rename'); 13 | var imagemin = require('gulp-imagemin'); 14 | 15 | // Export our tasks. 16 | module.exports = { 17 | 18 | // Compress svg/png/jpg files. 19 | assets: function() { 20 | return gulp.src([ 21 | './src/{global,components}/**/*{.png,.jpg,.svg}' 22 | ]) 23 | .pipe(imagemin({ 24 | progressive: true, 25 | svgoPlugins: [{ 26 | removeViewBox: false 27 | }] 28 | })) 29 | .pipe(rename(function (path) { 30 | path.dirname = ''; 31 | return path; 32 | })) 33 | .pipe(gulp.dest('./dist/assets')); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /gulp-tasks/concat.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include gulp 6 | //======================================================= 7 | var gulp = require('gulp'); 8 | 9 | //======================================================= 10 | // Include Our Plugins 11 | //======================================================= 12 | var concat = require('gulp-concat'); 13 | var order = require('gulp-order'); 14 | var sync = require('browser-sync'); 15 | 16 | // Export our tasks. 17 | module.exports = { 18 | 19 | // Concat all CSS into a master bundle. 20 | css: function() { 21 | return gulp.src([ 22 | './dist/css/*.css' 23 | ]) 24 | // Reorder the files so global is first. 25 | // If you need to get fancier with the order here's an example: 26 | // .pipe(order([ 27 | // 'dist/css/global.css', 28 | // 'src/components/**/*.css', 29 | // 'dist/css/btn.css', 30 | // 'dist/css/form-item.css', 31 | // 'dist/css/form-float-label.css', 32 | // 'dist/css/*.css' 33 | // ], { base: './' })) 34 | .pipe(order([ 35 | 'dist/css/global.css', 36 | 'dist/css/*.css' 37 | ], { base: './' })) 38 | .pipe(concat('all.css')) 39 | .pipe(gulp.dest('./dist/all')) 40 | .pipe(sync.stream()); 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /gulp-tasks/lint.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include gulp 6 | //======================================================= 7 | var gulp = require('gulp'); 8 | 9 | //======================================================= 10 | // Include Our Plugins 11 | //======================================================= 12 | var sassLint = require('gulp-sass-lint'); 13 | var eslint = require('gulp-eslint'); 14 | 15 | // Export our tasks. 16 | module.exports = { 17 | 18 | // Lint Sass based on .sass-lint.yml config. 19 | sass: function() { 20 | return gulp.src([ 21 | './src/{global,components}/**/*.scss', 22 | '!./src/global/utils/*' 23 | ]) 24 | .pipe(sassLint()) 25 | .pipe(sassLint.format()); 26 | }, 27 | 28 | // Lint JavaScript based on .eslintrc config. 29 | js: function() { 30 | return gulp.src([ 31 | './src/{global,components}/**/*.js', 32 | '!./src/components/**/vendors/*' 33 | ]) 34 | .pipe(eslint()) 35 | .pipe(eslint.format()); 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /gulp-tasks/move.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | // If some JS components aren't es6 we want to simply move them 5 | // into the dist folder. This allows us to clean the dist/js 6 | // folder on build. 7 | 8 | //======================================================= 9 | // Include gulp 10 | //======================================================= 11 | var gulp = require('gulp'); 12 | 13 | //======================================================= 14 | // Include Our Plugins 15 | //======================================================= 16 | var rename = require('gulp-rename'); 17 | 18 | // Export our tasks. 19 | module.exports = { 20 | 21 | // Moves JavaScript. 22 | js: function() { 23 | return gulp.src([ 24 | './src/{global,components}/**/*.js', 25 | '!./src/{global,components}/**/*.es6.js' 26 | ], { base: './' }) 27 | .pipe(rename(function (path) { 28 | path.dirname = ''; 29 | return path; 30 | })) 31 | .pipe(gulp.dest('./dist/js')); 32 | }, 33 | 34 | docs: function() { 35 | return gulp.src([ 36 | '*/**' 37 | ], { base: './dist'}) 38 | .pipe(gulp.dest('./docs')); 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /gulp-tasks/styleguide.js: -------------------------------------------------------------------------------- 1 | /*eslint strict: ["error", "global"]*/ 2 | 'use strict'; 3 | 4 | //======================================================= 5 | // Include kss 6 | //======================================================= 7 | var kss = require('kss'); 8 | 9 | //======================================================= 10 | // Include Our Plugins 11 | //======================================================= 12 | var path = require('path'); 13 | 14 | // Export our tasks. 15 | module.exports = { 16 | 17 | // Generate the style guide using the top level 18 | // directory name passed in as a parameter. 19 | generate: function(dirname) { 20 | 21 | return kss({ 22 | source: [ 23 | dirname + '/src/global', 24 | dirname + '/src/components' 25 | ], 26 | destination: dirname + '/dist/style-guide', 27 | builder: dirname + '/src/style-guide/builder', 28 | namespace: 'a11y_style_guide:' + dirname + '/src/components/', 29 | // The css and js paths are URLs, like '/misc/jquery.js'. 30 | // The following paths are relative to the generated style guide. 31 | // The all.css file is for the style guide ONLY so you don't have to 32 | // keep adding the file here everytime you add a new component. 33 | css: [ 34 | path.relative( 35 | dirname + '/style-guide/', 36 | dirname + '/all/all.css' 37 | ) 38 | ], 39 | js: [ 40 | ], 41 | homepage: 'style-guide.md', 42 | title: 'Style Guide' 43 | }); 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11y_style_guide", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/cehfisher/a11y-style-guide.git" 8 | }, 9 | "scripts": { 10 | "build": "gulp", 11 | "compile": "gulp compile", 12 | "watch": "gulp watch", 13 | "styleguide": "gulp styleguide", 14 | "compress": "gulp compress", 15 | "lint": "gulp lint", 16 | "clean": "gulp clean", 17 | "gulp": "gulp" 18 | }, 19 | "babel": { 20 | "presets": [ 21 | [ 22 | "env", 23 | { 24 | "targets": { 25 | "browsers": [ 26 | "IE >= 9", 27 | "last 3 versions" 28 | ] 29 | } 30 | } 31 | ] 32 | ], 33 | "plugins": [ 34 | "transform-remove-strict-mode" 35 | ] 36 | }, 37 | "browserslist": [ 38 | "IE >= 9", 39 | "last 3 versions" 40 | ], 41 | "devDependencies": { 42 | "babel-plugin-transform-remove-strict-mode": "0.0.2", 43 | "babel-preset-env": "^1.6.0", 44 | "breakpoint-sass": "^2.7.1", 45 | "browser-sync": "^2.27.5", 46 | "del": "^3.0.0", 47 | "gulp": "^4.0.2", 48 | "gulp-autoprefixer": "^4.0.0", 49 | "gulp-babel": "^6.1.2", 50 | "gulp-concat": "^2.6.1", 51 | "gulp-eslint": "^4.0.0", 52 | "gulp-imagemin": "^6.2.0", 53 | "gulp-order": "^1.2.0", 54 | "gulp-rename": "^1.2.2", 55 | "gulp-sass": "^3.2.1", 56 | "gulp-sass-lint": "^1.3.2", 57 | "gulp-sourcemaps": "^2.6.5", 58 | "kss": "^3.0.1", 59 | "run-sequence": "^2.0.0" 60 | }, 61 | "dependencies": { 62 | "lodash.template": "^4.5.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/accordion/accordion.twig: -------------------------------------------------------------------------------- 1 |
2 | 31 |
32 | -------------------------------------------------------------------------------- /src/components/audio/audio.twig: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 |
7 |
8 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // Breadcrumbs 2 | // 3 | // - Place the breadcrumb in a `