├── .DS_Store
├── .github
└── workflows
│ └── codeql-analysis.yml
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.apache-2.0.md
├── LICENSE.mit.md
├── LICENSE.mpl-2.0.md
├── LICENSE.txt
├── README.md
├── _config.yml
├── dist
├── tota11y.js
└── tota11y.min.js
├── docs
└── index.html
├── index.js
├── less
├── base.less
├── tota11y.less
└── variables.less
├── package-lock.json
├── package.json
├── plugins
├── a11y-text-wand
│ ├── index.js
│ └── style.less
├── alt-text
│ └── index.js
├── base.js
├── contrast
│ ├── error-description.handlebars
│ ├── error-title.handlebars
│ ├── index.js
│ └── style.less
├── empty
│ └── index.js
├── focus
│ └── index.js
├── headings
│ ├── index.js
│ ├── outline-item.handlebars
│ └── style.less
├── index.js
├── labels
│ ├── error-template.handlebars
│ ├── index.js
│ └── style.less
├── landmarks
│ ├── index.js
│ └── style.less
├── link-text
│ └── index.js
├── shared
│ ├── annotate
│ │ ├── error-label.handlebars
│ │ ├── index.js
│ │ └── style.less
│ ├── audit.js
│ └── info-panel
│ │ ├── error.handlebars
│ │ ├── index.js
│ │ └── style.less
├── style.less
└── titles
│ ├── index.js
│ └── style.less
├── templates
├── banner.handlebars
└── logo.handlebars
├── test
├── .DS_Store
├── index.html
└── test2.html
├── utils
├── element.js
├── options.js
└── pre-publish-checks.js
└── webpack.config.babel.js
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babylonhealth/Tota11y/48db80369a372ba140eaf1764c45c85a3690e805/.DS_Store
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ main ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ main ]
20 | schedule:
21 | - cron: '39 8 * * 6'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 | permissions:
28 | actions: read
29 | contents: read
30 | security-events: write
31 |
32 | strategy:
33 | fail-fast: false
34 | matrix:
35 | language: [ 'javascript' ]
36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support
38 |
39 | steps:
40 | - name: Checkout repository
41 | uses: actions/checkout@v2
42 |
43 | # Initializes the CodeQL tools for scanning.
44 | - name: Initialize CodeQL
45 | uses: github/codeql-action/init@v1
46 | with:
47 | languages: ${{ matrix.language }}
48 | # If you wish to specify custom queries, you can do so here or in a config file.
49 | # By default, queries listed here will override any specified in a config file.
50 | # Prefix the list here with "+" to use these queries and those in the config file.
51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
52 |
53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
54 | # If this step fails, then you should remove it and run the build manually (see below)
55 | - name: Autobuild
56 | uses: github/codeql-action/autobuild@v1
57 |
58 | # ℹ️ Command-line programs to run using the OS shell.
59 | # 📚 https://git.io/JvXDl
60 |
61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
62 | # and modify them (or add more) to build your code if your project
63 | # uses a compiled language
64 |
65 | #- run: |
66 | # make bootstrap
67 | # make release
68 |
69 | - name: Perform CodeQL Analysis
70 | uses: github/codeql-action/analyze@v1
71 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .yalc
2 | yalc.lock
3 | .DS_Store
4 | *.tgz
5 | .DS_Store
6 | .DS_Store
7 | .DS_Store
8 | node_modules/
9 | .DS_Store
10 | node_modules
11 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 0.2.0
2 |
3 | - Get rid of build warnings and upgrade postcss ([493293d1](https://github.com/Khan/tota11y/commit/493293d1))
4 | - Added relative link to license.txt ([b3da3c63](https://github.com/Khan/tota11y/commit/b3da3c63))
5 | - bump accessibility-developer-tools (#111)
6 | - Use https instead of http for the url ([ce0d19ed](https://github.com/Khan/tota11y/commit/ce0d19ed))
7 | - menu-item is not a valid aria role (#118)
8 | - Change "main" field in package.json (#123)
9 | - Upgrade to Babel 6 (#135)
10 | - Upgrade to latest handlebars (#136)
11 | - Upgrade to latest jquery (#137)
12 | - Upgrade to latest eslint (#138)
13 | - Update to Webpack 4 and fix a lot of things (#145)
14 | - Add additional checks for publish (#146)
15 | - Adding prechecks for publish config and login (#147)
16 | - We're not using lerna so we need to do this BEFORE publish (#148)
17 |
18 | ## 0.1.6
19 |
20 | - Ignore hidden links for LinkText plugin ([30dc0fd](https://github.com/Khan/tota11y/commit/30dc0fd))
21 |
22 | ## 0.1.5
23 |
24 | - Update travis.yml to use node v4 ([c3c47be](https://github.com/Khan/tota11y/commit/c3c47be))
25 | - Use semantic tags when listing plugins ([dc5425b](https://github.com/Khan/tota11y/commit/dc5425b))
26 | - Fix contrast plugin swatches not displaying correctly ([8a34c9b](https://github.com/Khan/tota11y/commit/8a34c9b))
27 |
28 | ## 0.1.4
29 |
30 | - Add explicit background to all elements ([54a3f5a](https://github.com/Khan/tota11y/commit/54a3f5a))
31 | - Skip the tota11y UI under the Landmarks plugin ([a3059e9](https://github.com/Khan/tota11y/commit/a3059e9))
32 | - Update jsdom and fix live-test script ([e5a418e](https://github.com/Khan/tota11y/commit/e5a418e))
33 |
34 | ## 0.1.3
35 |
36 | - Fixed npm build commands ([20cf3c4](https://github.com/Khan/tota11y/commit/20cf3c4))
37 | - Provide fallback for window.requestAnimationFrame on IE 9 and - under ([8d0aa4f](https://github.com/Khan/tota11y/commit/8d0aa4f))
38 | - Add bower.json file ([43fb990](https://github.com/Khan/tota11y/commit/43fb990))
39 | - Remove experimental ES7 code, and use babel for webpack config ([03a0021](https://github.com/Khan/tota11y/commit/03a0021))
40 | - Remove various hacks for unit testing ([048c873](https://github.com/Khan/tota11y/commit/048c873))
41 | - Fixed unit tests now that `window` is global ([492be3f](https://github.com/Khan/tota11y/commit/492be3f))
42 | - Fixed tests, ignoring ADT code from linter ([dd28057](https://github.com/Khan/tota11y/commit/dd28057))
43 |
44 | ## 0.1.2
45 |
46 | - Patch axs.AuditRule.collectMatchingElements to prevent JS errors with cross-origin iframes ([be1dc92](https://github.com/Khan/tota11y/commit/be1dc92))
47 |
48 | ## 0.1.1
49 |
50 | - Added keyboard accessibility to toolbar toggle ([861574e](https://github.com/Khan/tota11y/commit/861574e))
51 | - Change position code to work off left/top ([19cf161](https://github.com/Khan/tota11y/commit/19cf161))
52 | - Added architecture overview to README, and some dev installation instructions ([20115fd](https://github.com/Khan/tota11y/commit/20115fd))
53 |
54 | ## 0.1.0
55 |
56 | - Added an experimental "Magic wand" plugin to display screen-reader text on hover ([1215c6e](https://github.com/Khan/tota11y/commit/1215c6e), [fbcd665](https://github.com/Khan/tota11y/commit/fbcd665))
57 | - Upgrade tota11y to use Accessibility Developer Tools v2.9.0-rc0 ([fe9a070](https://github.com/Khan/tota11y/commit/fe9a070))
58 | - Fixed a bug in contrast preview when interacting with gradients ([4c4ea9d](https://github.com/Khan/tota11y/commit/4c4ea9d))
59 | - Fixed a bug with annotation toggling breaking the HeadingsPlugin summary tab ([2f6d9d6](https://github.com/Khan/tota11y/commit/2f6d9d6))
60 | - Added real `src` values to the AltTextPlugin suggestions ([053d066](https://github.com/Khan/tota11y/commit/053d066))
61 | - Added surrounding code to all error descriptions ([c044017](https://github.com/Khan/tota11y/commit/c044017))
62 | - Built a changelog!
63 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 | Tota11y is licensed under the [MIT AND MPL-2.0 AND Apache-2.0](/LICENSE.txt).
3 |
--------------------------------------------------------------------------------
/LICENSE.apache-2.0.md:
--------------------------------------------------------------------------------
1 |
2 | Apache License
3 | Version 2.0, January 2004
4 | http://www.apache.org/licenses/
5 |
6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7 |
8 | 1. Definitions.
9 |
10 | "License" shall mean the terms and conditions for use, reproduction,
11 | and distribution as defined by Sections 1 through 9 of this document.
12 |
13 | "Licensor" shall mean the copyright owner or entity authorized by
14 | the copyright owner that is granting the License.
15 |
16 | "Legal Entity" shall mean the union of the acting entity and all
17 | other entities that control, are controlled by, or are under common
18 | control with that entity. For the purposes of this definition,
19 | "control" means (i) the power, direct or indirect, to cause the
20 | direction or management of such entity, whether by contract or
21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
22 | outstanding shares, or (iii) beneficial ownership of such entity.
23 |
24 | "You" (or "Your") shall mean an individual or Legal Entity
25 | exercising permissions granted by this License.
26 |
27 | "Source" form shall mean the preferred form for making modifications,
28 | including but not limited to software source code, documentation
29 | source, and configuration files.
30 |
31 | "Object" form shall mean any form resulting from mechanical
32 | transformation or translation of a Source form, including but
33 | not limited to compiled object code, generated documentation,
34 | and conversions to other media types.
35 |
36 | "Work" shall mean the work of authorship, whether in Source or
37 | Object form, made available under the License, as indicated by a
38 | copyright notice that is included in or attached to the work
39 | (an example is provided in the Appendix below).
40 |
41 | "Derivative Works" shall mean any work, whether in Source or Object
42 | form, that is based on (or derived from) the Work and for which the
43 | editorial revisions, annotations, elaborations, or other modifications
44 | represent, as a whole, an original work of authorship. For the purposes
45 | of this License, Derivative Works shall not include works that remain
46 | separable from, or merely link (or bind by name) to the interfaces of,
47 | the Work and Derivative Works thereof.
48 |
49 | "Contribution" shall mean any work of authorship, including
50 | the original version of the Work and any modifications or additions
51 | to that Work or Derivative Works thereof, that is intentionally
52 | submitted to Licensor for inclusion in the Work by the copyright owner
53 | or by an individual or Legal Entity authorized to submit on behalf of
54 | the copyright owner. For the purposes of this definition, "submitted"
55 | means any form of electronic, verbal, or written communication sent
56 | to the Licensor or its representatives, including but not limited to
57 | communication on electronic mailing lists, source code control systems,
58 | and issue tracking systems that are managed by, or on behalf of, the
59 | Licensor for the purpose of discussing and improving the Work, but
60 | excluding communication that is conspicuously marked or otherwise
61 | designated in writing by the copyright owner as "Not a Contribution."
62 |
63 | "Contributor" shall mean Licensor and any individual or Legal Entity
64 | on behalf of whom a Contribution has been received by Licensor and
65 | subsequently incorporated within the Work.
66 |
67 | 2. Grant of Copyright License. Subject to the terms and conditions of
68 | this License, each Contributor hereby grants to You a perpetual,
69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70 | copyright license to reproduce, prepare Derivative Works of,
71 | publicly display, publicly perform, sublicense, and distribute the
72 | Work and such Derivative Works in Source or Object form.
73 |
74 | 3. Grant of Patent License. Subject to the terms and conditions of
75 | this License, each Contributor hereby grants to You a perpetual,
76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77 | (except as stated in this section) patent license to make, have made,
78 | use, offer to sell, sell, import, and otherwise transfer the Work,
79 | where such license applies only to those patent claims licensable
80 | by such Contributor that are necessarily infringed by their
81 | Contribution(s) alone or by combination of their Contribution(s)
82 | with the Work to which such Contribution(s) was submitted. If You
83 | institute patent litigation against any entity (including a
84 | cross-claim or counterclaim in a lawsuit) alleging that the Work
85 | or a Contribution incorporated within the Work constitutes direct
86 | or contributory patent infringement, then any patent licenses
87 | granted to You under this License for that Work shall terminate
88 | as of the date such litigation is filed.
89 |
90 | 4. Redistribution. You may reproduce and distribute copies of the
91 | Work or Derivative Works thereof in any medium, with or without
92 | modifications, and in Source or Object form, provided that You
93 | meet the following conditions:
94 |
95 | (a) You must give any other recipients of the Work or
96 | Derivative Works a copy of this License; and
97 |
98 | (b) You must cause any modified files to carry prominent notices
99 | stating that You changed the files; and
100 |
101 | (c) You must retain, in the Source form of any Derivative Works
102 | that You distribute, all copyright, patent, trademark, and
103 | attribution notices from the Source form of the Work,
104 | excluding those notices that do not pertain to any part of
105 | the Derivative Works; and
106 |
107 | (d) If the Work includes a "NOTICE" text file as part of its
108 | distribution, then any Derivative Works that You distribute must
109 | include a readable copy of the attribution notices contained
110 | within such NOTICE file, excluding those notices that do not
111 | pertain to any part of the Derivative Works, in at least one
112 | of the following places: within a NOTICE text file distributed
113 | as part of the Derivative Works; within the Source form or
114 | documentation, if provided along with the Derivative Works; or,
115 | within a display generated by the Derivative Works, if and
116 | wherever such third-party notices normally appear. The contents
117 | of the NOTICE file are for informational purposes only and
118 | do not modify the License. You may add Your own attribution
119 | notices within Derivative Works that You distribute, alongside
120 | or as an addendum to the NOTICE text from the Work, provided
121 | that such additional attribution notices cannot be construed
122 | as modifying the License.
123 |
124 | You may add Your own copyright statement to Your modifications and
125 | may provide additional or different license terms and conditions
126 | for use, reproduction, or distribution of Your modifications, or
127 | for any such Derivative Works as a whole, provided Your use,
128 | reproduction, and distribution of the Work otherwise complies with
129 | the conditions stated in this License.
130 |
131 | 5. Submission of Contributions. Unless You explicitly state otherwise,
132 | any Contribution intentionally submitted for inclusion in the Work
133 | by You to the Licensor shall be under the terms and conditions of
134 | this License, without any additional terms or conditions.
135 | Notwithstanding the above, nothing herein shall supersede or modify
136 | the terms of any separate license agreement you may have executed
137 | with Licensor regarding such Contributions.
138 |
139 | 6. Trademarks. This License does not grant permission to use the trade
140 | names, trademarks, service marks, or product names of the Licensor,
141 | except as required for reasonable and customary use in describing the
142 | origin of the Work and reproducing the content of the NOTICE file.
143 |
144 | 7. Disclaimer of Warranty. Unless required by applicable law or
145 | agreed to in writing, Licensor provides the Work (and each
146 | Contributor provides its Contributions) on an "AS IS" BASIS,
147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 | implied, including, without limitation, any warranties or conditions
149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 | PARTICULAR PURPOSE. You are solely responsible for determining the
151 | appropriateness of using or redistributing the Work and assume any
152 | risks associated with Your exercise of permissions under this License.
153 |
154 | 8. Limitation of Liability. In no event and under no legal theory,
155 | whether in tort (including negligence), contract, or otherwise,
156 | unless required by applicable law (such as deliberate and grossly
157 | negligent acts) or agreed to in writing, shall any Contributor be
158 | liable to You for damages, including any direct, indirect, special,
159 | incidental, or consequential damages of any character arising as a
160 | result of this License or out of the use or inability to use the
161 | Work (including but not limited to damages for loss of goodwill,
162 | work stoppage, computer failure or malfunction, or any and all
163 | other commercial damages or losses), even if such Contributor
164 | has been advised of the possibility of such damages.
165 |
166 | 9. Accepting Warranty or Additional Liability. While redistributing
167 | the Work or Derivative Works thereof, You may choose to offer,
168 | and charge a fee for, acceptance of support, warranty, indemnity,
169 | or other liability obligations and/or rights consistent with this
170 | License. However, in accepting such obligations, You may act only
171 | on Your own behalf and on Your sole responsibility, not on behalf
172 | of any other Contributor, and only if You agree to indemnify,
173 | defend, and hold each Contributor harmless for any liability
174 | incurred by, or claims asserted against, such Contributor by reason
175 | of your accepting any such warranty or additional liability.
176 |
177 | END OF TERMS AND CONDITIONS
178 |
179 | APPENDIX: How to apply the Apache License to your work.
180 |
181 | To apply the Apache License to your work, attach the following
182 | boilerplate notice, with the fields enclosed by brackets "[]"
183 | replaced with your own identifying information. (Don't include
184 | the brackets!) The text should be enclosed in the appropriate
185 | comment syntax for the file format. We also recommend that a
186 | file or class name and description of purpose be included on the
187 | same "printed page" as the copyright notice for easier
188 | identification within third-party archives.
189 |
190 | Copyright 2021 Babylon Partners Ltd.
191 |
192 | Licensed under the Apache License, Version 2.0 (the "License");
193 | you may not use this file except in compliance with the License.
194 | You may obtain a copy of the License at
195 |
196 | http://www.apache.org/licenses/LICENSE-2.0
197 |
198 | Unless required by applicable law or agreed to in writing, software
199 | distributed under the License is distributed on an "AS IS" BASIS,
200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 | See the License for the specific language governing permissions and
202 | limitations under the License.
203 |
--------------------------------------------------------------------------------
/LICENSE.mit.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/LICENSE.mpl-2.0.md:
--------------------------------------------------------------------------------
1 |
2 | Mozilla Public License
3 | Version 2.0
4 | 1. Definitions
5 |
6 | 1.1. “Contributor”
7 |
8 | means each individual or legal entity that creates, contributes to the creation of, or owns Covered Software.
9 | 1.2. “Contributor Version”
10 |
11 | means the combination of the Contributions of others (if any) used by a Contributor and that particular Contributor’s Contribution.
12 | 1.3. “Contribution”
13 |
14 | means Covered Software of a particular Contributor.
15 | 1.4. “Covered Software”
16 |
17 | means Source Code Form to which the initial Contributor has attached the notice in Exhibit A, the Executable Form of such Source Code Form, and Modifications of such Source Code Form, in each case including portions thereof.
18 | 1.5. “Incompatible With Secondary Licenses”
19 |
20 | means
21 |
22 | that the initial Contributor has attached the notice described in Exhibit B to the Covered Software; or
23 |
24 | that the Covered Software was made available under the terms of version 1.1 or earlier of the License, but not also under the terms of a Secondary License.
25 |
26 | 1.6. “Executable Form”
27 |
28 | means any form of the work other than Source Code Form.
29 | 1.7. “Larger Work”
30 |
31 | means a work that combines Covered Software with other material, in a separate file or files, that is not Covered Software.
32 | 1.8. “License”
33 |
34 | means this document.
35 | 1.9. “Licensable”
36 |
37 | means having the right to grant, to the maximum extent possible, whether at the time of the initial grant or subsequently, any and all of the rights conveyed by this License.
38 | 1.10. “Modifications”
39 |
40 | means any of the following:
41 |
42 | any file in Source Code Form that results from an addition to, deletion from, or modification of the contents of Covered Software; or
43 |
44 | any new file in Source Code Form that contains any Covered Software.
45 |
46 | 1.11. “Patent Claims” of a Contributor
47 |
48 | means any patent claim(s), including without limitation, method, process, and apparatus claims, in any patent Licensable by such Contributor that would be infringed, but for the grant of the License, by the making, using, selling, offering for sale, having made, import, or transfer of either its Contributions or its Contributor Version.
49 | 1.12. “Secondary License”
50 |
51 | means either the GNU General Public License, Version 2.0, the GNU Lesser General Public License, Version 2.1, the GNU Affero General Public License, Version 3.0, or any later versions of those licenses.
52 | 1.13. “Source Code Form”
53 |
54 | means the form of the work preferred for making modifications.
55 | 1.14. “You” (or “Your”)
56 |
57 | means an individual or a legal entity exercising rights under this License. For legal entities, “You” includes any entity that controls, is controlled by, or is under common control with You. For purposes of this definition, “control” means (a) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (b) ownership of more than fifty percent (50%) of the outstanding shares or beneficial ownership of such entity.
58 |
59 | 2. License Grants and Conditions
60 | 2.1. Grants
61 |
62 | Each Contributor hereby grants You a world-wide, royalty-free, non-exclusive license:
63 |
64 | under intellectual property rights (other than patent or trademark) Licensable by such Contributor to use, reproduce, make available, modify, display, perform, distribute, and otherwise exploit its Contributions, either on an unmodified basis, with Modifications, or as part of a Larger Work; and
65 |
66 | under Patent Claims of such Contributor to make, use, sell, offer for sale, have made, import, and otherwise transfer either its Contributions or its Contributor Version.
67 |
68 | 2.2. Effective Date
69 |
70 | The licenses granted in Section 2.1 with respect to any Contribution become effective for each Contribution on the date the Contributor first distributes such Contribution.
71 | 2.3. Limitations on Grant Scope
72 |
73 | The licenses granted in this Section 2 are the only rights granted under this License. No additional rights or licenses will be implied from the distribution or licensing of Covered Software under this License. Notwithstanding Section 2.1(b) above, no patent license is granted by a Contributor:
74 |
75 | for any code that a Contributor has removed from Covered Software; or
76 |
77 | for infringements caused by: (i) Your and any other third party’s modifications of Covered Software, or (ii) the combination of its Contributions with other software (except as part of its Contributor Version); or
78 |
79 | under Patent Claims infringed by Covered Software in the absence of its Contributions.
80 |
81 | This License does not grant any rights in the trademarks, service marks, or logos of any Contributor (except as may be necessary to comply with the notice requirements in Section 3.4).
82 | 2.4. Subsequent Licenses
83 |
84 | No Contributor makes additional grants as a result of Your choice to distribute the Covered Software under a subsequent version of this License (see Section 10.2) or under the terms of a Secondary License (if permitted under the terms of Section 3.3).
85 | 2.5. Representation
86 |
87 | Each Contributor represents that the Contributor believes its Contributions are its original creation(s) or it has sufficient rights to grant the rights to its Contributions conveyed by this License.
88 | 2.6. Fair Use
89 |
90 | This License is not intended to limit any rights You have under applicable copyright doctrines of fair use, fair dealing, or other equivalents.
91 | 2.7. Conditions
92 |
93 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in Section 2.1.
94 | 3. Responsibilities
95 | 3.1. Distribution of Source Form
96 |
97 | All distribution of Covered Software in Source Code Form, including any Modifications that You create or to which You contribute, must be under the terms of this License. You must inform recipients that the Source Code Form of the Covered Software is governed by the terms of this License, and how they can obtain a copy of this License. You may not attempt to alter or restrict the recipients’ rights in the Source Code Form.
98 | 3.2. Distribution of Executable Form
99 |
100 | If You distribute Covered Software in Executable Form then:
101 |
102 | such Covered Software must also be made available in Source Code Form, as described in Section 3.1, and You must inform recipients of the Executable Form how they can obtain a copy of such Source Code Form by reasonable means in a timely manner, at a charge no more than the cost of distribution to the recipient; and
103 |
104 | You may distribute such Executable Form under the terms of this License, or sublicense it under different terms, provided that the license for the Executable Form does not attempt to limit or alter the recipients’ rights in the Source Code Form under this License.
105 |
106 | 3.3. Distribution of a Larger Work
107 |
108 | You may create and distribute a Larger Work under terms of Your choice, provided that You also comply with the requirements of this License for the Covered Software. If the Larger Work is a combination of Covered Software with a work governed by one or more Secondary Licenses, and the Covered Software is not Incompatible With Secondary Licenses, this License permits You to additionally distribute such Covered Software under the terms of such Secondary License(s), so that the recipient of the Larger Work may, at their option, further distribute the Covered Software under the terms of either this License or such Secondary License(s).
109 | 3.4. Notices
110 |
111 | You may not remove or alter the substance of any license notices (including copyright notices, patent notices, disclaimers of warranty, or limitations of liability) contained within the Source Code Form of the Covered Software, except that You may alter any license notices to the extent required to remedy known factual inaccuracies.
112 | 3.5. Application of Additional Terms
113 |
114 | You may choose to offer, and to charge a fee for, warranty, support, indemnity or liability obligations to one or more recipients of Covered Software. However, You may do so only on Your own behalf, and not on behalf of any Contributor. You must make it absolutely clear that any such warranty, support, indemnity, or liability obligation is offered by You alone, and You hereby agree to indemnify every Contributor for any liability incurred by such Contributor as a result of warranty, support, indemnity or liability terms You offer. You may include additional disclaimers of warranty and limitations of liability specific to any jurisdiction.
115 | 4. Inability to Comply Due to Statute or Regulation
116 |
117 | If it is impossible for You to comply with any of the terms of this License with respect to some or all of the Covered Software due to statute, judicial order, or regulation then You must: (a) comply with the terms of this License to the maximum extent possible; and (b) describe the limitations and the code they affect. Such description must be placed in a text file included with all distributions of the Covered Software under this License. Except to the extent prohibited by statute or regulation, such description must be sufficiently detailed for a recipient of ordinary skill to be able to understand it.
118 | 5. Termination
119 |
120 | 5.1. The rights granted under this License will terminate automatically if You fail to comply with any of its terms. However, if You become compliant, then the rights granted under this License from a particular Contributor are reinstated (a) provisionally, unless and until such Contributor explicitly and finally terminates Your grants, and (b) on an ongoing basis, if such Contributor fails to notify You of the non-compliance by some reasonable means prior to 60 days after You have come back into compliance. Moreover, Your grants from a particular Contributor are reinstated on an ongoing basis if such Contributor notifies You of the non-compliance by some reasonable means, this is the first time You have received notice of non-compliance with this License from such Contributor, and You become compliant prior to 30 days after Your receipt of the notice.
121 |
122 | 5.2. If You initiate litigation against any entity by asserting a patent infringement claim (excluding declaratory judgment actions, counter-claims, and cross-claims) alleging that a Contributor Version directly or indirectly infringes any patent, then the rights granted to You by any and all Contributors for the Covered Software under Section 2.1 of this License shall terminate.
123 |
124 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user license agreements (excluding distributors and resellers) which have been validly granted by You or Your distributors under this License prior to termination shall survive termination.
125 | 6. Disclaimer of Warranty
126 |
127 | Covered Software is provided under this License on an “as is” basis, without warranty of any kind, either expressed, implied, or statutory, including, without limitation, warranties that the Covered Software is free of defects, merchantable, fit for a particular purpose or non-infringing. The entire risk as to the quality and performance of the Covered Software is with You. Should any Covered Software prove defective in any respect, You (not any Contributor) assume the cost of any necessary servicing, repair, or correction. This disclaimer of warranty constitutes an essential part of this License. No use of any Covered Software is authorized under this License except under this disclaimer.
128 | 7. Limitation of Liability
129 |
130 | Under no circumstances and under no legal theory, whether tort (including negligence), contract, or otherwise, shall any Contributor, or anyone who distributes Covered Software as permitted above, be liable to You for any direct, indirect, special, incidental, or consequential damages of any character including, without limitation, damages for lost profits, loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses, even if such party shall have been informed of the possibility of such damages. This limitation of liability shall not apply to liability for death or personal injury resulting from such party’s negligence to the extent applicable law prohibits such limitation. Some jurisdictions do not allow the exclusion or limitation of incidental or consequential damages, so this exclusion and limitation may not apply to You.
131 | 8. Litigation
132 |
133 | Any litigation relating to this License may be brought only in the courts of a jurisdiction where the defendant maintains its principal place of business and such litigation shall be governed by laws of that jurisdiction, without reference to its conflict-of-law provisions. Nothing in this Section shall prevent a party’s ability to bring cross-claims or counter-claims.
134 | 9. Miscellaneous
135 |
136 | This License represents the complete agreement concerning the subject matter hereof. If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable. Any law or regulation which provides that the language of a contract shall be construed against the drafter shall not be used to construe this License against a Contributor.
137 |
138 | 10. Versions of the License
139 | 10.1. New Versions
140 |
141 | Mozilla Foundation is the license steward. Except as provided in Section 10.3, no one other than the license steward has the right to modify or publish new versions of this License. Each version will be given a distinguishing version number.
142 | 10.2. Effect of New Versions
143 |
144 | You may distribute the Covered Software under the terms of the version of the License under which You originally received the Covered Software, or under the terms of any subsequent version published by the license steward.
145 | 10.3. Modified Versions
146 |
147 | If you create software not governed by this License, and you want to create a new license for such software, you may create and use a modified version of this License if you rename the license and remove any references to the name of the license steward (except to note that such modified license differs from this License).
148 | 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
149 |
150 | If You choose to distribute Source Code Form that is Incompatible With Secondary Licenses under the terms of this version of the License, the notice described in Exhibit B of this License must be attached.
151 | Exhibit A - Source Code Form License Notice
152 |
153 | This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
154 |
155 | If it is not possible or desirable to put the notice in a particular file, then You may include the notice in a location (such as a LICENSE file in a relevant directory) where a recipient would be likely to look for such a notice.
156 |
157 | You may add additional accurate notices of copyright ownership.
158 | Exhibit B - “Incompatible With Secondary Licenses” Notice
159 |
160 | This Source Code Form is “Incompatible With Secondary Licenses”, as defined by the Mozilla Public License, v. 2.0.
161 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | `SPDX-License-Identifier: MIT AND MPL-2.0 AND Apache-2.0`
2 |
3 | Copyright (c) 2021 Khan Academy
4 | Copyright (c) 2021 Babylon Partners Ltd
5 |
6 | This software is forked from Khan Academy's MIT licensed Tota11y project.
7 | Some contributions are licensed under the Mozilla Public license, Version 2.
8 | Contributions made in this fork are licensed under the Apache License, Version 2
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # An accessibility visualization toolkit.
2 |
3 | Instructions and bookmarklet at https://brucelawson.github.io/tota11y/instructions
4 |
5 | This is a fork of the original [Tota11y from Khan Academy](http://khan.github.io/tota11y/), by Babylon Health. Inspired by [why Khan Academy built tota11y](http://engineering.khanacademy.org/posts/tota11y.htm), some of the functionality has been updated or tweaked to reflect the needs of Babylon's web developers.
6 |
7 | ## New Features
8 |
9 | ### UI changes
10 | - When hovering over a tota11y label, bump upits z-index in case it is obscured by a nearby label in busy pages.
11 | - Make Tota11y responsive when screen is zoomed to 200%
12 | - Split out modules into most-common ones for content editors, and those for 'developers' (e.g. people with control over HTML blocks and form fields)
13 | - Add links to Babylon DNA guidance where applicable
14 | - Redesigned UI to be white background, easier to see against cookie banners etc
15 |
16 | ### Screenreader wand
17 |
18 | - change the name of screenreader wand, which over-promises (screen readers often give other info about form fields, e.g. required). Don't want to suggest that Tota11y replaces testing with Assistive Technologies.
19 | - added exposure of value attribute on input type=submit fields (as that is what gets exposed and wasn't being reported).
20 | - Add value of aria-describedby attributes as that is also passed to AT, especially as [hints/ instructions on form fields](https://www.tpgi.com/using-aria-describedby-to-provide-helpful-form-hints/).
21 |
22 | ### Contrast checker
23 |
24 | - stop contrast checker grumbling about transparent (therefore, invisible) text, eg on Amazon, Guardian.
25 | - don't check text 'visually hidden' using the common [clip pattern](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/) which we use in Babylon. (It's a very naive test).
26 | - Correct calculation of contrast ratio in the contrast module to take account of boldness of text and not just rely on font-size. (Thanks Mozilla dev tools!). Added MPL license.
27 |
28 | ### Alt text checker
29 |
30 | Tweaked img/alt module to ask users to check accuracy of alt text (rather than perhaps falsely-reassure that presence of alt text is actually useful or related to the image)
31 |
32 | ### Empty elements plugin added
33 |
34 | - Add tests for empty nav, header, main, aside, footer, figcaption elements These could be announced to screen reader users (but will be empty) and justifiably make people grumpy.
35 | - Empty p and multiple br elements give a warning, as they may indicate shonky CSS but aren't a disaster for a11y.
36 |
37 | ### Title attributes plugin added
38 |
39 | New Titles module to show missing titles on iframes (error), and warnings for superfluous titles on other things erroneously put there to placate the false idols of Search Engine Optimists (see [The Trials and Tribulations of the Title Attribute](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/))
40 |
41 | ### Landmarks and roles plugin
42 |
43 | Added functionality to expose HTML5 landmarks (footer, header etc, shown in CAPITALS) and ARIA roles that have been explicitly set (but not those that are implicit, because that's not as useful for diagnosing coder errors). And it's hard to deduce them as the platform doesn't have a getComputedRole method, which is criminal, but there we are.
44 |
45 | ## v 1.3.0 adds Focus order plugin
46 |
47 | This plugin exposes elements that naturally take focus, or have a tabindex applied to make them focussable. Basically, if you have a pseudo-button or similar control made out of divs and JS and it is not highlighted, you have a problem.
48 |
49 | Guess at the tab order (not guaranteed due to (https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex)[under-specification of tabindex], different browser behaviours, and also clickable things in iframes). Verify any weirdness by simply advancing through the page with the 'tab' key.
50 |
51 | Thanks to flame-haired FOSS Adonis (https://kryogenix.org/)[Stuart Langridge] for help with some jQuery.
52 |
53 | ## Development
54 |
55 | Want to contribute to tota11y? Spiffing! Run the following in your terminal:
56 |
57 | ```bash
58 | git clone https://github.com/babylonhealth/Tota11y.git
59 | cd Tota11y/
60 | npm install
61 | ```
62 |
63 | ## Architecture Overview
64 |
65 | Most of the functionality in tota11y comes from its **plugins**. Each plugin
66 | gets its own directory in [`plugins/`](https://github.com/babylonhealth/Tota11y/tree/master/plugins) and maintains its own JavaScript, CSS,
67 | and even handlebars. [Here's what the simple LandmarksPlugin looks like](https://github.com/babylonhealth/Tota11y/blob/master/plugins/landmarks/index.js).
68 |
69 | [`plugins/shared/`](https://github.com/babylonhealth/Tota11y/tree/master/plugins/shared) contains a variety of shared utilities for the plugins, namely the [info-panel](https://github.com/babylonhealth/Tota11y/tree/master/plugins/shared/info-panel) and [annotate](https://github.com/babylonhealth/Tota11y/tree/master/plugins/shared/annotate) modules, which are used to report accessibility violations on the screen.
70 |
71 | [`index.js`](https://github.com/babylonhealth/Tota11y/blob/master/index.js) brings it all together.
72 |
73 | tota11y uses a variety of technologies, including [jQuery](https://jquery.com/), [webpack](https://webpack.github.io/), [babel](https://babeljs.io/), and [JSX](https://facebook.github.io/jsx/). **There's no need to know all (or any!) of these to contribute to tota11y, but we hope tota11y is a good place to learn something new and interesting.**
74 |
75 |
76 | ## Building
77 |
78 | To create a development build as the test server uses:
79 |
80 | ```bash
81 | npm run build:dev
82 | ```
83 |
84 | To create a production build, with minified and unminified output:
85 |
86 | ```bash
87 | npm run build:prod
88 | ```
89 | Be sure to cross your fingers and run thrice, widdershins, around your computer to discourage interference by mischievous spirits such as Puck, Robin Goodfellow or Sly Barry.
90 |
91 | The JS builds will be in the dists folder. The bookmarklet pulls in the minified version.
92 |
93 | ## Community Examples
94 | Want to integrate tota11y into your site, but don't know where to start? Here are some examples from the tota11y community to inspire you:
95 | * [azemetre/webpack-react-typescript-project](https://github.com/azemetre/tota11y-webpack-react-typescript-example) shows how to integrate tota11y into a webpack build for a React + TypeScript project.
96 |
97 | ## Special thanks
98 |
99 | Many of tota11y's features come straight from [Google Chrome's Accessibility Developer Tools](https://github.com/GoogleChrome/accessibility-developer-tools). Some of the logic for the Babylon revamp of the contrast checker (specifically, deciding if bold text is 'large' enough to need a 3:1 contrast ratio rather than 4.5:1) is adapted from [Mozilla dev tools](https://searchfox.org/mozilla-central/source/devtools/shared/accessibility.js#23), under the MPL2 license.
100 |
101 | ## License
102 |
103 | Tota11y is licensed under the [MIT AND MPL-2.0 AND Apache-2.0](/LICENSE.txt).
104 |
105 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Tota11y! at Babylon
4 |
8 |
Tota11y! at Babylon
9 |
An accessibility visualization toolkit.
10 |
Drag this link to your bookmarks bar:
11 |
12 | Tota11y!
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The entry point for tota11y.
3 | *
4 | * Builds and mounts the toolbar.
5 | */
6 |
7 | // Require the base tota11y styles right away so they can be overwritten
8 | require('./less/tota11y.less')
9 |
10 | const $ = require('jquery')
11 |
12 | const plugins = require('./plugins')
13 | const logoTemplate = require('./templates/logo.handlebars')
14 |
15 | // Chrome Accessibility Developer Tools - required once as a global
16 | require('script-loader!./node_modules/accessibility-developer-tools/dist/js/axs_testing.js')
17 |
18 | class Toolbar {
19 | constructor () {
20 | this.activePlugin = null
21 | }
22 |
23 | /**
24 | * Manages the state of the toolbar when a plugin is clicked, and toggles
25 | * the appropriate plugins on and off.
26 | */
27 | handlePluginClick (plugin) {
28 | // If the plugin was already selected, toggle it off
29 | if (plugin === this.activePlugin) {
30 | plugin.deactivate()
31 | this.activePlugin = null
32 | } else {
33 | // Deactivate the active plugin if there is one
34 | if (this.activePlugin) {
35 | this.activePlugin.deactivate()
36 | }
37 |
38 | // Activate the selected plugin
39 | plugin.activate()
40 | this.activePlugin = plugin
41 | }
42 | }
43 |
44 | /**
45 | * Renders the toolbar and appends it to the specified element.
46 | */
47 | appendTo ($el) {
48 | let $logo = $(logoTemplate())
49 | let $toolbar
50 |
51 | let $defaultPlugins = plugins.default.map(Plugin => {
52 | // eslint-disable-line no-unused-vars
53 | return
54 | })
55 |
56 | let $experimentalPlugins = null
57 | if (plugins.experimental.length) {
58 | $experimentalPlugins = (
59 |
35 | If the image is decorative and does not convey any information to the
36 | surrounding content, however, you may leave this "alt" attribute
37 | empty. See{" "}
38 |
43 | DNA guidance on text descriptions
44 |
45 | .
46 |
3 | The color combination
4 | {{fgColorHex}}/{{bgColorHex}}
5 | has a contrast ratio of {{contrastRatio}}, which is not
6 | sufficient. At this size, you will need a ratio of at least
7 | {{requiredRatio}}.
8 |
9 |
10 |
11 | Consider using the following foreground/background combination:
12 |
41 |
--------------------------------------------------------------------------------
/plugins/contrast/error-title.handlebars:
--------------------------------------------------------------------------------
1 | Insufficient contrast ratio ({{contrastRatio}} < {{requiredRatio}})
2 |
3 |
4 |
5 | /
6 |
7 |
8 |
--------------------------------------------------------------------------------
/plugins/contrast/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to label different levels of contrast on the page, and highlight
3 | * those with poor contrast while suggesting alternatives.
4 | */
5 |
6 | let $ = require("jquery");
7 | let Plugin = require("../base");
8 | let annotate = require("../shared/annotate")("contrast");
9 |
10 | let titleTemplate = require("./error-title.handlebars");
11 | let descriptionTemplate = require("./error-description.handlebars");
12 |
13 | require("./style.less");
14 |
15 | class ContrastPlugin extends Plugin {
16 | constructor() {
17 | super();
18 | // List of original colors for elements with insufficient contrast.
19 | // Used to restore original colors in cleanup.
20 | this.preservedColors = [];
21 | }
22 |
23 | getTitle() {
24 | return "Contrast";
25 | }
26 |
27 | getDescription() {
28 | return "Labels elements with insufficient contrast";
29 | }
30 |
31 | addError({ style, fgColor, bgColor, contrastRatio, requiredRatio }, el) {
32 | // Suggest colors at an "AA" level
33 | let suggestedColors = axs.color.suggestColors(bgColor, fgColor, {
34 | AA: requiredRatio,
35 | }).AA;
36 |
37 | let templateData = {
38 | fgColorHex: axs.color.colorToString(fgColor),
39 | bgColorHex: axs.color.colorToString(bgColor),
40 | contrastRatio: contrastRatio,
41 | requiredRatio: requiredRatio,
42 | suggestedFgColorHex: suggestedColors.fg,
43 | suggestedBgColorHex: suggestedColors.bg,
44 | suggestedColorsRatio: suggestedColors.contrast,
45 | };
46 |
47 | // Add click handler to preview checkbox
48 | let $description = $(descriptionTemplate(templateData));
49 | let originalFgColor = style.color;
50 | let originalBgColor = style.backgroundColor;
51 |
52 | $description.find(".preview-contrast-fix").click((e) => {
53 | if ($(e.target).prop("checked")) {
54 | // Set suggested colors
55 | $(el).css("color", suggestedColors.fg);
56 | $(el).css("background-color", suggestedColors.bg);
57 | } else {
58 | // Set original colors
59 | $(el).css("color", originalFgColor);
60 | $(el).css("background-color", originalBgColor);
61 | }
62 | });
63 |
64 | return this.error(titleTemplate(templateData), $description, $(el));
65 | }
66 |
67 | run() {
68 | // A map of fg/bg color pairs that we have already seen to the error
69 | // entry currently present in the info panel
70 | let combinations = {};
71 |
72 | $("*").each((i, el) => {
73 | // Only check elements with a direct text descendant
74 | if (!axs.properties.hasDirectTextDescendant(el)) {
75 | return;
76 | }
77 |
78 | // Ignore elements that are part of the tota11y UI
79 | if ($(el).parents(".tota11y").length > 0) {
80 | return;
81 | }
82 |
83 | // Ignore invisible elements
84 |
85 | if (
86 | axs.utils.elementIsTransparent(el) ||
87 | axs.utils.elementHasZeroArea(el)
88 | ) {
89 | return;
90 | }
91 |
92 | let style = getComputedStyle(el);
93 |
94 | // ignore 'visually hidden' things, eg https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
95 |
96 | const visuallyHidden =
97 | style.getPropertyValue("clip") == "rect(0px, 0px, 0px, 0px)" && // even when zero, needs units
98 | style.getPropertyValue("clip-path") == "inset(50%)" &&
99 | style.getPropertyValue("height") == "1px" &&
100 | style.getPropertyValue("overflow") == "hidden" &&
101 | style.getPropertyValue("position") == "absolute" &&
102 | style.getPropertyValue("white-space") == "nowrap" &&
103 | style.getPropertyValue("width") == "1px";
104 |
105 | // Also ignore text with opacity:0 as found on guardian.co.uk, amazon.co.uk
106 |
107 | if (visuallyHidden || style.getPropertyValue("opacity") == "0") return;
108 |
109 | //
110 |
111 | let bgColor = axs.utils.getBgColor(style, el);
112 | let fgColor = axs.utils.getFgColor(style, el, bgColor);
113 |
114 | // Previous test used axs.utils.isLargeFont, which doesn't take bold text into account. This stolen from Mozilla under MPL 2.0 license https://searchfox.org/mozilla-central/source/devtools/shared/accessibility.js#23
115 |
116 | const isBoldText =
117 | parseInt(style.getPropertyValue("font-weight"), 10) >= 600;
118 | const size = parseFloat(style.getPropertyValue("font-size"));
119 |
120 | const LARGE_TEXT = {
121 | // CSS pixel value (constant) that corresponds to 14 point text size which defines large text when font text is bold (font weight is greater than or equal to 600).
122 | BOLD_LARGE_TEXT_MIN_PIXELS: 18.66,
123 | // CSS pixel value (constant) that corresponds to 18 point text size which defines large text for normal text (e.g. not bold).
124 | LARGE_TEXT_MIN_PIXELS: 24,
125 | };
126 |
127 | const isLargeText =
128 | size >=
129 | (isBoldText
130 | ? LARGE_TEXT.BOLD_LARGE_TEXT_MIN_PIXELS
131 | : LARGE_TEXT.LARGE_TEXT_MIN_PIXELS);
132 |
133 | // end Moz bit, need to replace the axs.utils below TODO
134 |
135 | // Calculate required ratio based on size
136 | // Using strings to prevent rounding
137 | // let requiredRatio = axs.utils.isLargeFont(style) ?
138 | // 3.0 : 4.5;
139 |
140 | let requiredRatio = isLargeText ? 3.0 : 4.5;
141 |
142 | let contrastRatio = axs.color
143 | .calculateContrastRatio(fgColor, bgColor)
144 | .toFixed(2);
145 |
146 | // console.log(contrastRatio+" / reqd="+ requiredRatio);
147 |
148 | // Build a key for our `combinations` map and report the color
149 | // if we have not seen it yet
150 | let key =
151 | axs.color.colorToString(fgColor) +
152 | "/" +
153 | axs.color.colorToString(bgColor) +
154 | "/" +
155 | requiredRatio;
156 |
157 | if (contrastRatio > requiredRatio) {
158 | // For acceptable contrast values, we don't show ratios if
159 | // they have been presented already
160 | if (!combinations[key]) {
161 | annotate
162 | .label($(el), contrastRatio)
163 | .addClass("tota11y-label-success");
164 |
165 | // Add the key to the combinations map. We don't have an
166 | // error to associate it with, so we'll just give it the
167 | // value of `true`.
168 | combinations[key] = true;
169 | }
170 | } else {
171 | if (!combinations[key]) {
172 | // We do not show duplicates in the errors panel, however,
173 | // to keep the output from being overwhelming
174 | let error = this.addError(
175 | {
176 | style,
177 | fgColor,
178 | bgColor,
179 | contrastRatio,
180 | requiredRatio,
181 | },
182 | el
183 | );
184 |
185 | // Save original color so it can be restored on cleanup.
186 | this.preservedColors.push({
187 | $el: $(el),
188 | fg: style.color,
189 | bg: style.backgroundColor,
190 | });
191 |
192 | combinations[key] = error;
193 | }
194 |
195 | // We display errors multiple times for emphasis. Each error
196 | // will point back to the entry in the info panel for that
197 | // particular color combination.
198 | //
199 | // TODO: The error entry in the info panel will only highlight
200 | // the first element with that color combination
201 | annotate.errorLabel(
202 | $(el),
203 | contrastRatio,
204 | "This contrast is insufficient at this size.",
205 | combinations[key]
206 | );
207 | }
208 | });
209 | }
210 |
211 | cleanup() {
212 | // Set all elements to original color
213 | this.preservedColors.forEach((entry) => {
214 | entry.$el.css("color", entry.fg);
215 | entry.$el.css("background-color", entry.bg);
216 | });
217 |
218 | annotate.removeAll();
219 | }
220 | }
221 |
222 | module.exports = ContrastPlugin;
223 |
--------------------------------------------------------------------------------
/plugins/contrast/style.less:
--------------------------------------------------------------------------------
1 | .tota11y-swatches {
2 | margin-left: 5px;
3 | margin-right: 5px;
4 | position: relative;
5 | top: 1px;
6 | }
7 |
8 | .tota11y-swatch {
9 | @size: 12px;
10 | border: 1px solid #000;
11 | display: inline-block;
12 | height: @size;
13 | width: @size;
14 | }
15 |
16 | .tota11y-contrast-suggestion {
17 | margin: 0 0 15px 15px;
18 | }
19 |
20 | .tota11y-color-hexes {
21 | font-family: monospace;
22 | }
23 |
--------------------------------------------------------------------------------
/plugins/empty/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to identify empty elements, esp those to fake styling
3 | *
, ,
, ,
and
4 | * do we need to strip out too? TODO
5 | *
6 | * TODO: add tests on dummy index page for these
7 | */
8 |
9 |
10 | let $ = require("jquery");
11 | let Plugin = require("../base");
12 | let annotate = require("../shared/annotate")("landmarks");
13 |
14 |
15 | let outlineItemTemplate = require("./index.js");
16 | require("./index.js");
17 |
18 |
19 | class EmptyElementsPlugin extends Plugin {
20 | getTitle() {
21 | return "Empty elements";
22 | }
23 |
24 | getDescription() {
25 | return `
26 | Highlights empty elements that should be removed
27 | `;
28 | }
29 | run() {
30 | $("h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, li:empty, ol:empty, ul:empty, nav:empty, header:empty, main:empty, aside:empty, footer:empty, figcaption:empty").each(function () {
31 | $(this).append("EMPTY ELEMENT !!");
32 | $(this).addClass("tota11y-empty"); // so we can find them again
33 | annotate.errorLabel($(this),"Empty!", $(this).prop("tagName"));
34 | });
35 |
36 | $("p:empty, br+br").each(function () {
37 | $(this).addClass("tota11y-empty"); // so we can find them again
38 | annotate.label($(this), $(this).prop("tagName"));
39 | });
40 |
41 |
42 | }
43 |
44 | cleanup() {
45 | annotate.removeAll();
46 | $(".tota11y-empty").each(function () {
47 | $(this).empty();
48 | });
49 | }
50 | }
51 |
52 | module.exports = EmptyElementsPlugin;
53 |
--------------------------------------------------------------------------------
/plugins/focus/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to identify empty elements, esp those to fake styling
3 | *
, ,
, ,
and
4 | * do we need to strip out too? TODO
5 | *
6 | * TODO: add tests on dummy index page for these
7 | */
8 |
9 | let $ = require('jquery')
10 | let Plugin = require('../base')
11 | let annotate = require("../shared/annotate")("focus");
12 |
13 | class FocusPlugin extends Plugin {
14 | getTitle () {
15 | return 'Keyboard focus order'
16 | }
17 |
18 | getDescription () {
19 | return `Check all your clickable things can be reached by keyboard`
20 | }
21 | run () {
22 | // open any elements in case there are tabbables inside. Need to add class Tota11y opened
23 | Array.from(document.querySelectorAll("details")).forEach(x => {
24 | x.setAttribute("open", "open");
25 | x.classList.add("tota11y-opened");
26 | })
27 | var results = getTabbablesInOrder(document.querySelector('body'))
28 | let tota11y_dashboard = document.getElementById("tota11y-toolbar");
29 | results.forEach(function (element, index) {
30 | if (tota11y_dashboard.contains(element)) return; // exclude the tota11y dashboard itself!
31 | $(element).addClass("tota11y-focus")
32 | annotate.label($(element), 'Tab ' + index, $(element).prop('tagName'));
33 |
34 | $("iframe").each(function () {
35 | $(this).append("Check manually!");
36 | $(this).addClass("tota11y-empty"); // so we can find them again
37 | annotate.errorLabel($(this),"iframe - manual check required.");
38 | });
39 | })
40 |
41 | function getTabbablesInOrder (within) {
42 | /*
43 | get a list of all elements that can be tabbed to and which are descendants of "within"
44 | in tab order (that is, in order by tabindex, but assume that tabindexless tabbable
45 | elements have tabindex 0, which means "tab to me in DOM order")
46 | Note that we have to get all tabbables in the whole document (because tabindex
47 | is a document-wide number) and then filter at the end to those which are
48 | descendants of "within". By Stuart Langridge of kryogenix.org, il miglior fabbro.
49 | */
50 | var els = Array.prototype.slice
51 | .call(
52 | document.querySelectorAll('input,select,textarea,button,a,[tabindex], details')
53 | )
54 | .map(function (el) {
55 | if (el.hasAttribute('tabindex')) {
56 | var val = parseInt(el.getAttribute('tabindex'), 10)
57 | if (isNaN(val) || val < 0) return [el, -1] // invalid tabindex so it's not tabbable at all
58 | return [el, val]
59 | } else {
60 | // tabbable but doesn't have a tabindex, so pretend it has tabindex 0
61 | return [el, 0]
62 | }
63 | })
64 | var zero_els = els.filter(function (x) {
65 | return x[1] === 0
66 | })
67 | var tabindex_els = els
68 | .filter(function (x) {
69 | return x[1] !== 0 && x[1] != -1
70 | })
71 | .sort(function (a, b) {
72 | return a[1] - b[1]
73 | })
74 | // note that elements with -1 as tabindex are thrown away and not included!
75 |
76 | // now walk through tabindex_els in reverse order and insert them at that index
77 | // it is not clear whether, given an element with tabindex=7 and an element with tabindex=42,
78 | // whether we're supposed to insert the 42 first and then the 7 (thus bumping the 42 to 43)
79 | // or insert the 7 first and then the 42. We do it in reverse order, meaning that only
80 | // the lowest tabindex will actually be *correct*.
81 | for (var i = tabindex_els.length - 1; i >= 0; i--) {
82 | var el = tabindex_els[i][0]
83 | var idx = tabindex_els[i][1]
84 | zero_els.splice(idx - 1, 0, [el, idx]) // tabindex is 1-based; the position in the zero_els array is 0-based
85 | }
86 |
87 | var in_order = zero_els.map(function (x) {
88 | return x[0]
89 | })
90 |
91 | // now filter in_order to only include children of "within"
92 | return in_order.filter(function (el) {
93 | return within.contains(el)
94 | })
95 | }
96 | }
97 |
98 | cleanup () {
99 | annotate.removeAll()
100 | $('.tota11y-focus').each(function () {
101 | $(this).removeClass("tota11y-focus")
102 | })
103 | $('.tota11y-opened').each(function () {
104 | $(this).removeAttr("open").removeClass("tota11y-opened")
105 | })
106 | }
107 | }
108 |
109 | module.exports = FocusPlugin
110 |
--------------------------------------------------------------------------------
/plugins/headings/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to identify and validate heading tags (
,
, etc.)
3 | */
4 |
5 | let $ = require("jquery");
6 | let Plugin = require("../base");
7 | let annotate = require("../shared/annotate")("headings");
8 |
9 | let outlineItemTemplate = require("./outline-item.handlebars");
10 | require("./style.less");
11 |
12 | const ERRORS = {
13 | FIRST_NOT_H1(level) {
14 | return {
15 | title: "First heading is not an <h1>",
16 | description: `
17 |
18 | To give your page a proper structure for assistive
19 | technologies, lay out your headings
20 | beginning with an <h1>. We found an
21 | <h${level}> instead. See DNA guidance for Headings.
22 |
23 | `
24 | };
25 | },
26 |
27 | // This error is currently unused.
28 | //
29 | // The HTML5 outlining algorithm[1] enables the use of "sectioning roots"
30 | // to support multiple
tags when embedded inside of containers like
31 | // or . There are currently "no known implementations
32 | // of the outline algorithm in graphical browsers or assistive technology
33 | // user agents" [2], so we instead simply "use heading rank (h1-h6) to
34 | // convey document structure." [2].
35 | //
36 | // [1]: http://www.w3.org/html/wg/drafts/html/master/semantics.html#outline
37 | // [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#The_HTML5_Outline_Algorithm
38 | MULTIPLE_H1: {
39 | title: "<h1> used when one is already present"
40 | },
41 |
42 | // This error accepts two arguments to display a relevant error message
43 | NONCONSECUTIVE_HEADER(prevLevel, currLevel) {
44 | let _tag = (level) => `<h${level}>`;
45 | let description = `
46 |
47 |
This page contains an ${_tag(currLevel)} tag directly
48 | following an ${_tag(prevLevel)}. Reduce the gap in
49 | the heading level by upgrading this tag to an
50 | ${_tag(prevLevel+1)}`;
51 |
52 | // Suggest upgrading the tag to the same level as `prevLevel` iff
53 | // `prevLevel` is not 1
54 | if (prevLevel !== 1) {
55 | description += ` or ${_tag(prevLevel)}`;
56 | }
57 |
58 | description += ". See DNA guidance for Headings.
";
59 |
60 | return {
61 | title: `
62 | Nonconsecutive heading level used (h${prevLevel} →
63 | h${currLevel})
64 | `,
65 | description: description
66 | };
67 | }
68 | };
69 |
70 | class HeadingsPlugin extends Plugin {
71 | getTitle() {
72 | return "Headings";
73 | }
74 |
75 | getDescription() {
76 | return `
77 | Highlights headings (<h1>, <h2>, etc) and
78 | order violations
79 | `;
80 | }
81 |
82 | /**
83 | * Computes an outline of the page and reports any violations.
84 | */
85 | outline($headings) {
86 | let $items = [];
87 |
88 | let prevLevel;
89 | $headings.each((i, el) => {
90 | let $el = $(el);
91 | let level = +$el.prop("tagName").slice(1);
92 | let error;
93 |
94 | // Check for any violations
95 | // NOTE: These violations do not overlap, but as we add more, we
96 | // may want to separate the conditionals here to report multiple
97 | // errors on the same tag.
98 | if (i === 0 && level !== 1) {
99 | error = ERRORS.FIRST_NOT_H1(level); // eslint-disable-line new-cap
100 | } else if (prevLevel && level - prevLevel > 1) {
101 | error = ERRORS.NONCONSECUTIVE_HEADER(prevLevel, level); // eslint-disable-line new-cap
102 | }
103 |
104 | prevLevel = level;
105 |
106 | // Render the entry in the outline for the "Summary" tab
107 | let $item = $(outlineItemTemplate({
108 | level: level,
109 | text: $el.text()
110 | }));
111 |
112 | $items.push($item);
113 |
114 | // Highlight the heading element on hover
115 | annotate.toggleHighlight($el, $item);
116 |
117 | if (error) {
118 | // Register an error to the info panel
119 | let infoPanelError = this.error(
120 | error.title, $(error.description), $el);
121 |
122 | // Place an error label on the heading tag
123 | annotate.errorLabel(
124 | $el,
125 | $el.prop("tagName").toLowerCase(),
126 | error.title,
127 | infoPanelError);
128 |
129 | // Mark the summary item as red
130 | // Pretty hacky, since we're borrowing label styles for this
131 | // summary tab
132 | $item
133 | .find(".tota11y-heading-outline-level")
134 | .addClass("tota11y-label-error");
135 | } else {
136 | // Label the heading tag
137 | annotate.label($el).addClass("tota11y-label-success");
138 |
139 | // Mark the summary item as green
140 | $item
141 | .find(".tota11y-heading-outline-level")
142 | .addClass("tota11y-label-success");
143 | }
144 | });
145 |
146 | return $items;
147 | }
148 |
149 | run() {
150 | let $headings = $("h1, h2, h3, h4, h5, h6");
151 | // `this.outline` has the side-effect of also reporting violations
152 | let $items = this.outline($headings);
153 |
154 | if ($items.length) {
155 | let $outline = (
156 |
3 | The placeholder attribute is not guaranteed to be read by
4 | assistive technologies. It is better to include a proper label. See DNA guidelines on labels.
5 |
6 | {{/if}}
7 |
8 | {{#if id}}
9 |
10 | The simplest way to do so is by creating a <label>
11 | tag with a for attribute like so:
12 |
13 |
14 |
<label for="{{id}}">
15 | Label text here...
16 | </label>
17 | {{else}}
18 |
19 | You can give this element an id attribute and build a
20 | <label> with a corresponding for
21 | attribute like so:
22 |
23 |
28 | {{/if}}
29 |
--------------------------------------------------------------------------------
/plugins/labels/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to identify unlabeled inputs
3 | */
4 |
5 | let $ = require("jquery");
6 | let Plugin = require("../base");
7 | let annotate = require("../shared/annotate")("labels");
8 | let audit = require("../shared/audit");
9 |
10 | let errorTemplate = require("./error-template.handlebars");
11 |
12 | class LabelsPlugin extends Plugin {
13 | getTitle() {
14 | return "Labels";
15 | }
16 |
17 | getDescription() {
18 | return "Identifies inputs with missing labels";
19 | }
20 |
21 | errorMessage($el) {
22 | return errorTemplate({
23 | placeholder: $el.attr("placeholder"),
24 | id: $el.attr("id"),
25 | tagName: $el.prop("tagName").toLowerCase()
26 | });
27 | }
28 |
29 | run() {
30 | let {result, elements} = audit("controlsWithoutLabel");
31 |
32 | if (result === "FAIL") {
33 | elements.forEach((element) => {
34 | let $el = $(element);
35 | let title = "Input is missing a label";
36 |
37 | // Place an error label on the element and register it as an
38 | // error in the info panel
39 | let entry = this.error(title, $(this.errorMessage($el)), $el);
40 | annotate.errorLabel($el, "", title, entry);
41 | });
42 | }
43 | }
44 |
45 | cleanup() {
46 | annotate.removeAll();
47 | }
48 | }
49 |
50 | module.exports = LabelsPlugin;
51 |
--------------------------------------------------------------------------------
/plugins/labels/style.less:
--------------------------------------------------------------------------------
1 | .tota11y-unlabeled-error {
2 | padding: 5px;
3 | }
4 |
--------------------------------------------------------------------------------
/plugins/landmarks/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to label all ARIA landmark roles
3 | */
4 |
5 | let $ = require("jquery");
6 | let Plugin = require("../base");
7 | let annotate = require("../shared/annotate")("landmarks");
8 | require("./style.less");
9 |
10 | class LandmarksPlugin extends Plugin {
11 | getTitle() {
12 | return "Landmarks, ARIA roles";
13 | }
14 |
15 | getDescription() {
16 | return "Labels defined ARIA roles, outlines HTML landmarks";
17 | }
18 |
19 | run() {
20 | $("[role]:not(.tota11y-toolbar,.tota11y-plugin)").each(function () {
21 | annotate.label($(this), $(this).attr("role"));
22 | });
23 |
24 | $("header, footer, nav, aside, main").each(function () {
25 | annotate.label($(this), $(this).prop("tagName"));
26 | $(this).addClass("tota11y-element-outlined");
27 | });
28 | }
29 |
30 | cleanup() {
31 | annotate.removeAll();
32 |
33 | $(".tota11y-element-outlined").each(function () {
34 | $(this).removeClass("tota11y-element-outlined");
35 | });
36 | }
37 | }
38 |
39 | module.exports = LandmarksPlugin;
40 |
--------------------------------------------------------------------------------
/plugins/landmarks/style.less:
--------------------------------------------------------------------------------
1 |
2 | .tota11y-element-outlined {outline:3px dashed red}
3 |
--------------------------------------------------------------------------------
/plugins/link-text/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin to identify unclear link text such as "more" and "click here,"
3 | * which can make for a bad experience when using a screen reader
4 | */
5 |
6 | let $ = require("jquery");
7 | let Plugin = require("../base");
8 | let annotate = require("../shared/annotate")("link-text");
9 |
10 | class LinkTextPlugin extends Plugin {
11 | getTitle() {
12 | return "Link text";
13 | }
14 |
15 | getDescription() {
16 | return `
17 | Identifies links that may be confusing because they lack context
18 | `;
19 | }
20 |
21 | /**
22 | * Slightly modified unclear text checking that has been refactored into
23 | * a single method to be called with arbitrary strings.
24 | *
25 | * Original: https://github.com/GoogleChrome/accessibility-developer-tools/blob/9183b21cb0a02f5f04928f5cb7cb339b6bbc9ff8/src/audits/LinkWithUnclearPurpose.js#L55-67
26 | */
27 | isDescriptiveText(textContent) {
28 | // Handle when the text is undefined or null
29 | if (typeof textContent === "undefined" || textContent === null) {
30 | return false;
31 | }
32 |
33 | let stopWords = [
34 | "click", "tap", "go", "here", "learn", "more", "this", "page",
35 | "link"
36 | ];
37 | // Generate a regex to match each of the stopWords
38 | let stopWordsRE = new RegExp(`\\b(${stopWords.join("|")})\\b`, "ig");
39 |
40 | textContent = textContent
41 | // Strip leading non-alphabetical characters
42 | .replace(/[^a-zA-Z ]/g, "")
43 | // Remove the stopWords
44 | .replace(stopWordsRE, "");
45 |
46 | // Return whether or not there is any text left
47 | return textContent.trim() !== "";
48 | }
49 |
50 | reportError($el, $description, content) {
51 | let entry = this.error("Link text is unclear", $description, $el);
52 | annotate.errorLabel($el, "",
53 | `Link text "${content}" is unclear`, entry);
54 | }
55 |
56 | /**
57 | * We can call linkWithUnclearPurpose from ADT directly once the following
58 | * issue has been resolved. There is some extra code here until then.
59 | * https://github.com/GoogleChrome/accessibility-developer-tools/issues/156
60 | */
61 | run() {
62 | $("a").each((i, el) => {
63 | let $el = $(el);
64 |
65 | // Ignore the tota11y UI
66 | if ($el.parents(".tota11y").length) {
67 | return;
68 | }
69 |
70 | // Ignore hidden links
71 | if (axs.utils.isElementOrAncestorHidden(el)) {
72 | return;
73 | }
74 |
75 | // Extract the text alternatives for this element: including
76 | // its text content, aria-label/labelledby, and alt text for
77 | // images.
78 | //
79 | // TODO: Read from `alts` to determine where the text is coming
80 | // from (for tailored error messages)
81 | let alts = {};
82 | let extractedText = axs.properties.findTextAlternatives(
83 | el, alts);
84 |
85 | if (!this.isDescriptiveText(extractedText)) {
86 | let $description = (
87 |
88 | The text
89 | {" "}
90 | "{extractedText}"
91 | {" "}
92 | is unclear without context and may be confusing. See DNA guidance on link text. Consider rearranging the
93 | {" "}
94 | {"<a></a>"}
95 | {" "}
96 | tags or using aria-label.
97 |
22 |
23 |
--------------------------------------------------------------------------------
/plugins/shared/annotate/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Utility functions to annotate particular site elements.
3 | *
4 | * Annotations are namespaced, meaning you would normally include this
5 | * package like so:
6 | *
7 | * let annotate = require("./annotate")("headers");
8 | *
9 | * This allows plugins to easily maintain their annotations, rather than
10 | * keeping track of an extra class name elsewhere.
11 | */
12 |
13 | let $ = require("jquery");
14 |
15 | let errorLabelTemplate = require("./error-label.handlebars");
16 | require("./style.less");
17 |
18 | // For very small (or zero-area) elements, highlights are not very useful.
19 | // This constant declares highlights to be at least `MIN_HIGHLIGHT_SIZE` tall
20 | // and across.
21 | const MIN_HIGHLIGHT_SIZE = 25;
22 |
23 | // Polyfill fallback for IE < 10
24 | window.requestAnimationFrame = window.requestAnimationFrame ||
25 | function(callback) {
26 | window.setTimeout(callback, 16);
27 | };
28 |
29 | module.exports = (namespace) => {
30 | // The class that will be applied to any annotation generated in this
31 | // namespace
32 | const ANNOTATION_CLASS = "tota11y-annotation-" + namespace;
33 |
34 | // A queue of {$annotation, $parent}'s that is populated by
35 | // `createAnnotation` and emptied by the `render()` method.
36 | //
37 | // Annotations are queued to reduce reflows.
38 | let queue = [];
39 |
40 | // Register a new annotation to a given jQuery element
41 | let createAnnotation = ($el, className) => {
42 | // Create a position an annotation relative to its offset parent.
43 | // We also store the element its annotation so we can reposition when
44 | // the window resizes.
45 | let $annotation = $("
")
46 | .addClass("tota11y") // tota11y base class for styling
47 | .addClass(ANNOTATION_CLASS)
48 | .addClass(className)
49 | .css($el.position())
50 | .data({$el});
51 |
52 | // TODO: We can invoke a requestAnimationFrame(render) here to limit
53 | // the amount of times we run that timer
54 |
55 | // Append an object to the queue. We'll add the annotation to the DOM
56 | // later to reduce reflows.
57 | queue.push({
58 | $annotation: $annotation,
59 | $parent: $el.offsetParent()
60 | });
61 |
62 | return $annotation;
63 | };
64 |
65 | // To maintain a high framerate, we'll only render `RENDER_CHUNK_SIZE`
66 | // annotations per frame.
67 | //
68 | // NOTE: A value of "20" consistently hits 60fps on facebook.com
69 | const RENDER_CHUNK_SIZE = 20;
70 |
71 | // Mount all annotations to the DOM in sequence. This is done by
72 | // picking items off the queue, where each item consists of the
73 | // annotation and the node to which we'll append it.
74 | (function loop() {
75 | for (let i = 0; queue.length > 0 && i < RENDER_CHUNK_SIZE; i++) {
76 | let item = queue.shift();
77 | item.$parent.append(item.$annotation);
78 | }
79 |
80 | window.requestAnimationFrame(loop);
81 | })();
82 |
83 | // Handle resizes by repositioning all annotations in bulk
84 | $(window).resize(() => {
85 | let $annotations = $("." + ANNOTATION_CLASS);
86 |
87 | // Record the position of each annotation's corresponding element to
88 | // batch measurements
89 | let positions = $annotations.map((i, el) => {
90 | return $(el).data("$el").position();
91 | });
92 |
93 | // Reposition each annotation (batching invalidations)
94 | $annotations.each((i, el) => {
95 | $(el).css({
96 | top: positions[i].top,
97 | left: positions[i].left
98 | });
99 | });
100 | });
101 |
102 | return {
103 | // Places a small label in the top left corner of a given jQuery
104 | // element. By default, this label contains the element's tagName.
105 | label($el, text=$el.prop("tagName").toLowerCase()) {
106 | let $label = createAnnotation($el, "tota11y-label");
107 | return $label.html(text);
108 | },
109 |
110 | // Places a special label on an element that, when hovered, displays
111 | // an expanded error message.
112 | //
113 | // This method also accepts an optional `errorEntry`, which
114 | // corresponds to the object returned from `InfoPanel.addError`. This
115 | // object will contain a "show()" method when the info panel is
116 | // rendered, allowing us to externally open the entry in the info
117 | // panel corresponding to this error.
118 | errorLabel($el, text, expanded, errorEntry) {
119 | let $innerHtml = $(errorLabelTemplate({
120 | text: text,
121 | detail: expanded,
122 | hasErrorEntry: !!errorEntry
123 | }));
124 |
125 | if (errorEntry) {
126 | $innerHtml.find(".tota11y-label-link").click((e) => {
127 | e.preventDefault();
128 | e.stopPropagation();
129 | errorEntry.show();
130 | });
131 |
132 | $innerHtml.hover(() => {
133 | errorEntry.$trigger.addClass("trigger-highlight");
134 | }, () => {
135 | errorEntry.$trigger.removeClass("trigger-highlight");
136 | });
137 | }
138 |
139 | return this.label($el)
140 | .addClass("tota11y-label-error")
141 | .html($innerHtml);
142 | },
143 |
144 | // Highlights a given jQuery element by placing a translucent
145 | // rectangle directly over it
146 | highlight($el) {
147 | let $highlight = createAnnotation($el, "tota11y-highlight");
148 | return $highlight.css({
149 | // include margins
150 | width: Math.max(MIN_HIGHLIGHT_SIZE, $el.outerWidth(true)),
151 | height: Math.max(MIN_HIGHLIGHT_SIZE, $el.outerHeight(true))
152 | });
153 | },
154 |
155 | // Toggles a highlight on a given jQuery element `$el` when `$trigger`
156 | // is hovered (mouseenter/mouseleave) or focused (focus/blur)
157 | toggleHighlight($el, $trigger) {
158 | let $highlight;
159 |
160 | $trigger.on("mouseenter focus", () => {
161 | if ($highlight) {
162 | $highlight.remove();
163 | }
164 |
165 | $highlight = this.highlight($el);
166 | });
167 |
168 | $trigger.on("mouseleave blur", () => {
169 | if ($highlight) {
170 | $highlight.remove();
171 | $highlight = null;
172 | }
173 | });
174 | },
175 |
176 | hide() {
177 | $(".tota11y.tota11y-label").hide();
178 | },
179 |
180 | show() {
181 | $(".tota11y.tota11y-label").show();
182 | },
183 |
184 | removeAll() {
185 | // Remove all annotations
186 | $("." + ANNOTATION_CLASS).remove();
187 | }
188 | };
189 | };
190 |
--------------------------------------------------------------------------------
/plugins/shared/annotate/style.less:
--------------------------------------------------------------------------------
1 | @import "../../../less/variables.less";
2 |
3 | @tagPadding: 3px;
4 | @tooltipPadding: 10px;
5 | @fontSize: 12px;
6 | @expandedDescriptionWidth: 300px;
7 |
8 | .tota11y-label {
9 | background-color: rgb(255, 232, 0);
10 | border: 1px solid rgba(0, 0, 0, 0.1);
11 | cursor: default;
12 | padding: @tagPadding;
13 | position: absolute;
14 | z-index: @z-index--labels;
15 |
16 | &-error {
17 | background-color: rgb(255, 174, 174);
18 |
19 | &-icon {
20 | display: block;
21 | float: left;
22 | margin-right: 3px;
23 | width: @fontSize;
24 | }
25 | }
26 |
27 | &-success {
28 | background-color: #b9eda9;
29 | }
30 |
31 | &-warning {
32 | background-color: rgb(255, 232, 0);
33 | }
34 |
35 | // Label font styles
36 | &, &-text, &-detail, &-link, &-help {
37 | color: @darkGray;
38 | font-size: @fontSize;
39 | }
40 |
41 | &-text {
42 | float: left;
43 | }
44 |
45 | &-detail {
46 | clear: both;
47 | display: none;
48 | max-width: @expandedDescriptionWidth;
49 | }
50 | &:hover &-detail {
51 | display: block;
52 | }
53 |
54 | &-help {
55 | float: left;
56 | margin-left: 5px;
57 | }
58 |
59 | &-link {
60 | &:hover, &:focus {
61 | opacity: 0.6;
62 | text-decoration: underline;
63 | }
64 | }
65 | }
66 |
67 | .tota11y-highlight {
68 | background-color: @highlightColor;
69 | pointer-events: none;
70 | position: absolute;
71 | z-index: @z-index--highlights;
72 | }
73 |
--------------------------------------------------------------------------------
/plugins/shared/audit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Abstractions for how we use Accessibility Developer Tools
3 | */
4 |
5 | function allRuleNames() {
6 | return axs.AuditRules.getRules().map(rule => rule.name);
7 | }
8 |
9 | // Creates an audit configuration that whitelists a single rule and limits the
10 | // amount of tests to run
11 | function createWhitelist(ruleName) {
12 | var config = new axs.AuditConfiguration();
13 | config.showUnsupportedRulesWarning = false;
14 |
15 | // Ignore elements that are part of the toolbar
16 | config.ignoreSelectors(ruleName, ".tota11y *");
17 |
18 | allRuleNames().forEach((name) => {
19 | if (name !== ruleName) {
20 | config.ignoreSelectors(name, "*");
21 | }
22 | });
23 |
24 | return config;
25 | }
26 |
27 | /*eslint-disable*/
28 | // Patch collectMatchingElements to match
29 | // https://github.com/GoogleChrome/accessibility-developer-tools/blob/0062f77258eb4eb8508dad3c92fd2df63c2381fc/src/js/AuditRule.js
30 | //
31 | // TODO: Remove once https://github.com/GoogleChrome/accessibility-developer-tools/commit/df400939addf6dbc5f2a9e1d52a6219f356f82d8
32 | // makes its way to npm
33 | function patchCollectMatchingElements() {
34 | /**
35 | * Recursively collect elements which match |matcher| into |collection|,
36 | * starting at |node|.
37 | * @param {Node} node
38 | * @param {function(Element): boolean} matcher
39 | * @param {Array.} collection
40 | * @param {ShadowRoot=} opt_shadowRoot The nearest ShadowRoot ancestor, if any.
41 | */
42 | axs.AuditRule.collectMatchingElements = function(node, matcher, collection,
43 | opt_shadowRoot) {
44 | if (node.nodeType === Node.ELEMENT_NODE)
45 | var element = /** @type {Element} */ (node);
46 |
47 | if (element && matcher.call(null, element))
48 | collection.push(element);
49 |
50 | // Descend into node:
51 | // If it has a ShadowRoot, ignore all child elements - these will be picked
52 | // up by the or elements. Descend straight into the
53 | // ShadowRoot.
54 | if (element) {
55 | // NOTE: grunt qunit DOES NOT support Shadow DOM, so if changing this
56 | // code, be sure to run the tests in the browser before committing.
57 | var shadowRoot = element.shadowRoot || element.webkitShadowRoot;
58 | if (shadowRoot) {
59 | axs.AuditRule.collectMatchingElements(shadowRoot,
60 | matcher,
61 | collection,
62 | shadowRoot);
63 | return;
64 | }
65 | }
66 |
67 | // If it is a element, descend into distributed elements - descend
68 | // into distributed elements - these are elements from outside the shadow
69 | // root which are rendered inside the shadow DOM.
70 | if (element && element.localName == 'content') {
71 | var content = /** @type {HTMLContentElement} */ (element);
72 | var distributedNodes = content.getDistributedNodes();
73 | for (var i = 0; i < distributedNodes.length; i++) {
74 | axs.AuditRule.collectMatchingElements(distributedNodes[i],
75 | matcher,
76 | collection,
77 | opt_shadowRoot);
78 | }
79 | return;
80 | }
81 |
82 | // If it is a element, descend into the olderShadowRoot of the
83 | // current ShadowRoot.
84 | if (element && element.localName == 'shadow') {
85 | var shadow = /** @type {HTMLShadowElement} */ (element);
86 | if (!opt_shadowRoot) {
87 | console.warn('ShadowRoot not provided for', element);
88 | } else {
89 | var distributedNodes = shadow.getDistributedNodes();
90 | for (var i = 0; i < distributedNodes.length; i++) {
91 | axs.AuditRule.collectMatchingElements(distributedNodes[i],
92 | matcher,
93 | collection,
94 | opt_shadowRoot);
95 | }
96 | }
97 | }
98 |
99 | // If it is neither the parent of a ShadowRoot, a element, nor
100 | // a element recurse normally.
101 | var child = node.firstChild;
102 | while (child != null) {
103 | axs.AuditRule.collectMatchingElements(child,
104 | matcher,
105 | collection,
106 | opt_shadowRoot);
107 | child = child.nextSibling;
108 | }
109 | };
110 | }
111 | /*eslint-enable*/
112 |
113 | // Audits for a single rule (by name) and returns the results for only that
114 | // rule
115 | function audit(ruleName) {
116 | let whitelist = createWhitelist(ruleName);
117 |
118 | patchCollectMatchingElements();
119 |
120 | return axs.Audit.run(whitelist)
121 | .filter(result => result.rule.name === ruleName)[0];
122 | }
123 |
124 | module.exports = audit;
125 |
--------------------------------------------------------------------------------
/plugins/shared/info-panel/error.handlebars:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/plugins/shared/info-panel/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The following code defines an information panel that can be invoked from
3 | * any plugin to display summaries, errors, or more information about what
4 | * the plugin is doing.
5 | *
6 | * These panels are moveable and closeable, and are unique to the plugin that
7 | * created them. They appear in the bottom right corner of the viewport.
8 | *
9 | * Info panels consist of a title and three optional sections, which form
10 | * tabs that users can switch between.
11 | *
12 | * Summary: A summary of the plugin's results
13 | * Errors: A list of violations reported by this plugin. The tab marker also
14 | * contains the number of errors listed
15 | */
16 |
17 | let $ = require("jquery");
18 | let annotate = require("../annotate")("info-panel");
19 |
20 | let errorTemplate = require("./error.handlebars");
21 | require("./style.less");
22 |
23 | const INITIAL_PANEL_MARGIN_PX = 10;
24 | const COLLAPSED_CLASS_NAME = "tota11y-collapsed";
25 | const HIDDEN_CLASS_NAME = "tota11y-info-hidden";
26 |
27 | class InfoPanel {
28 | constructor(plugin) {
29 | this.plugin = plugin;
30 |
31 | this.about = null;
32 | this.summary = null;
33 | this.errors = [];
34 |
35 | this.$el = null;
36 | }
37 |
38 | /**
39 | * Sets the contents of the about section as HTML
40 | */
41 | setAbout(about) {
42 | this.about = about;
43 | }
44 |
45 | /**
46 | * Sets the contents of the summary section as HTML
47 | */
48 | setSummary(summary) {
49 | this.summary = summary;
50 | }
51 |
52 | /**
53 | * Adds an error to the errors tab. Also receives a jQuery element to
54 | * highlight on hover.
55 | */
56 | addError(title, $description, $el) {
57 | let error = {title, $description, $el};
58 | this.errors.push(error);
59 | return error;
60 | }
61 |
62 | _addTab(title, html) {
63 | // Create and append a tab marker
64 | let $tab = (
65 |
215 | );
216 |
217 | // Add the appropriate tabs based on which information the info panel
218 | // was provided, then highlight the most important one.
219 | let $activeTab;
220 | if (this.about) {
221 | $activeTab = this._addTab("About", this.about);
222 | }
223 |
224 | if (this.summary) {
225 | $activeTab = this._addTab("Summary", this.summary);
226 | }
227 |
228 | // Wire annotation toggling
229 | this.$el.find(".toggle-annotation").click((e) => {
230 | if ($(e.target).prop("checked")) {
231 | annotate.show();
232 | } else {
233 | annotate.hide();
234 | }
235 | });
236 |
237 | if (this.errors.length > 0) {
238 | let $errors = $("
").addClass("tota11y-info-errors");
239 |
240 | // Store a reference to the "Errors" tab so we can switch to it
241 | // later
242 | let $errorsTab;
243 |
244 | this.errors.forEach((error, i) => {
245 | let $error = $(errorTemplate(error));
246 |
247 | // Insert description jQuery object into template.
248 | // Description is passed as jQuery object
249 | // so that functionality can be inserted.
250 | $error
251 | .find(".tota11y-info-error-description")
252 | .prepend(error.$description);
253 |
254 | $errors.append($error);
255 |
256 | // Wire up the expand/collapse trigger
257 | let $trigger = $error.find(".tota11y-info-error-trigger");
258 | let $desc = $error.find(".tota11y-info-error-description");
259 |
260 | $trigger.click((e) => {
261 | e.preventDefault();
262 | e.stopPropagation();
263 | $trigger.toggleClass(COLLAPSED_CLASS_NAME);
264 | $desc.toggleClass(COLLAPSED_CLASS_NAME);
265 | });
266 |
267 | // Attach a function to the original error object to open
268 | // this error so it can be done externally. We'll use this to
269 | // access error entries in the info panel from labels.
270 | error.show = () => {
271 | // Make sure info panel is visible
272 | this.$el.removeClass(HIDDEN_CLASS_NAME);
273 |
274 | // Open the error entry
275 | $trigger.removeClass(COLLAPSED_CLASS_NAME);
276 | $desc.removeClass(COLLAPSED_CLASS_NAME);
277 |
278 | // Switch to the "Errors" tab
279 | $errorsTab.trigger("activate");
280 |
281 | // Scroll to the error entry
282 | let $scrollParent = $trigger.parents(
283 | ".tota11y-info-section");
284 | $scrollParent[0].scrollTop = $trigger[0].offsetTop - 10;
285 | };
286 |
287 | // Attach the `$trigger` as well so can access it externally.
288 | // We use this to highlight the trigger when hovering over
289 | // inline error labels.
290 | error.$trigger = $trigger;
291 |
292 | // Wire up the scroll-to-error button
293 | let $scroll = $error.find(".tota11y-info-error-scroll");
294 | $scroll.click((e) => {
295 | e.preventDefault();
296 | e.stopPropagation();
297 |
298 | // TODO: This attempts to scroll to fixed elements
299 | $(document).scrollTop(error.$el.offset().top - 80);
300 | });
301 |
302 | // Expand the first violation
303 | if (i === 0) {
304 | $desc.toggleClass(COLLAPSED_CLASS_NAME);
305 | $trigger.toggleClass(COLLAPSED_CLASS_NAME);
306 | }
307 |
308 | // Highlight the violating element on hover/focus. We do it
309 | // for both $trigger and $scroll to allow users to see the
310 | // highlight when scrolling to the element with the button.
311 | annotate.toggleHighlight(error.$el, $trigger);
312 | annotate.toggleHighlight(error.$el, $scroll);
313 |
314 | // Add code from error.$el to the information panel
315 | let errorHTML = error.$el[0].outerHTML;
316 |
317 | // Trim the code block if it is over 300 characters
318 | if (errorHTML.length > 300) {
319 | errorHTML = errorHTML.substring(0, 300) + "...";
320 | }
321 |
322 | let $relevantCode = $error.find(
323 | ".tota11y-info-error-description-code-container code");
324 | $relevantCode.text(errorHTML);
325 | });
326 |
327 | $errorsTab = $activeTab = this._addTab("Errors", $errors);
328 |
329 | // Add a small badge next to the tab title
330 | let $badge = $("
Donec id non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
221 | mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
222 | mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
229 | porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
230 | ut fermentum massa justo sit amet risus.
83 |