generator-white-label 3.0.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (334) hide show
  1. package/README.md +140 -81
  2. package/app/404.hbs +20 -0
  3. package/app/README.md +19 -0
  4. package/app/assets/data/view/toolkit/colors.json +17 -0
  5. package/app/assets/data/view/toolkit/components.json +39 -0
  6. package/app/assets/data/view/toolkit/elements.json +119 -0
  7. package/app/assets/data/view/toolkit/grids.json +17 -0
  8. package/app/assets/data/view/toolkit/icons.json +17 -0
  9. package/app/assets/data/view/toolkit/index.json +17 -0
  10. package/app/assets/data/view/toolkit/type.json +17 -0
  11. package/app/assets/font/opensans/stylesheet.css +20 -60
  12. package/app/assets/image/demo/fallback.avif +0 -0
  13. package/app/assets/image/demo/fallback.jpg +0 -0
  14. package/app/assets/image/demo/fallback.webp +0 -0
  15. package/app/assets/image/demo/large.avif +0 -0
  16. package/app/assets/image/demo/large.webp +0 -0
  17. package/app/assets/image/demo/small.avif +0 -0
  18. package/app/assets/image/demo/small.webp +0 -0
  19. package/app/assets/markup/element/a.hbs +29 -0
  20. package/app/assets/markup/element/button.hbs +30 -0
  21. package/app/assets/markup/element/div.hbs +11 -0
  22. package/app/assets/markup/element/head.hbs +78 -0
  23. package/app/assets/markup/element/iframe.hbs +20 -0
  24. package/app/assets/markup/element/img.hbs +30 -0
  25. package/app/assets/markup/element/input.hbs +43 -0
  26. package/app/assets/markup/element/label.hbs +14 -0
  27. package/app/assets/markup/element/legend.hbs +5 -0
  28. package/app/assets/markup/element/meta.hbs +11 -0
  29. package/app/assets/markup/element/nav.hbs +13 -0
  30. package/app/assets/markup/element/p.hbs +8 -0
  31. package/app/assets/markup/element/picture.hbs +58 -0
  32. package/app/assets/markup/element/script.hbs +3 -0
  33. package/app/assets/markup/element/select.hbs +35 -0
  34. package/app/assets/markup/element/span.hbs +8 -0
  35. package/app/assets/markup/element/svg.hbs +11 -0
  36. package/app/assets/markup/element/table.hbs +50 -0
  37. package/app/assets/markup/element/textarea.hbs +24 -0
  38. package/app/assets/markup/element/ul.hbs +13 -0
  39. package/app/assets/markup/modal/modal-example-1.handlebars +8 -0
  40. package/app/assets/markup/toolkit/accessibility-skip-to-element-1.handlebars +1 -0
  41. package/app/assets/markup/toolkit/accessibility-speaker-1.handlebars +1 -0
  42. package/app/assets/markup/toolkit/anchor-1.handlebars +1 -0
  43. package/app/assets/markup/toolkit/button-1.handlebars +1 -0
  44. package/app/assets/markup/toolkit/footer-1.handlebars +3 -0
  45. package/app/assets/markup/toolkit/header-1.handlebars +1 -0
  46. package/app/assets/markup/toolkit/heading-1.handlebars +1 -0
  47. package/app/assets/markup/toolkit/heading-2.handlebars +1 -0
  48. package/app/assets/markup/toolkit/heading-3.handlebars +1 -0
  49. package/app/assets/markup/toolkit/heading-4.handlebars +1 -0
  50. package/app/assets/markup/toolkit/image-1.handlebars +1 -0
  51. package/app/assets/markup/toolkit/input-checkbox-1.handlebars +1 -0
  52. package/app/assets/markup/toolkit/input-error-1.handlebars +8 -0
  53. package/app/assets/markup/toolkit/input-radio-1.handlebars +1 -0
  54. package/app/assets/markup/toolkit/input-text-1.handlebars +1 -0
  55. package/app/assets/markup/toolkit/label-1.handlebars +1 -0
  56. package/app/assets/markup/toolkit/legend-1.handlebars +1 -0
  57. package/app/assets/markup/toolkit/list-1.handlebars +1 -0
  58. package/app/assets/markup/toolkit/modal-1.handlebars +4 -0
  59. package/app/assets/markup/toolkit/nav-1.handlebars +1 -0
  60. package/app/assets/markup/toolkit/picture-1.handlebars +1 -0
  61. package/app/assets/markup/toolkit/select-1.handlebars +1 -0
  62. package/app/assets/markup/toolkit/table-1.handlebars +1 -0
  63. package/app/assets/markup/toolkit/text-1.handlebars +1 -0
  64. package/app/assets/markup/toolkit/textarea-1.handlebars +1 -0
  65. package/app/assets/markup/toolkit/youtube-player-1.handlebars +1 -0
  66. package/app/assets/script/api/facebook.ts +41 -0
  67. package/app/assets/script/api/youtube.ts +22 -0
  68. package/app/assets/script/index.ts +2 -0
  69. package/app/assets/script/mediator/global.ts +4 -0
  70. package/app/assets/script/model/singletons/countries.ts +5 -0
  71. package/app/assets/script/model/singletons/global.ts +5 -0
  72. package/app/assets/script/model/singletons/states.ts +5 -0
  73. package/app/assets/script/model/user.ts +4 -0
  74. package/app/assets/script/toolkit.ts +11 -0
  75. package/app/assets/script/types.d.ts +16 -0
  76. package/app/assets/script/utility/ajax.ts +15 -0
  77. package/app/assets/script/utility/form.ts +119 -0
  78. package/app/assets/script/utility/{regex.js → regex.ts} +15 -6
  79. package/app/assets/script/utility/share.ts +77 -0
  80. package/app/assets/script/utility/string.ts +148 -0
  81. package/app/assets/script/view/default.tsx +14 -0
  82. package/app/assets/script/view/toolkit/youtube-player-1.ts +31 -0
  83. package/app/assets/style/base/_toolkit.scss +31 -15
  84. package/app/assets/style/base/components/_modal-1.scss +80 -0
  85. package/app/assets/style/base/components/_sticky-1.scss +19 -0
  86. package/app/assets/style/base/components/_tabpanel-1.scss +115 -0
  87. package/app/assets/style/base/components/_tabpanel-2.scss +64 -0
  88. package/app/assets/style/base/components/_tabpanel-base-1.scss +13 -0
  89. package/app/assets/style/base/components/_youtube-player-1.scss +16 -0
  90. package/app/assets/style/base/elements/_anchors.scss +12 -0
  91. package/app/assets/style/base/elements/_buttons.scss +15 -0
  92. package/app/assets/style/base/elements/_fieldsets.scss +9 -0
  93. package/app/assets/style/base/elements/_images.scss +6 -2
  94. package/app/assets/style/base/elements/_inputs.scss +70 -0
  95. package/app/assets/style/base/elements/_labels.scss +8 -0
  96. package/app/assets/style/base/elements/_landmarks.scss +3 -0
  97. package/app/assets/style/base/elements/_legends.scss +11 -0
  98. package/app/assets/style/base/elements/_lists.scss +8 -1
  99. package/app/assets/style/base/elements/_tables.scss +32 -1
  100. package/app/assets/style/base/layouts/_staggered-1.scss +29 -0
  101. package/app/assets/style/base/type/_fonts.scss +39 -1
  102. package/app/assets/style/base/type/_headings.scss +29 -0
  103. package/app/assets/style/base/type/_text.scss +2 -0
  104. package/app/assets/style/base/utilities/_accessibility.scss +5 -2
  105. package/app/assets/style/base/utilities/_functions.scss +62 -9
  106. package/app/assets/style/global.scss +108 -10
  107. package/app/assets/style/print.scss +2 -3
  108. package/app/assets/style/toolkit.scss +387 -0
  109. package/app/index.hbs +21 -0
  110. package/app/package.json +1 -0
  111. package/app/toolkit/colors.hbs +102 -0
  112. package/app/toolkit/components.hbs +261 -0
  113. package/app/toolkit/elements.hbs +497 -0
  114. package/app/toolkit/grids.hbs +413 -0
  115. package/app/toolkit/icons.hbs +87 -0
  116. package/app/toolkit/index.hbs +144 -0
  117. package/app/toolkit/type.hbs +120 -0
  118. package/dist/app/assets/data/coutries.json +992 -0
  119. package/dist/app/assets/data/states.json +204 -0
  120. package/dist/app/assets/script/api/facebook.d.ts +8 -0
  121. package/dist/app/assets/script/api/facebook.js +42 -0
  122. package/dist/app/assets/script/api/facebook.js.map +1 -0
  123. package/dist/app/assets/script/api/youtube.d.ts +8 -0
  124. package/dist/app/assets/script/api/youtube.js +22 -0
  125. package/dist/app/assets/script/api/youtube.js.map +1 -0
  126. package/dist/app/assets/script/index.d.ts +2 -0
  127. package/dist/app/assets/script/index.js +2 -0
  128. package/dist/app/assets/script/index.js.map +1 -0
  129. package/dist/app/assets/script/mediator/global.d.ts +4 -0
  130. package/dist/app/assets/script/mediator/global.js +4 -0
  131. package/dist/app/assets/script/mediator/global.js.map +1 -0
  132. package/dist/app/assets/script/model/singletons/countries.d.ts +20 -0
  133. package/dist/app/assets/script/model/singletons/countries.js +5 -0
  134. package/dist/app/assets/script/model/singletons/countries.js.map +1 -0
  135. package/dist/app/assets/script/model/singletons/global.d.ts +20 -0
  136. package/dist/app/assets/script/model/singletons/global.js +5 -0
  137. package/dist/app/assets/script/model/singletons/global.js.map +1 -0
  138. package/dist/app/assets/script/model/singletons/states.d.ts +20 -0
  139. package/dist/app/assets/script/model/singletons/states.js +5 -0
  140. package/dist/app/assets/script/model/singletons/states.js.map +1 -0
  141. package/dist/app/assets/script/model/user.d.ts +4 -0
  142. package/dist/app/assets/script/model/user.js +6 -0
  143. package/dist/app/assets/script/model/user.js.map +1 -0
  144. package/dist/app/assets/script/toolkit.d.ts +1 -0
  145. package/dist/app/assets/script/toolkit.js +7 -0
  146. package/dist/app/assets/script/toolkit.js.map +1 -0
  147. package/dist/app/assets/script/utility/ajax.d.ts +8 -0
  148. package/dist/app/assets/script/utility/ajax.js +17 -0
  149. package/dist/app/assets/script/utility/ajax.js.map +1 -0
  150. package/dist/app/assets/script/utility/form.d.ts +64 -0
  151. package/dist/app/assets/script/utility/form.js +111 -0
  152. package/dist/app/assets/script/utility/form.js.map +1 -0
  153. package/dist/app/assets/script/utility/regex.d.ts +14 -0
  154. package/dist/app/assets/script/utility/regex.js +27 -0
  155. package/dist/app/assets/script/utility/regex.js.map +1 -0
  156. package/dist/app/assets/script/utility/share.d.ts +68 -0
  157. package/dist/app/assets/script/utility/share.js +81 -0
  158. package/dist/app/assets/script/utility/share.js.map +1 -0
  159. package/dist/app/assets/script/utility/string.d.ts +64 -0
  160. package/dist/app/assets/script/utility/string.js +135 -0
  161. package/dist/app/assets/script/utility/string.js.map +1 -0
  162. package/dist/app/assets/script/view/default.d.ts +11 -0
  163. package/dist/app/assets/script/view/default.js +15 -0
  164. package/dist/app/assets/script/view/default.js.map +1 -0
  165. package/dist/app/assets/script/view/toolkit/youtube-player-1.d.ts +23 -0
  166. package/dist/app/assets/script/view/toolkit/youtube-player-1.js +32 -0
  167. package/dist/app/assets/script/view/toolkit/youtube-player-1.js.map +1 -0
  168. package/dist/generators/app/index.d.ts +18 -0
  169. package/dist/generators/app/index.js +59 -0
  170. package/dist/generators/app/index.js.map +1 -0
  171. package/dist/scripts/build.d.ts +22 -0
  172. package/dist/scripts/build.js +158 -0
  173. package/dist/scripts/build.js.map +1 -0
  174. package/generators/app/index.js +2 -43
  175. package/generators/app/index.ts +61 -0
  176. package/package.json +78 -109
  177. package/scripts/build.ts +175 -0
  178. package/tsconfig.site.json +26 -0
  179. package/.babelrc +0 -7
  180. package/.editorconfig +0 -13
  181. package/.eslintrc +0 -64
  182. package/.htmllintrc +0 -6
  183. package/.npmignore +0 -12
  184. package/.sass-lint.yml +0 -16
  185. package/.travis.yml +0 -18
  186. package/app/assets/font/opensans/generator_config.txt +0 -5
  187. package/app/assets/font/opensans/opensans-bold-webfont.eot +0 -0
  188. package/app/assets/font/opensans/opensans-bold-webfont.svg +0 -1824
  189. package/app/assets/font/opensans/opensans-bold-webfont.ttf +0 -0
  190. package/app/assets/font/opensans/opensans-bold-webfont.woff +0 -0
  191. package/app/assets/font/opensans/opensans-bolditalic-webfont.eot +0 -0
  192. package/app/assets/font/opensans/opensans-bolditalic-webfont.svg +0 -1824
  193. package/app/assets/font/opensans/opensans-bolditalic-webfont.ttf +0 -0
  194. package/app/assets/font/opensans/opensans-bolditalic-webfont.woff +0 -0
  195. package/app/assets/font/opensans/opensans-extrabold-webfont.eot +0 -0
  196. package/app/assets/font/opensans/opensans-extrabold-webfont.svg +0 -1824
  197. package/app/assets/font/opensans/opensans-extrabold-webfont.ttf +0 -0
  198. package/app/assets/font/opensans/opensans-extrabold-webfont.woff +0 -0
  199. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.eot +0 -0
  200. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.svg +0 -1824
  201. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.ttf +0 -0
  202. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.woff +0 -0
  203. package/app/assets/font/opensans/opensans-italic-webfont.eot +0 -0
  204. package/app/assets/font/opensans/opensans-italic-webfont.svg +0 -1824
  205. package/app/assets/font/opensans/opensans-italic-webfont.ttf +0 -0
  206. package/app/assets/font/opensans/opensans-italic-webfont.woff +0 -0
  207. package/app/assets/font/opensans/opensans-light-webfont.eot +0 -0
  208. package/app/assets/font/opensans/opensans-light-webfont.svg +0 -1824
  209. package/app/assets/font/opensans/opensans-light-webfont.ttf +0 -0
  210. package/app/assets/font/opensans/opensans-light-webfont.woff +0 -0
  211. package/app/assets/font/opensans/opensans-lightitalic-webfont.eot +0 -0
  212. package/app/assets/font/opensans/opensans-lightitalic-webfont.svg +0 -1824
  213. package/app/assets/font/opensans/opensans-lightitalic-webfont.ttf +0 -0
  214. package/app/assets/font/opensans/opensans-lightitalic-webfont.woff +0 -0
  215. package/app/assets/font/opensans/opensans-regular-webfont.eot +0 -0
  216. package/app/assets/font/opensans/opensans-regular-webfont.svg +0 -1824
  217. package/app/assets/font/opensans/opensans-regular-webfont.ttf +0 -0
  218. package/app/assets/font/opensans/opensans-regular-webfont.woff +0 -0
  219. package/app/assets/font/opensans/opensans-semibold-webfont.eot +0 -0
  220. package/app/assets/font/opensans/opensans-semibold-webfont.svg +0 -1824
  221. package/app/assets/font/opensans/opensans-semibold-webfont.ttf +0 -0
  222. package/app/assets/font/opensans/opensans-semibold-webfont.woff +0 -0
  223. package/app/assets/font/opensans/opensans-semibolditalic-webfont.eot +0 -0
  224. package/app/assets/font/opensans/opensans-semibolditalic-webfont.svg +0 -1824
  225. package/app/assets/font/opensans/opensans-semibolditalic-webfont.ttf +0 -0
  226. package/app/assets/font/opensans/opensans-semibolditalic-webfont.woff +0 -0
  227. package/app/assets/font/opensans/specimen_files/grid_12-825-55-15.css +0 -129
  228. package/app/assets/font/opensans/specimen_files/specimen_stylesheet.css +0 -396
  229. package/app/assets/script/index.js +0 -11
  230. package/app/assets/script/mediator/global.js +0 -5
  231. package/app/assets/script/model/singletons/countries.js +0 -6
  232. package/app/assets/script/model/singletons/global.js +0 -6
  233. package/app/assets/script/model/singletons/states.js +0 -6
  234. package/app/assets/script/model/user.js +0 -5
  235. package/app/assets/script/utility/form.js +0 -86
  236. package/app/assets/script/utility/share.js +0 -52
  237. package/app/assets/script/utility/string.js +0 -70
  238. package/app/assets/script/view/default.js +0 -11
  239. package/app/assets/style/base/vendor/_foundation.scss +0 -2
  240. package/app/assets/test/spec/shareSpec.js +0 -137
  241. package/app/index.html +0 -43
  242. package/app/report/istanbul/base.css +0 -213
  243. package/app/report/istanbul/index.html +0 -93
  244. package/app/report/istanbul/prettify.css +0 -1
  245. package/app/report/istanbul/prettify.js +0 -1
  246. package/app/report/istanbul/sort-arrow-sprite.png +0 -0
  247. package/app/report/istanbul/sorter.js +0 -158
  248. package/app/report/istanbul/utility/form.js.html +0 -524
  249. package/app/report/istanbul/utility/index.html +0 -132
  250. package/app/report/istanbul/utility/regex.js.html +0 -203
  251. package/app/report/istanbul/utility/share.js.html +0 -401
  252. package/app/report/istanbul/utility/string.js.html +0 -446
  253. package/app/report/jsdoc/DragEvent.html +0 -303
  254. package/app/report/jsdoc/Event.html +0 -773
  255. package/app/report/jsdoc/EventPropagators.html +0 -336
  256. package/app/report/jsdoc/FocusEvent.html +0 -303
  257. package/app/report/jsdoc/ForEachBookKeeping.html +0 -425
  258. package/app/report/jsdoc/KeyboardEvent.html +0 -303
  259. package/app/report/jsdoc/MapBookKeeping.html +0 -457
  260. package/app/report/jsdoc/MouseEvent.html +0 -303
  261. package/app/report/jsdoc/ReactClass.html +0 -330
  262. package/app/report/jsdoc/ReactClassInterface.html +0 -311
  263. package/app/report/jsdoc/ReactDOMComponent.html +0 -349
  264. package/app/report/jsdoc/ReactDOMTextComponent.html +0 -348
  265. package/app/report/jsdoc/ReactMountReady.html +0 -340
  266. package/app/report/jsdoc/ReactMultiChild.html +0 -330
  267. package/app/report/jsdoc/ReactOwner.html +0 -351
  268. package/app/report/jsdoc/ReactReconcileTransaction.html +0 -342
  269. package/app/report/jsdoc/ReactServerRenderingTransaction.html +0 -376
  270. package/app/report/jsdoc/ReactServerUpdateQueue.html +0 -382
  271. package/app/report/jsdoc/TouchEvent.html +0 -303
  272. package/app/report/jsdoc/Transaction.html +0 -459
  273. package/app/report/jsdoc/UIEvent.html +0 -303
  274. package/app/report/jsdoc/WheelEvent.html +0 -303
  275. package/app/report/jsdoc/classes.list.html +0 -339
  276. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.eot +0 -0
  277. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.svg +0 -288
  278. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.ttf +0 -0
  279. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff +0 -0
  280. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff2 +0 -0
  281. package/app/report/jsdoc/global.html +0 -1653
  282. package/app/report/jsdoc/img/glyphicons-halflings-white.png +0 -0
  283. package/app/report/jsdoc/img/glyphicons-halflings.png +0 -0
  284. package/app/report/jsdoc/index.html +0 -236
  285. package/app/report/jsdoc/interfaces.list.html +0 -339
  286. package/app/report/jsdoc/quicksearch.html +0 -31
  287. package/app/report/jsdoc/scripts/docstrap.lib.js +0 -11
  288. package/app/report/jsdoc/scripts/fulltext-search-ui.js +0 -89
  289. package/app/report/jsdoc/scripts/fulltext-search.js +0 -36
  290. package/app/report/jsdoc/scripts/lunr.min.js +0 -6
  291. package/app/report/jsdoc/scripts/prettify/Apache-License-2.0.txt +0 -202
  292. package/app/report/jsdoc/scripts/prettify/jquery.min.js +0 -6
  293. package/app/report/jsdoc/scripts/prettify/lang-css.js +0 -21
  294. package/app/report/jsdoc/scripts/prettify/prettify.js +0 -496
  295. package/app/report/jsdoc/scripts/sunlight.js +0 -1157
  296. package/app/report/jsdoc/scripts/toc.js +0 -203
  297. package/app/report/jsdoc/styles/darkstrap.css +0 -960
  298. package/app/report/jsdoc/styles/prettify-tomorrow.css +0 -132
  299. package/app/report/jsdoc/styles/site.cerulean.css +0 -7008
  300. package/app/report/jsdoc/styles/site.cosmo.css +0 -7061
  301. package/app/report/jsdoc/styles/site.cyborg.css +0 -7048
  302. package/app/report/jsdoc/styles/site.darkly.css +0 -7171
  303. package/app/report/jsdoc/styles/site.darkstrap.css +0 -5638
  304. package/app/report/jsdoc/styles/site.dibs-bootstrap.css +0 -5899
  305. package/app/report/jsdoc/styles/site.flatly.css +0 -7147
  306. package/app/report/jsdoc/styles/site.journal.css +0 -6973
  307. package/app/report/jsdoc/styles/site.lumen.css +0 -7298
  308. package/app/report/jsdoc/styles/site.paper.css +0 -7623
  309. package/app/report/jsdoc/styles/site.readable.css +0 -6997
  310. package/app/report/jsdoc/styles/site.sandstone.css +0 -7035
  311. package/app/report/jsdoc/styles/site.simplex.css +0 -7023
  312. package/app/report/jsdoc/styles/site.slate.css +0 -7343
  313. package/app/report/jsdoc/styles/site.spacelab.css +0 -7055
  314. package/app/report/jsdoc/styles/site.superhero.css +0 -7131
  315. package/app/report/jsdoc/styles/site.united.css +0 -6895
  316. package/app/report/jsdoc/styles/site.yeti.css +0 -7195
  317. package/app/report/jsdoc/styles/sunlight.dark.css +0 -345
  318. package/app/report/jsdoc/styles/sunlight.default.css +0 -344
  319. package/gulp/config.js +0 -207
  320. package/gulp/tasks/accessibility.js +0 -34
  321. package/gulp/tasks/build.js +0 -18
  322. package/gulp/tasks/clean.js +0 -18
  323. package/gulp/tasks/data.js +0 -22
  324. package/gulp/tasks/default.js +0 -9
  325. package/gulp/tasks/deploy.js +0 -222
  326. package/gulp/tasks/documentation.js +0 -28
  327. package/gulp/tasks/markup.js +0 -26
  328. package/gulp/tasks/script.js +0 -92
  329. package/gulp/tasks/style.js +0 -42
  330. package/gulp/tasks/unit.js +0 -38
  331. package/gulp/tasks/watch.js +0 -77
  332. package/gulpfile.js +0 -8
  333. package/jsdoc.json +0 -23
  334. package/karma.conf.js +0 -58
