{"id":19140575,"url":"https://github.com/canaxess/fenton","last_synced_at":"2025-05-06T23:17:11.520Z","repository":{"id":115409504,"uuid":"149827276","full_name":"canaxess/fenton","owner":"canaxess","description":"Accessible UI for chatbots built on the Microsoft Azure platform.","archived":false,"fork":false,"pushed_at":"2019-06-24T10:11:50.000Z","size":44,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-06T23:17:05.790Z","etag":null,"topics":["accessibility","chatbot-accessibility-fundamentals","chatbot-framework","chatbots","wcag"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/canaxess.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-21T23:04:08.000Z","updated_at":"2024-09-15T15:55:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"addf24ac-ff17-4b8d-aad6-2172f714a677","html_url":"https://github.com/canaxess/fenton","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canaxess%2Ffenton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canaxess%2Ffenton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canaxess%2Ffenton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canaxess%2Ffenton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canaxess","download_url":"https://codeload.github.com/canaxess/fenton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782835,"owners_count":21803410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","chatbot-accessibility-fundamentals","chatbot-framework","chatbots","wcag"],"created_at":"2024-11-09T07:18:03.124Z","updated_at":"2025-05-06T23:17:11.508Z","avatar_url":"https://github.com/canaxess.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# fenton\nfenton is an accessible UI which has been tested against WCAG 2.0 AA. The script is for bots developed on the Microsoft Bot Framework, the code uses the Directline channel API to communicate with the bot.\n\n**Built by following the principles in our [CHATBOT Accessibility Fundamentals YouTube series](https://www.youtube.com/playlist?list=PLknXoWiYr_QynKoP276ZlGV73aM8uWdq_)**\n\n* [CHATBOT Accessibility Fundamentals repository](https://github.com/canaxess/canaxess-teaches/tree/master/chatbot-accessibility-fundamentals)\n\n## Features\n1. Each message in the conversation history is accessible from the keyboard\n2. A non-visual indication of which part of the conversation has been spoken by using the `aria-label` attribute\n3. Conversation contained within an aria live region\n4. Accessibility markup for several predefined rich media card types including Hero cards\n5. Markdown support\n## How to create and use fenton\n### Obtain security credentials for your bot:\n1. Make sure you've [registered your bot](https://dev.botframework.com/bots/new)\n2. Add a DirectLine channel, and generate a Direct Line Secret. Make sure Direct Line 3.0 is enabled\n3. Add the Directline secret into the `bot.secret` property\n4. Add the chatbot name to the `bot.id` property\n### Enter your details in the bot object\n```js\nvar bot = new Object();\n\tbot.userId='\u003cuserid\u003e';\n\tbotname='\u003cname\u003e';\n\tbot.email='\u003cbot email\u003e';\n\tbot.organisation='\u003corganisation\u003e';\n\tbot.site='\u003csite\u003e';\n\tbot.id='\u003cbot name\u003e';\n\tbot.secret='*************************************************';\n```\n### Add the HTML\nEnter the HTML exactly as it is displayed\n```html\n\u003cdiv id=\"chatbot\"\u003e\n\n\u003cdiv id=\"text-container\"\u003e\n\n\u003csection id=\"conversation-text-body\" tabindex=\"0\" aria-label=\"Chatbot conversation\" aria-live=\"polite\"\u003e\n\t\u003csection class=\"conversation-text bot\" aria-label=\"The bot said \u003ctime\u003e\"\u003eHello, how are you?\u003c/section\u003e\n\u003c/section\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"control-container\"\u003e\n\n\u003cform id=\"chatbot-form\" class=\"form-inline\"\u003e\n\t\u003clabel for=\"user-msg\"\u003eAsk me a question\u003c/label\u003e\n\t\u003cinput type=\"text\" autocomplete=\"off\" id=\"user-msg\" class=\"form-control\"\u003e\n\t\u003cbutton id=\"send\" type=\"button\" class=\"button large\"\u003eSend\u003c/button\u003e                     \n\u003c/form\u003e\n\n\u003c/div\u003e\n\n\u003cbutton id=\"connect\" type=\"button\" class=\"button large\"\u003eStart\u003c/button\u003e\n```\n### JQuery usage\nJQuery is used to add click events to Hero cards. All buttons with a class `.actionable` may have a `data-type`, if this has openUrl it will open the page URL in a separate window, else it'll be a response which will carry on the conversation.\n```js\n$(function(){\n\t$(document).on(\"click\", \".actionable\", function(){\n\t\tvar obj = $(this);\n\t\tswitch(obj.attr('data-type'))\n\t\t{\n\t\t\tcase \"openUrl\":\n\t\t\t\twindow.open(obj.attr('data-value'), '_blank');\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t$('#' + UI.userinputId).val(obj.attr('data-value'));\n\t\t\t\t$('#' + UI.submitbuttonId).click();\n\t\t\t\tbreak;\n\t\t}\n\t});\n});\t\n```\n## Browser and AT support\nThe support offered between browsers and assistive technology is increasing and has been tested and passed against the following combinations.\n- JAWS 16 and Internet Explorer 11\n- NVDA 2018.2.1 and Google Chrome\n## Mandatory dependencies\n- [RxJS 5.0](https://github.com/ReactiveX/rxjs)\n- [Directline.js](https://github.com/Microsoft/BotFramework-DirectLineJS)\n- [Showdown 1.8.6](http://showdownjs.com/) used for displaying markdown\n## Optional dependencies\n- [JQuery 3.3.1](https://jquery.com/download/) used for quick event handling on rich media cards\n- [Foundation 6.4.3](https://foundation.zurb.com/sites/download.html/) used for basic styling of this example\n\u003e This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanaxess%2Ffenton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanaxess%2Ffenton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanaxess%2Ffenton/lists"}