package/app/toolkit/elements.hbs ADDED
@@ -0,0 +1,497 @@
1
+ <!DOCTYPE html>
2
+ <html id="toolkit-elements" lang="en-US" dir="ltr">
3
+ {{> element/head secondaryCSS='toolkit'}}
4
+ <body itemscope itemtype="http://schema.org/WebPage">
5
+
6
+ <div id="wrapper">
7
+
8
+ {{>toolkit/accessibility-skip-to-element-1 id='skip-to-content' url='#main' title='skip to content'}}
9
+
10
+ <header class="toolkit-header-1">
11
+ <button aria-expanded="false">main menu toggle</button>
12
+ <div class="row">
13
+ <div class="col-12">
14
+ <a href="{{www}}toolkit">Digital Toolkit</a>
15
+ </div>
16
+ </div>
17
+ </header>
18
+
19
+ <div class="sticky-1">
20
+ <div class="sticky-1-wrapper">
21
+ <nav class="toolkit-nav-1" tabindex="-1">
22
+ <a href="{{www}}toolkit">Home</a>
23
+ <a href="{{www}}toolkit/grids.html">Grids</a>
24
+ <a href="{{www}}toolkit/colors.html">Colors</a>
25
+ <a href="{{www}}toolkit/type.html">Type</a>
26
+ <a href="{{www}}toolkit/icons.html">Icons</a>
27
+ <a class="selected" href="{{www}}toolkit/elements.html">Elements</a>
28
+ <a href="{{www}}toolkit/components.html">Components</a>
29
+ </nav>
30
+ </div>
31
+ </div>
32
+
33
+ <main id="main" tabindex="-1">
34
+ <section>
35
+ <h1 class="toolkit-heading-1">Elements</h1>
36
+ <div class="row">
37
+ <div class="col-12">
38
+ <h2 class="toolkit-heading-2">Anchors</h2>
39
+ </div>
40
+ </div>
41
+ <div class="row">
42
+ <div class="col-12 col-md-8">
43
+ <h3 class="toolkit-heading-3">anchor-1</h3>
44
+ <p>{{> toolkit/anchor-1 id='anchor-1' title='detailed information about this product' url='#'}}</p>
45
+ <p>example of helper text only for screen readers:</p>
46
+ <p>{{> toolkit/anchor-1 id='anchor-1-aria' title='click here' accessible-title='detailed information about this product' url='#'}}</p>
47
+ <h4 class="toolkit-heading-4">Source Code</h4>
48
+ <ul class="list-1">
49
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/anchor-1.handlebars">anchor-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/a.handlebars">a.handlebars</a></li>
50
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_anchors.scss">_anchors.scss</a></li>
51
+ </ul>
52
+ </div>
53
+ <aside class="col-12 col-md-4">
54
+ <h3 class="toolkit-heading-3">Accessibility with Anchors</h3>
55
+ <h4 class="toolkit-heading-4">Usage</h4>
56
+ <ul class="list-1">
57
+ <li>Anchors should be used when a click takes the user to a new page or location on the current page.</li>
58
+ <li>The anchor should provide enough helper text to give the user an indication of the content they will be taken to.</li>
59
+ </ul>
60
+ <h4 class="toolkit-heading-4">Gherkin</h4>
61
+ <div class="toolkit-gherkin-1">
62
+ <p>GIVEN I am a screen reader user<br>
63
+ WHEN I navigate to an anchor with the tab key<br>
64
+ THEN I hear the anchor text read aloud<br>
65
+ AND I will hear element identified as an anchor<br>
66
+ AND the helper text provides an indication of the content of the linked to location</p>
67
+ <p>GIVEN I am a keyboard user<br>
68
+ WHEN I navigate to an anchor with the tab key<br>
69
+ THEN I will see focus visual change</p>
70
+ </div>
71
+ </aside>
72
+ </div>
73
+ <hr class="toolkit-rule-1">
74
+ <div class="row">
75
+ <div class="col-12">
76
+ <h2 class="toolkit-heading-2">Buttons</h2>
77
+ </div>
78
+ </div>
79
+ <div class="row">
80
+ <div class="col-12 col-md-8">
81
+ <h3 class="toolkit-heading-3">button-1</h3>
82
+ <p>{{> toolkit/button-1 id='button-1' title='detailed information about this product'}}</p>
83
+ <p>example of helper text only for screen readers:</p>
84
+ <p>{{> toolkit/button-1 id='button-1-aria' title='click here' accessible-title='detailed information about this product' url='#'}}</p>
85
+ <h4 class="toolkit-heading-4">Source Code</h4>
86
+ <ul class="list-1">
87
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/button-1.handlebars">button-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/button.handlebars">button.handlebars</a></li>
88
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_buttons.scss">_buttons.scss</a></li>
89
+ </ul>
90
+ </div>
91
+ <aside class="col-12 col-md-4">
92
+ <h3 class="toolkit-heading-3">Accessibility with Buttons</h3>
93
+ <h4 class="toolkit-heading-4">Usage</h4>
94
+ <ul class="list-1">
95
+ <li>Buttons should be used when a click changes the view by opening a modal or modifying the DOM and does not take the user to a new location.</li>
96
+ <li>The button should provide enough helper text to give the user an indication of the action that will be taken.</li>
97
+ </ul>
98
+ <h4 class="toolkit-heading-4">Gherkin</h4>
99
+ <div class="toolkit-gherkin-1">
100
+ <p>GIVEN I am a screen reader user<br>
101
+ WHEN I navigate to a button with the tab key<br>
102
+ THEN I will hear element identified as a button<br>
103
+ AND the helper text provides an indication of the action that will be taken</p>
104
+ <p>GIVEN I am a keyboard user<br>
105
+ WHEN I navigate to a button with the tab key<br>
106
+ THEN I will see focus visual change</p>
107
+ </div>
108
+ </aside>
109
+ </div>
110
+ <hr class="toolkit-rule-1">
111
+ <div class="row">
112
+ <div class="col-12">
113
+ <h2 class="toolkit-heading-2">Labels</h2>
114
+ </div>
115
+ </div>
116
+ <div class="row">
117
+ <div class="col-12 col-md-8">
118
+ <h3 class="toolkit-heading-3">label-1</h3>
119
+ <p>{{> toolkit/label-1 id='label-1' title='Name' for='label-example-input'}}</p>
120
+ <p>{{> toolkit/input-text-1 id='label-example-input' placeholder='first and last name' type='text'}}</p>
121
+ <h4 class="toolkit-heading-4">Source Code</h4>
122
+ <ul class="list-1">
123
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/label-1.handlebars">label-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/label.handlebars">label.handlebars</a></li>
124
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_labels.scss">_labels.scss</a></li>
125
+ </ul>
126
+ </div>
127
+ <aside class="col-12 col-md-4">
128
+ <h3 class="toolkit-heading-3">Accessibility with Labels</h3>
129
+ <h4 class="toolkit-heading-4">Gherkin</h4>
130
+ <div class="toolkit-gherkin-1">
131
+ <p>GIVEN I am a screen reader user<br>
132
+ WHEN I select a form element label using the keyboard<br>
133
+ THEN I will hear the label read aloud</p>
134
+ </div>
135
+ </aside>
136
+ </div>
137
+ <hr class="toolkit-rule-1">
138
+ <div class="row">
139
+ <div class="col-12">
140
+ <h2 class="toolkit-heading-2">Legends</h2>
141
+ </div>
142
+ </div>
143
+ <div class="row">
144
+ <div class="col-12 col-md-8">
145
+ <h3 class="toolkit-heading-3">legend-1</h3>
146
+ <p>{{> toolkit/legend-1 title='Shipping Information'}}</p>
147
+ <h4 class="toolkit-heading-4">Source Code</h4>
148
+ <ul class="list-1">
149
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/legend-1.handlebars">legend-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/legend.handlebars">legend.handlebars</a></li>
150
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_legends.scss">_legends.scss</a></li>
151
+ </ul>
152
+ </div>
153
+ <aside class="col-12 col-md-4">
154
+ <h3 class="toolkit-heading-3">Accessibility with Legends</h3>
155
+ <h4 class="toolkit-heading-4">Gherkin</h4>
156
+ <div class="toolkit-gherkin-1">
157
+ <p>GIVEN I am a screen reader user<br>
158
+ WHEN I navigate to a legend with the keyboard<br>
159
+ THEN I hear the legend text read aloud</p>
160
+ </div>
161
+ </aside>
162
+ </div>
163
+ <hr class="toolkit-rule-1">
164
+ <div class="row">
165
+ <div class="col-12">
166
+ <h2 class="toolkit-heading-2">Lists</h2>
167
+ </div>
168
+ </div>
169
+ <div class="row">
170
+ <div class="col-12 col-md-8">
171
+ <h3 class="toolkit-heading-3">list-1</h3>
172
+ {{> toolkit/list-1 elements.list-1}}
173
+ <h4 class="toolkit-heading-4">Source Code</h4>
174
+ <ul class="list-1">
175
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/list-1.handlebars">list-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/ul.handlebars">ul.handlebars</a></li>
176
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_lists.scss">_lists.scss</a></li>
177
+ </ul>
178
+ </div>
179
+ <aside class="col-12 col-md-4">
180
+ <h3 class="toolkit-heading-3">Accessibility with Lists</h3>
181
+ <h4 class="toolkit-heading-4">Gherkin</h4>
182
+ <div class="toolkit-gherkin-1">
183
+ <p>GIVEN I am a screen reader user<br>
184
+ WHEN I select the list using the keyboard<br>
185
+ THEN I hear element identified as a list<br>
186
+ AND I will hear the number of items in the list</p>
187
+ <p>GIVEN I am a screen reader user<br>
188
+ WHEN navigate the list with my keyboard arrow keys<br>
189
+ THEN I will hear the next item read aloud</p>
190
+ <p>GIVEN I am a screen reader user<br>
191
+ WHEN navigate the past the last item in a list with the keyboard arrow key<br>
192
+ THEN I will hear that I have come to the end of the list</p>
193
+ </div>
194
+ </aside>
195
+ </div>
196
+ <hr class="toolkit-rule-1">
197
+ <div class="row">
198
+ <div class="col-12">
199
+ <h2 class="toolkit-heading-2">Input Checkboxes</h2>
200
+ </div>
201
+ </div>
202
+ <div class="row">
203
+ <div class="col-12 col-md-8">
204
+ <h3 class="toolkit-heading-3">input-checkbox-1</h3>
205
+ <p>{{> toolkit/label-1 title='Opt me in' for='input-checkbox-1-example'}}</p>
206
+ <p>{{> toolkit/input-checkbox-1 id='input-checkbox-1-example' name='checkbox-example' checked=true}}</p>
207
+ <h4 class="toolkit-heading-4">Source Code</h4>
208
+ <ul class="list-1">
209
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/input-checkbox-1.handlebars">input-checkbox-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/input.handlebars">input.handlebars</a></li>
210
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
211
+ </ul>
212
+ </div>
213
+ <aside class="col-12 col-md-4">
214
+ <h3 class="toolkit-heading-3">Accessibility with Checkboxes</h3>
215
+ <h4 class="toolkit-heading-4">Gherkin</h4>
216
+ <div class="toolkit-gherkin-1">
217
+ <p>GIVEN I am a screen reader user<br>
218
+ WHEN I navigate to a checkbox with the tab key<br>
219
+ THEN I will hear the element identified as a checkbox<br>
220
+ AND I will hear the label read aloud<br>
221
+ AND I will hear if it is selected</p>
222
+ <p>GIVEN I am a screen reader user<br>
223
+ WHEN I select a checkbox using the keyboard<br>
224
+ THEN I will hear the element be selected<br>
225
+ AND I will hear the label read aloud<br>
226
+ AND I will hear if it is selected</p>
227
+ <p>GIVEN I am a keyboard user<br>
228
+ WHEN I navigate to a checkbox with the tab key<br>
229
+ THEN I will see focus visual change</p>
230
+ </div>
231
+ </aside>
232
+ </div>
233
+ <hr class="toolkit-rule-1">
234
+ <div class="row">
235
+ <div class="col-12">
236
+ <h2 class="toolkit-heading-2">Input Radio Buttons</h2>
237
+ </div>
238
+ </div>
239
+ <div class="row">
240
+ <div class="col-12 col-md-8">
241
+ <h3 class="toolkit-heading-3">input-radio-1</h3>
242
+ <p id="radio-group-label">What color do you want?</p>
243
+ <p>{{> toolkit/label-1 title='red' for='input-radio-1-example-1'}}</p>
244
+ <p>{{> toolkit/input-radio-1 id='input-radio-1-example-1' name='radio-example' checked=true labelledby='radio-group-label'}}</p>
245
+ <p>{{> toolkit/label-1 title='blue' for='input-radio-1-example-2'}}</p>
246
+ <p>{{> toolkit/input-radio-1 id='input-radio-1-example-2' name='radio-example' labelledby='radio-group-label'}}</p>
247
+ <h4 class="toolkit-heading-4">Source Code</h4>
248
+ <ul class="list-1">
249
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/input-radio-1.handlebars">input-radio-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/input.handlebars">input.handlebars</a></li>
250
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
251
+ </ul>
252
+ </div>
253
+ <aside class="col-12 col-md-4">
254
+ <h3 class="toolkit-heading-3">Accessibility with Radio Buttons</h3>
255
+ <h4 class="toolkit-heading-4">Gherkin</h4>
256
+ <div class="toolkit-gherkin-1">
257
+ <p>GIVEN I am a screen reader user<br>
258
+ WHEN I navigate to a radio button with the tab key<br>
259
+ THEN I will hear the element identified as a radio button<br>
260
+ AND I will hear the label read aloud<br>
261
+ AND I will hear if it is selected</p>
262
+ <p>GIVEN I am a screen reader user<br>
263
+ WHEN I select a radio button using the keyboard<br>
264
+ THEN I will hear the element be selected<br>
265
+ AND I will hear the label read aloud<br>
266
+ AND I will hear if it is selected</p>
267
+ <p>GIVEN I am a keyboard user<br>
268
+ WHEN I navigate to a radio button with the tab key<br>
269
+ THEN I will see focus visual change</p>
270
+ </div>
271
+ </aside>
272
+ </div>
273
+ <hr class="toolkit-rule-1">
274
+ <div class="row">
275
+ <div class="col-12">
276
+ <h2 class="toolkit-heading-2">Input Text Boxes</h2>
277
+ </div>
278
+ </div>
279
+ <div class="row">
280
+ <div class="col-12 col-md-8">
281
+ <h3 class="toolkit-heading-3">input-text-1</h3>
282
+ <p>{{> toolkit/label-1 title='Name' for='input-text-1-example'}}</p>
283
+ <p>{{> toolkit/input-text-1 id='input-text-1-example' placeholder='first and last name' type='text'}}</p>
284
+ <h4 class="toolkit-heading-4">Source Code</h4>
285
+ <ul class="list-1">
286
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/input-text-1.handlebars">input-text-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/input.handlebars">input.handlebars</a></li>
287
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
288
+ </ul>
289
+ </div>
290
+ <aside class="col-12 col-md-4">
291
+ <h3 class="toolkit-heading-3">Accessibility with Text Boxes</h3>
292
+ <h4 class="toolkit-heading-4">Gherkin</h4>
293
+ <div class="toolkit-gherkin-1">
294
+ <p>GIVEN I am a screen reader user<br>
295
+ WHEN I navigate to a text input with the tab key<br>
296
+ THEN I will hear the element identified as an input<br>
297
+ AND I will hear the label read aloud<br>
298
+ AND I will hear any defined value<br>
299
+ AND I will hear any defined placeholder text<br>
300
+ AND I will hear if the field is required</p>
301
+ <p>GIVEN I am a keyboard user<br>
302
+ WHEN I navigate to a text input with the tab key<br>
303
+ THEN I will see focus visual change</p>
304
+ </div>
305
+ </aside>
306
+ </div>
307
+ <hr class="toolkit-rule-1">
308
+ <div class="row">
309
+ <div class="col-12">
310
+ <h2 class="toolkit-heading-2">Textareas</h2>
311
+ </div>
312
+ </div>
313
+ <div class="row">
314
+ <div class="col-12 col-md-8">
315
+ <h3 class="toolkit-heading-3">textarea-1</h3>
316
+ <p>{{> toolkit/label-1 title='additonal comments:' for='textarea-1-example'}}</p>
317
+ <p>{{> toolkit/textarea-1 id='textarea-1-example' placeholder='please be detailed'}}</p>
318
+ <h4 class="toolkit-heading-4">Source Code</h4>
319
+ <ul class="list-1">
320
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/textarea-1.handlebars">textarea-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/textarea.handlebars">textarea.handlebars</a></li>
321
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
322
+ </ul>
323
+ </div>
324
+ <aside class="col-12 col-md-4">
325
+ <h3 class="toolkit-heading-3">Accessibility</h3>
326
+ <h4 class="toolkit-heading-4">Gherkin</h4>
327
+ <div class="toolkit-gherkin-1">
328
+ <p>GIVEN I am a screen reader user<br>
329
+ WHEN I navigate to a textarea with the tab key<br>
330
+ THEN I will hear the element identified as an input<br>
331
+ AND I will hear the label read aloud<br>
332
+ AND I will hear any defined value<br>
333
+ AND I will hear any defined placeholder text<br>
334
+ AND I will hear if the field is required</p>
335
+ <p>GIVEN I am a keyboard user<br>
336
+ WHEN I navigate to a textarea with the tab key<br>
337
+ THEN I will see focus visual change</p>
338
+ </div>
339
+ </aside>
340
+ </div>
341
+ <hr class="toolkit-rule-1">
342
+ <div class="row">
343
+ <div class="col-12">
344
+ <h2 class="toolkit-heading-2">Select Menus</h2>
345
+ </div>
346
+ </div>
347
+ <div class="row">
348
+ <div class="col-12 col-md-8">
349
+ <h3 class="toolkit-heading-3">select-1</h3>
350
+ <p>{{> toolkit/label-1 title='what type of vehicle do you drive?' for='select-1-example'}}</p>
351
+ <p>{{> toolkit/select-1 elements.select-1 id='select-1-example'}}</p>
352
+ <h4 class="toolkit-heading-4">Source Code</h4>
353
+ <ul class="list-1">
354
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/select-1.handlebars">select-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/select.handlebars">select.handlebars</a></li>
355
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
356
+ </ul>
357
+ </div>
358
+ <aside class="col-12 col-md-4">
359
+ <h3 class="toolkit-heading-3">Accessibility</h3>
360
+ <h4 class="toolkit-heading-4">Gherkin</h4>
361
+ <div class="toolkit-gherkin-1">
362
+ <p>GIVEN I am a screen reader user<br>
363
+ WHEN I navigate to a dropdown menu with the tab key<br>
364
+ THEN I will hear the element identified as an dropdown menu<br>
365
+ AND I will hear the label read aloud<br>
366
+ AND I will hear any defined value<br>
367
+ AND I will hear any defined placeholder text<br>
368
+ AND I will hear if the field is required</p>
369
+ <p>GIVEN I am a screen reader user<br>
370
+ WHEN I open the dropdown menu with the spacebar key<br>
371
+ THEN I will hear the number of options<br>
372
+ AND I will hear selected option</p>
373
+ <p>GIVEN I am a screen reader user<br>
374
+ WHEN I open the dropdown menu with the spacebar key<br>
375
+ AND I navigate through the options<br>
376
+ THEN I will hear the option label<br>
377
+ AND I will hear a selected indicator if option is selected</p>
378
+ <p>GIVEN I am a keyboard user<br>
379
+ WHEN I navigate to a dropdown menu with the tab key<br>
380
+ THEN I will see focus visual change</p>
381
+ </div>
382
+ </aside>
383
+ </div>
384
+ <hr class="toolkit-rule-1">
385
+ <div class="row">
386
+ <div class="col-12">
387
+ <h2 class="toolkit-heading-2">Tables</h2>
388
+ </div>
389
+ </div>
390
+ <div class="row">
391
+ <div class="col-12 col-md-8">
392
+ <h3 class="toolkit-heading-3">table-1</h3>
393
+ {{> toolkit/table-1 elements.table-1}}
394
+ <h4 class="toolkit-heading-4">Source Code</h4>
395
+ <ul class="text-1">
396
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/table-1.handlebars">table-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/table.handlebars">table.handlebars</a></li>
397
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_tables.scss">_tables.scss</a></li>
398
+ </ul>
399
+ </div>
400
+ <aside class="col-12 col-md-4">
401
+ <h3 class="toolkit-heading-3">Accessibility</h3>
402
+ <h4 class="toolkit-heading-4">Gherkin</h4>
403
+ <div class="toolkit-gherkin-1">
404
+ <p>GIVEN I am a screen reader user<br>
405
+ WHEN I navigate to a table with the tab key<br>
406
+ THEN I will hear table caption<br>
407
+ AND I will hear the number of and number of rows</p>
408
+ <p>GIVEN I am a screen reader user<br>
409
+ WHEN I navigate from cell to cell using Control + Alt + arrow keys<br>
410
+ THEN I need to hear the table headers</p>
411
+ </div>
412
+ </aside>
413
+ </div>
414
+ <hr class="toolkit-rule-1">
415
+ <div class="row">
416
+ <div class="col-12">
417
+ <h2 class="toolkit-heading-2">Pictures</h2>
418
+ </div>
419
+ </div>
420
+ <div class="row">
421
+ <div class="col-12 col-md-8">
422
+ <h3 class="toolkit-heading-3">picture-1</h3>
423
+ <p>{{> toolkit/picture-1
424
+ imageFallback='assets/image/demo/fallback.jpg'
425
+ imageSmallAvif='assets/image/demo/small.avif'
426
+ imageSmallWebp='assets/image/demo/small.webp'
427
+ imageMediumAvif='assets/image/demo/fallback.avif'
428
+ imageMediumWebp='assets/image/demo/fallback.webp'
429
+ imageLargeAvif='assets/image/demo/large.avif'
430
+ imageLargeWebp='assets/image/demo/large.webp'
431
+ imageXLargeAvif='assets/image/demo/large.avif'
432
+ imageXLargeWebp='assets/image/demo/large.webp'
433
+ imageXXLargeAvif='assets/image/demo/large.avif'
434
+ imageXXLargeWebp='assets/image/demo/large.webp'
435
+ width='2048'
436
+ height='1600'
437
+ loading='lazy'
438
+ decoding='async'
439
+ alt='image example alternative text'
440
+ }}</p>
441
+ <h4 class="toolkit-heading-4">Source Code</h4>
442
+ <ul class="list-1">
443
+ <li>markup: <a href="{{webRepo}}app/assets/markup/toolkit/picture-1.handlebars">picture-1.handlebars</a>, <a href="{{webRepo}}app/assets/markup/element/picture.handlebars">picture.handlebars</a></li>
444
+ <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_images.scss">_images.scss</a></li>
445
+ </ul>
446
+ </div>
447
+ <aside class="col-12 col-md-4">
448
+ <h3 class="toolkit-heading-3">Accessibility</h3>
449
+ <h4 class="toolkit-heading-4">Gherkin</h4>
450
+ <p><strong>active/actionable pictures:</strong></p>
451
+ <div class="toolkit-gherkin-1">
452
+ <p>GIVEN I am a screen reader user<br>
453
+ WHEN a picture receives keyboard focus,<br>
454
+ THEN I will hear the destination or function of that picture.</p>
455
+ </div>
456
+ <p><strong>informative pictures:</strong></p>
457
+ <div class="toolkit-gherkin-1">
458
+ <p>GIVEN I am a screen reader user<br>
459
+ WHEN I come across a picture that presents useful information,<br>
460
+ THEN I should hear a description that provides equivalent information.</p>
461
+ </div>
462
+ <p><strong>decorative pictures:</strong></p>
463
+ <div class="toolkit-gherkin-1">
464
+ <p>GIVEN I am a screen reader user<br>
465
+ WHEN I come across a picture that is decorative or redundant,<br>
466
+ THEN I should not hear anything for that picture.</p>
467
+ </div>
468
+ <p><strong>complex pictures:</strong></p>
469
+ <div class="toolkit-gherkin-1">
470
+ <p>GIVEN I am a screen reader user<br>
471
+ WHEN I come across a picture that presents complex information,<br>
472
+ THEN I should hear a detailed description of that picture,<br>
473
+ or find a link to a page that presents more information about the picture.</p>
474
+ </div>
475
+ </aside>
476
+ </div>
477
+ </section>
478
+ </main>
479
+
480
+ <hr class="toolkit-rule-1">
481
+
482
+ {{>toolkit/footer-1}}
483
+
484
+ </div>
485
+
486
+ {{#if scripts.global}}
487
+ {{> element/script script=scripts.global}}
488
+ {{/if}}
489
+ {{#if scripts.section}}
490
+ {{> element/script script=scripts.section}}
491
+ {{/if}}
492
+ {{#if scripts.page}}
493
+ {{> element/script script=scripts.page}}
494
+ {{/if}}
495
+
496
+ </body>
497
+ </html>