From 6b3cdb5033c2a332fa20bd0dfab59931901e9a3b Mon Sep 17 00:00:00 2001
From: HarveyKandola <harvey@documize.com>
Date: Tue, 11 Jan 2022 12:40:52 -0500
Subject: [PATCH] Support for ARIA

---
 gui/app/components/ui/ui-button.js            |  3 ++
 gui/app/components/ui/ui-toolbar-button.js    |  2 ++
 gui/app/components/ui/ui-toolbar-dropdown.js  |  2 ++
 gui/app/components/ui/ui-toolbar-icon.js      |  2 ++
 gui/app/components/ui/ui-toolbar-label.js     |  2 ++
 .../components/customize/auth-settings.hbs    |  8 ++---
 .../components/customize/license-key.hbs      |  4 +--
 .../components/customize/user-admin.hbs       |  2 +-
 .../components/customize/user-groups.hbs      |  4 +--
 .../components/customize/user-list.hbs        | 30 +++++++++----------
 .../components/document/add-section.hbs       |  4 +--
 .../components/document/content-linker.hbs    | 24 +++++++--------
 .../components/document/document-meta.hbs     |  2 +-
 .../components/document/document-toolbar.hbs  | 24 +++++++--------
 .../components/document/page-heading.hbs      | 18 +++++------
 .../document/section-attachment.hbs           |  2 +-
 .../document/sidebar-attachment.hbs           |  4 +--
 .../components/document/sidebar-toc.hbs       | 10 +++----
 .../components/document/view-content.hbs      |  2 +-
 .../components/folder/document-categories.hbs |  4 +--
 .../components/folder/document-tags.hbs       |  2 +-
 .../components/folder/documents-list.hbs      | 22 +++++++-------
 .../components/folder/settings-blocks.hbs     |  8 ++---
 .../components/folder/settings-category.hbs   |  2 +-
 .../components/folder/settings-general.hbs    |  8 ++---
 .../folder/settings-permissions.hbs           |  8 ++---
 .../components/folder/space-sidebar.hbs       | 16 +++++-----
 .../components/folder/space-toolbar.hbs       | 20 ++++++-------
 .../components/layout/master-navigation.hbs   | 22 +++++++-------
 .../components/search/search-results.hbs      | 12 ++++----
 .../components/search/search-view.hbs         |  2 +-
 .../components/section/gemini/type-editor.hbs |  2 +-
 .../components/section/jira/type-editor.hbs   |  2 +-
 .../section/papertrail/type-editor.hbs        |  2 +-
 .../components/section/pdf/type-editor.hbs    |  2 +-
 .../components/section/trello/type-editor.hbs |  4 +--
 .../components/ui/label-color-picker.hbs      |  4 +--
 .../templates/components/ui/theme-picker.hbs  |  4 +--
 gui/app/templates/components/ui/ui-button.hbs |  4 +--
 .../templates/components/ui/ui-checkbox.hbs   |  2 +-
 gui/app/templates/components/ui/ui-dialog.hbs |  2 +-
 .../components/ui/ui-list-picker.hbs          |  4 +--
 42 files changed, 159 insertions(+), 148 deletions(-)

diff --git a/gui/app/components/ui/ui-button.js b/gui/app/components/ui/ui-button.js
index 2b156a6d..8a8484e9 100644
--- a/gui/app/components/ui/ui-button.js
+++ b/gui/app/components/ui/ui-button.js
@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-classic-classes */
 // Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
 //
 // This software (Documize Community Edition) is licensed under
@@ -28,6 +29,8 @@ export default Component.extend({
 	stretch: false,
 	uppercase: true,
 	iconClass: '',
+	ariaRole: "button",
+	tabindex: 0,
 	hasIcon: computed('iconClass', function() {
 		return this.iconClass.trim() != '';
 	}),
diff --git a/gui/app/components/ui/ui-toolbar-button.js b/gui/app/components/ui/ui-toolbar-button.js
index b77dea58..249a5be2 100644
--- a/gui/app/components/ui/ui-toolbar-button.js
+++ b/gui/app/components/ui/ui-toolbar-button.js
@@ -27,6 +27,8 @@ export default Component.extend({
 	stretch: false,
 	uppercase: true,
 	iconClass: '',
+	ariaRole: "button",
+	tabindex: 0,
 	hasIcon: computed('iconClass', function() {
 		return this.iconClass.trim() != '';
 	}),
diff --git a/gui/app/components/ui/ui-toolbar-dropdown.js b/gui/app/components/ui/ui-toolbar-dropdown.js
index bd8e5095..8d2e0e3e 100644
--- a/gui/app/components/ui/ui-toolbar-dropdown.js
+++ b/gui/app/components/ui/ui-toolbar-dropdown.js
@@ -19,6 +19,8 @@ export default Component.extend({
 	color: '',
 	arrow: true,
 	iconClass: '',
+	ariaRole: "button",
+	tabindex: 0,
 
 	calcClass: computed(function() {
 		// Prepare icon class name
diff --git a/gui/app/components/ui/ui-toolbar-icon.js b/gui/app/components/ui/ui-toolbar-icon.js
index 0e190b94..cbd75f22 100644
--- a/gui/app/components/ui/ui-toolbar-icon.js
+++ b/gui/app/components/ui/ui-toolbar-icon.js
@@ -25,6 +25,8 @@ export default Component.extend({
 	tooltip: '',
 	selected: false,
 	attributeBindings: ['title'],
+	tabindex: 0,
+	ariaRole: "button",
 	title: computed('tooltip', function() {
 		return this.tooltip;
 	}),
diff --git a/gui/app/components/ui/ui-toolbar-label.js b/gui/app/components/ui/ui-toolbar-label.js
index 1d48a9d1..f369ce9c 100644
--- a/gui/app/components/ui/ui-toolbar-label.js
+++ b/gui/app/components/ui/ui-toolbar-label.js
@@ -22,6 +22,8 @@ export default Component.extend({
 	label: '',
 	tooltip: '',
 	selected: false,
+	ariaRole: "button",
+	tabindex: 0,
 
 	calcClass: computed('selected', function() {
 		let c = '';
diff --git a/gui/app/templates/components/customize/auth-settings.hbs b/gui/app/templates/components/customize/auth-settings.hbs
index 33adf10b..cfb0afaa 100644
--- a/gui/app/templates/components/customize/auth-settings.hbs
+++ b/gui/app/templates/components/customize/auth-settings.hbs
@@ -2,28 +2,28 @@
 	<form>
 		<div class="widget-list-picker widget-list-picker-horiz">
 			<ul class="options">
-				<li class="option {{if isDocumizeProvider "selected"}}" {{action "onDocumize"}}>
+				<li class="option {{if isDocumizeProvider "selected"}}" {{action "onDocumize"}} role="button" tabindex="0">
 					<div class="text-header">Documize</div>
 					<div class="text">Built-in email/password</div>
 					{{#if isDocumizeProvider}}
 						<i class="dicon {{constants.Icon.Tick}}" />
 					{{/if}}
 				</li>
-				<li class="option {{if isKeycloakProvider "selected"}}" {{action "onKeycloak"}}>
+				<li class="option {{if isKeycloakProvider "selected"}}" {{action "onKeycloak"}} role="button" tabindex="0">
 					<div class="text-header">Keycloak</div>
 					<div class="text">Via authentication server</div>
 					{{#if isKeycloakProvider}}
 						<i class="dicon {{constants.Icon.Tick}}" />
 					{{/if}}
 				</li>
-				<li class="option {{if isLDAPProvider "selected"}}" {{action "onLDAP"}}>
+				<li class="option {{if isLDAPProvider "selected"}}" {{action "onLDAP"}} role="button" tabindex="0">
 					<div class="text-header">LDAP</div>
 					<div class="text">Connect to LDAP/Active Directory</div>
 					{{#if isLDAPProvider}}
 						<i class="dicon {{constants.Icon.Tick}}" />
 					{{/if}}
 				</li>
-                <li class="option {{if isCASProvider "selected"}}" {{action "onCAS"}}>
+                <li class="option {{if isCASProvider "selected"}}" {{action "onCAS"}} role="button" tabindex="0">
                     <div class="text-header">CAS</div>
                     <div class="text">Via Central Authentication Server</div>
                     {{#if isCASProvider}}
diff --git a/gui/app/templates/components/customize/license-key.hbs b/gui/app/templates/components/customize/license-key.hbs
index b478c6b2..03f71d72 100644
--- a/gui/app/templates/components/customize/license-key.hbs
+++ b/gui/app/templates/components/customize/license-key.hbs
@@ -31,7 +31,7 @@
 	{{/if}}
 	<Ui::UiSpacer @size="400" />
 
-	<form>
+	<form role="form">
 		<div class="form-group">
 			<label for="sub-id">Customer ID</label>
 			{{input id="sub-id" type="text" value=subscription.id class="form-control" readonly=true}}
@@ -117,7 +117,7 @@
 		<div class="modal-content">
 			<div class="modal-header">Request Account Closure</div>
 			<div class="modal-body">
-                <form {{action "onEditComment" on="submit"}}>
+                <form {{action "onEditComment" on="submit"}} role="form">
                     <div class="form-group">
                         <label for="the-comment">Comment</label>
                         {{focus-textarea id="close-comment" class="form-control" rows="5" value=comment}}
diff --git a/gui/app/templates/components/customize/user-admin.hbs b/gui/app/templates/components/customize/user-admin.hbs
index e68e5f34..a287664c 100644
--- a/gui/app/templates/components/customize/user-admin.hbs
+++ b/gui/app/templates/components/customize/user-admin.hbs
@@ -25,7 +25,7 @@
 							{{ui/ui-button color=constants.Color.Green icon=constants.Icon.Person light=true label=constants.Label.Add onClick=(action "onAddUser")}}
 							<Ui::UiSpacer @size="300" />
 						</form>
-						<form onsubmit={{action "onAddUser"}}>
+						<form onsubmit={{action "onAddUser"}} role="form">
 							<div class="form-group">
 								<label for="edit-group-desc">Bulk Upload</label>
 								{{textarea id="bulkUsers" value=bulkUsers class="form-control" rows="5" placeholder="firstname, lastname, email"}}
diff --git a/gui/app/templates/components/customize/user-groups.hbs b/gui/app/templates/components/customize/user-groups.hbs
index e8625769..f6506ec7 100644
--- a/gui/app/templates/components/customize/user-groups.hbs
+++ b/gui/app/templates/components/customize/user-groups.hbs
@@ -53,7 +53,7 @@
 			<div class="modal-content">
 				<div class="modal-header">Delete Group</div>
 				<div class="modal-body">
-					<form onsubmit= {{action "onDeleteGroup"}}>
+					<form onsubmit= {{action "onDeleteGroup"}} role="form">
 						<p>Are you sure you want to delete this group?</p>
 						<div class="form-group">
 							<label for="delete-group-name">Please type group name to confirm</label>
@@ -76,7 +76,7 @@
 			<div class="modal-content">
 				<div class="modal-header">Edit Group</div>
 				<div class="modal-body">
-					<form onsubmit= {{action "onEditGroup"}}>
+					<form onsubmit= {{action "onEditGroup"}} role="form">
 						<div class="form-group">
 							<label for="edit-group-name">Name</label>
 							{{input id="edit-group-name" type="text" class="form-control mousetrap" placeholder="Enter group name" value=editGroup.name}}
diff --git a/gui/app/templates/components/customize/user-list.hbs b/gui/app/templates/components/customize/user-list.hbs
index 2927cbe7..8988c2bb 100644
--- a/gui/app/templates/components/customize/user-list.hbs
+++ b/gui/app/templates/components/customize/user-list.hbs
@@ -91,17 +91,17 @@
 						{{#if user.me}}
 							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
 						{{else if user.selected}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleSelect" user}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleSelect" user}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleSelect" user}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleSelect" user}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="{{unless user.active "inactive-user"}} {{if user.admin "admin-user"}}">
-						<div class="name" {{action "onShowEdit" user.id}}>
+						<div class="name" {{action "onShowEdit" user.id}} role="button" tabindex="0">
 							{{user.fullname}}
 							<div class="email">{{user.email}}</div>
 						</div>
-						<div class="groups" {{action "onShowGroupsModal" user.id}}>
+						<div class="groups" {{action "onShowGroupsModal" user.id}} role="button" tabindex="0">
 							{{#each user.groups as |group|}}
 								<span class="group">
 									{{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}}
@@ -113,41 +113,41 @@
 					</td>
 					<td class="no-width text-center align-middle">
 						{{#if user.editor}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleEditor" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleEditor" user.id}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleEditor" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleEditor" user.id}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="no-width text-center align-middle">
 						{{#if user.viewUsers}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleUsers" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleUsers" user.id}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleUsers" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleUsers" user.id}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="no-width text-center align-middle">
 						{{#if user.analytics}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAnalytics" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAnalytics" user.id}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAnalytics" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAnalytics" user.id}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="no-width text-center align-middle">
 						{{#if user.me}}
 							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
 						{{else if user.admin}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAdmin" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAdmin" user.id}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAdmin" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAdmin" user.id}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="no-width text-center align-middle">
 						{{#if user.me}}
 							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
 						{{else if user.active}}
-							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleActive" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleActive" user.id}} role="button" tabindex="0" />
 						{{else}}
-							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleActive" user.id}} />
+							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleActive" user.id}} role="button" tabindex="0" />
 						{{/if}}
 					</td>
 					<td class="no-width text-center align-middle">
@@ -174,7 +174,7 @@
 		<div class="modal-content">
 			<div class="modal-header">User {{editUser.firstname}} {{editUser.lastname}}</div>
 			<div class="modal-body">
-				<form>
+				<form role="form">
 					<div class="form-group">
 						<label for="edit-firstname">Firstname</label>
 						{{input id="edit-firstname" class="form-control" type="text" value=editUser.firstname}}
diff --git a/gui/app/templates/components/document/add-section.hbs b/gui/app/templates/components/document/add-section.hbs
index 47ed64a4..4c9bd1db 100644
--- a/gui/app/templates/components/document/add-section.hbs
+++ b/gui/app/templates/components/document/add-section.hbs
@@ -13,7 +13,7 @@
 					<ul class="options">
 						{{#each sections as |section|}}
 							{{#unless section.retired}}
-								<li class="preset-option" {{action "onInsertSection" section}}>
+								<li class="preset-option" {{action "onInsertSection" section}} role="button" tabindex="0">
 									<div class="icon">
 										<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
 									</div>
@@ -26,7 +26,7 @@
 							<br>
 						{{/if}}
 						{{#each blocks as |block|}}
-							<li class="block-option" {{action "onInsertBlock" block}}>
+							<li class="block-option" {{action "onInsertBlock" block}} role="button" tabindex="0">
 								<div class="name">{{block.title}}</div>
 								<div class="desc">{{block.excerpt}}</div>
 							</li>
diff --git a/gui/app/templates/components/document/content-linker.hbs b/gui/app/templates/components/document/content-linker.hbs
index d7a496f1..f6a617b5 100644
--- a/gui/app/templates/components/document/content-linker.hbs
+++ b/gui/app/templates/components/document/content-linker.hbs
@@ -5,13 +5,13 @@
 			<div class="modal-body">
 				<ul class="tabnav-control text-center">
 					{{#if hasSections}}
-						<li class="tab {{if tab1Selected "selected"}}" {{action "onTabSelect" 1}}>Section</li>
+						<li class="tab {{if tab1Selected "selected"}}" {{action "onTabSelect" 1}} role="button" tabindex="0">Section</li>
 					{{/if}}
 					{{#if hasAttachments}}
-						<li class="tab {{if tab2Selected "selected"}}" {{action "onTabSelect" 2}}>Attachment</li>
+						<li class="tab {{if tab2Selected "selected"}}" {{action "onTabSelect" 2}} role="button" tabindex="0">Attachment</li>
 					{{/if}}
-					<li class="tab {{if tab3Selected "selected"}}" {{action "onTabSelect" 3}}>Search</li>
-					<li class="tab {{if tab4Selected "selected"}}" {{action "onTabSelect" 4}}>Network</li>
+					<li class="tab {{if tab3Selected "selected"}}" {{action "onTabSelect" 3}} role="button" tabindex="0">Search</li>
+					<li class="tab {{if tab4Selected "selected"}}" {{action "onTabSelect" 4}} role="button" tabindex="0">Network</li>
 				</ul>
 
 				{{#if showSections}}
@@ -27,13 +27,13 @@
 						<div class="widget-list-picker">
 							<ul class="options">
 								{{#each candidates.attachments as |item|}}
-									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
+									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
 										<div class="text text-truncate">
 											<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
 											{{item.title}}
 										</div>
 										{{#if item.selected}}
-											<i class="dicon {{constants.Icon.Tick}}" />
+											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
 										{{/if}}
 									</li>
 								{{/each}}
@@ -55,33 +55,33 @@
 						<div class="widget-list-picker">
 							<ul class="options">
 								{{#each matches.documents as |item|}}
-									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
+									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
 										<div class="text text-truncate">
 											{{item.title}}<br>{{item.context}}
 										</div>
 										{{#if item.selected}}
-											<i class="dicon {{constants.Icon.Tick}}" />
+											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
 										{{/if}}
 									</li>
 								{{/each}}
 								{{#each matches.pages as |item|}}
-									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
+									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
 										<div class="text text-truncate">
 											{{item.title}}<br>{{item.context}}
 										</div>
 										{{#if item.selected}}
-											<i class="dicon {{constants.Icon.Tick}}" />
+											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
 										{{/if}}
 									</li>
 								{{/each}}
 								{{#each matches.attachments as |item|}}
-									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}}>
+									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
 										<div class="text text-truncate">
 											<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
 											{{item.title}}
 										</div>
 										{{#if item.selected}}
-											<i class="dicon {{constants.Icon.Tick}}" />
+											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
 										{{/if}}
 									</li>
 								{{/each}}
diff --git a/gui/app/templates/components/document/document-meta.hbs b/gui/app/templates/components/document/document-meta.hbs
index 2b044f35..93d64b22 100644
--- a/gui/app/templates/components/document/document-meta.hbs
+++ b/gui/app/templates/components/document/document-meta.hbs
@@ -51,7 +51,7 @@
 	{{/each}}
 	{{#each tagz as |t|}}
 		<div class="meta-label">
-			<i class="dicon {{constants.Icon.Tag}}" title="tag" />
+			<i class="dicon {{constants.Icon.Tag}}" title="Tag" />
 			{{t}}
 		</div>
 	{{/each}}
diff --git a/gui/app/templates/components/document/document-toolbar.hbs b/gui/app/templates/components/document/document-toolbar.hbs
index 956b668a..41f75bd5 100644
--- a/gui/app/templates/components/document/document-toolbar.hbs
+++ b/gui/app/templates/components/document/document-toolbar.hbs
@@ -4,15 +4,15 @@
 			{{#ui/ui-toolbar-dropdown label="Actions" arrow=true}}
 				{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
 					<ul class="menu">
-						<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
-						<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
-						<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
+						<li class="item" {{action "onShowRequestContributionModal"}} role="button" tabindex="0">Request contribution</li>
+						<li class="item" {{action "onShowRequestFeedbackModal"}} role="button" tabindex="0">Request feedback</li>
+						<li class="item" {{action "onShowRequestReadModal"}} role="button" tabindex="0">Request read</li>
 						{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
 							<li class="divider"/>
-							<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
+							<li class="item" {{action "onShowPublishModal"}} role="button" tabindex="0">Request publication</li>
 						{{/if}}
 						<li class="divider"/>
-						<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
+						<li class="item" {{action "onShareModal"}} role="button" tabindex="0">Share via secure external link</li>
 					</ul>
 				{{/attach-popover}}
 			{{/ui/ui-toolbar-dropdown}}
@@ -23,26 +23,26 @@
 		{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
 			<ul class="menu">
 				{{#if pinState.isPinned}}
-					<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
+					<li class="item" {{action "onUnpin"}} role="button" tabindex="0">Remove bookmark</li>
 					<li class="divider"/>
 				{{else if session.authenticated}}
-					<li class="item" {{action "onPin"}}>Bookmark</li>
+					<li class="item" {{action "onPin"}} role="button" tabindex="0">Bookmark</li>
 					<li class="divider"/>
 				{{/if}}
-				<li class="item" {{action "onShowPrintModal"}}>Print</li>
-				<li class="item" {{action "onExport"}}>Download</li>
+				<li class="item" {{action "onShowPrintModal"}} role="button" tabindex="0">Print</li>
+				<li class="item" {{action "onExport"}} role="button" tabindex="0">Download</li>
 				{{#if (or permissions.documentAdd permissions.documentCopy)}}
 					<li class="divider"/>
 					{{#if permissions.documentAdd}}
-						<li class="item" {{action "onShowTemplateModal"}}>Template</li>
+						<li class="item" {{action "onShowTemplateModal"}} role="button" tabindex="0">Template</li>
 					{{/if}}
 					{{#if permissions.documentCopy}}
-						<li class="item" {{action "onShowDuplicateModal"}}>Copy</li>
+						<li class="item" {{action "onShowDuplicateModal"}} role="button" tabindex="0">Copy</li>
 					{{/if}}
 				{{/if}}
 				{{#if permissions.documentDelete}}
 					<li class="divider"/>
-					<li class="item red" {{action "onShowDeleteModal"}}>Delete</li>
+					<li class="item red" {{action "onShowDeleteModal"}} role="button" tabindex="0">Delete</li>
 				{{/if}}
 			</ul>
 		{{/attach-popover}}
diff --git a/gui/app/templates/components/document/page-heading.hbs b/gui/app/templates/components/document/page-heading.hbs
index 5f01cf64..8c7a5e30 100644
--- a/gui/app/templates/components/document/page-heading.hbs
+++ b/gui/app/templates/components/document/page-heading.hbs
@@ -11,29 +11,29 @@
 		<div class="section-heading no-print" id="page-toolbar-{{ page.id }}">
 			<div class="section-toolbar">
 				{{#if canEdit}}
-					<i class="add-section dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard" page}} title="Insert section above" />
+					<i class="add-section dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard" page}} title="Insert section" tabindex="0" role="button" />
 					<div class="gap"/>
-					<i class="dicon {{constants.Icon.Edit}}" {{action "onEdit"}} title="Edit" />
+					<i class="dicon {{constants.Icon.Edit}}" {{action "onEdit"}} title="Edit section" tabindex="0" role="button" />
 					<div class="gap"/>
 				{{/if}}
-				<i class="dicon {{constants.Icon.Settings}}">
+				<i class="dicon {{constants.Icon.Settings}}" title="Actions" aria-haspopup="menu" aria-label="Dropdown menu for section">
 					{{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}}
-						<div class="menu">
-							<a class="item" href="#" id="page-copy-link-{{page.id}}" {{action "onCopyLink"}}>Copy link</a>
+						<div class="menu" >
+							<a class="item" href="#" id="page-copy-link-{{page.id}}" {{action "onCopyLink"}} tabindex="0" role="button">Copy link</a>
 							{{#if (or canEdit permissions.documentCopy permissions.documentMove permissions.documentTemplate)}}
 								<div class="divider"></div>
 							{{/if}}
 							{{#if canEdit}}
-								<a class="item" href="#" id={{concat "edit-page-button-" page.id}} {{action "onEdit"}}>Edit</a>
+								<a class="item" href="#" id={{concat "edit-page-button-" page.id}} {{action "onEdit"}} tabindex="0" role="button">Edit</a>
 							{{/if}}
 							{{#if permissions.documentCopy}}
-								<a class="item" href="#" id={{concat "copy-page-button-" page.id}} {{action "onShowCopyModal"}}>Copy</a>
+								<a class="item" href="#" id={{concat "copy-page-button-" page.id}} {{action "onShowCopyModal"}} tabindex="0" role="button">Copy</a>
 							{{/if}}
 							{{#if permissions.documentMove}}
-								<a class="item" href="#" id={{concat "move-page-button-" page.id}} {{action "onShowMoveModal"}}>Move</a>
+								<a class="item" href="#" id={{concat "move-page-button-" page.id}} {{action "onShowMoveModal"}} tabindex="0" role="button">Move</a>
 							{{/if}}
 							{{#if permissions.documentTemplate}}
-								<a class="item" href="#" id={{concat "publish-page-button-" page.id}} {{action "onShowPublishModal"}}>Publish</a>
+								<a class="item" href="#" id={{concat "publish-page-button-" page.id}} {{action "onShowPublishModal"}} tabindex="0" role="button">Publish</a>
 							{{/if}}
 							{{#if permissions.documentDelete}}
 								<div class="divider"></div>
diff --git a/gui/app/templates/components/document/section-attachment.hbs b/gui/app/templates/components/document/section-attachment.hbs
index 8e71ad86..33e66285 100644
--- a/gui/app/templates/components/document/section-attachment.hbs
+++ b/gui/app/templates/components/document/section-attachment.hbs
@@ -11,7 +11,7 @@
 					{{file.filename}}
 				</a>
 				{{#if editMode}}
-					<div class="menu">
+					<div class="menu" aria-haspopup="menu">
 						{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
 							{{#ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red}}
 								{{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}}
diff --git a/gui/app/templates/components/document/sidebar-attachment.hbs b/gui/app/templates/components/document/sidebar-attachment.hbs
index 61c28706..4421c295 100644
--- a/gui/app/templates/components/document/sidebar-attachment.hbs
+++ b/gui/app/templates/components/document/sidebar-attachment.hbs
@@ -11,7 +11,7 @@
 						</a>
 						{{#if canEdit}}
 							<div class="menu">
-								<i class="dicon {{constants.Icon.Cross}}">
+								<i class="dicon {{constants.Icon.Cross}}" role="button" tabindex="0" aria-haspopup="menu">
 									{{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}}
 										<div class="form">
 											<p>Are you sure you want to delete this file?</p>
@@ -31,7 +31,7 @@
 			{{/each}}
 			{{#if canEdit}}
 				<li id="upload-document-files">
-					<i class="dicon {{constants.Icon.Plus}}"></i>
+					<i class="dicon {{constants.Icon.Plus}}" role="button" tabindex="0" title="Upload file" />
 				</li>
 			{{/if}}
 		</ul>
diff --git a/gui/app/templates/components/document/sidebar-toc.hbs b/gui/app/templates/components/document/sidebar-toc.hbs
index fb9942cb..f8dbe412 100644
--- a/gui/app/templates/components/document/sidebar-toc.hbs
+++ b/gui/app/templates/components/document/sidebar-toc.hbs
@@ -2,16 +2,16 @@
 {{#if canEdit}}
 	<div class="document-sidebar-toc">
 		<div class="controls {{if state.actionablePage "current-page"}}">
-			<div id="toc-up-button" class="arrow {{if state.upDisabled "disabled"}}" {{action "pageUp"}}>
+			<div id="toc-up-button" class="arrow {{if state.upDisabled "disabled"}}" {{action "pageUp"}} role="button" tabindex="0" aria-label="Up">
 				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
 			</div>
-			<div id="toc-down-button" class="arrow {{if state.downDisabled "disabled"}}" {{action "pageDown"}}>
+			<div id="toc-down-button" class="arrow {{if state.downDisabled "disabled"}}" {{action "pageDown"}} role="button" tabindex="0" aria-label="Down">
 				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
 			</div>
-			<div id="toc-outdent-button" class="arrow {{if state.outdentDisabled "disabled"}}" {{action "pageOutdent"}}>
+			<div id="toc-outdent-button" class="arrow {{if state.outdentDisabled "disabled"}}" {{action "pageOutdent"}} role="button" tabindex="0" aria-label="Outdent">
 				<i class="dicon {{constants.Icon.ArrowSmallLeft}}" />
 			</div>
-			<div id="toc-indent-button" class="arrow {{if state.indentDisabled "disabled"}}" {{action "pageIndent"}}>
+			<div id="toc-indent-button" class="arrow {{if state.indentDisabled "disabled"}}" {{action "pageIndent"}} role="button" tabindex="0" aria-label="Indent">
 				<i class="dicon {{constants.Icon.ArrowSmallRight}}" />
 			</div>
 		</div>
@@ -24,7 +24,7 @@
 	<ul class="index-list">
 		{{#each pages key="id" as |item|}}
 			<li class="item">
-				<a id="index-{{item.page.id}}" {{action "onGotoPage" item.page.id}}
+				<a id="index-{{item.page.id}}" {{action "onGotoPage" item.page.id}}  role="button" tabindex="0"
 					class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) "selected"}}"
 					title={{item.page.title}}>
 					<span class="numbering">{{item.page.numbering}}</span>
diff --git a/gui/app/templates/components/document/view-content.hbs b/gui/app/templates/components/document/view-content.hbs
index 3b57fdec..4d13a3f5 100644
--- a/gui/app/templates/components/document/view-content.hbs
+++ b/gui/app/templates/components/document/view-content.hbs
@@ -33,7 +33,7 @@
 
 {{#if canEdit}}
 	<div class="start-section">
-		<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}} title="Insert section here" />
+		<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}} title="Insert section here" role="button" tabindex="0" />
 	</div>
 {{/if}}
 
diff --git a/gui/app/templates/components/folder/document-categories.hbs b/gui/app/templates/components/folder/document-categories.hbs
index 752baee4..dec51e4e 100644
--- a/gui/app/templates/components/folder/document-categories.hbs
+++ b/gui/app/templates/components/folder/document-categories.hbs
@@ -2,9 +2,9 @@
 	{{#each categories as |cat|}}
 		{{#if cat}}
 			<div class="category">
-				<i class="dicon {{constants.Icon.Category}}" />
+				<i class="dicon {{constants.Icon.Category}}" title="Category" />
 				<div class="name">{{cat}}</div>
 			</div>
 		{{/if}}
 	{{/each}}
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/gui/app/templates/components/folder/document-tags.hbs b/gui/app/templates/components/folder/document-tags.hbs
index e6460c26..4a71c4cb 100644
--- a/gui/app/templates/components/folder/document-tags.hbs
+++ b/gui/app/templates/components/folder/document-tags.hbs
@@ -1,6 +1,6 @@
 {{#each tagz as |tg|}}
 	{{#link-to "search" (query-params filter=tg matchTag=true matchContent=false matchFile=false matchDoc=false) class="hashtag"}}
-		<i class="dicon {{constants.Icon.Tag}}" />
+		<i class="dicon {{constants.Icon.Tag}}" title="Tag" />
 		<div class="name">{{tg}}</div>
 	{{/link-to}}
 {{/each}}
diff --git a/gui/app/templates/components/folder/documents-list.hbs b/gui/app/templates/components/folder/documents-list.hbs
index 7383b93f..ab901312 100644
--- a/gui/app/templates/components/folder/documents-list.hbs
+++ b/gui/app/templates/components/folder/documents-list.hbs
@@ -13,19 +13,19 @@
 
 			{{#ui/ui-toolbar-icon icon=constants.Icon.Sort color=constants.Color.Gray tooltip="Sort"}}
 				{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
-					<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
+					<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}  role="button" tabindex="0" aria-label="Close" />
 					<div class="container">
 						<Ui::UiSpacer @size="100" />
 
 						<div class="text-center">
 							<ul class="ui-option-picker ui-option-picker-horiz">
-								<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
+								<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}} role="button" tabindex="0" aria-label="Sort by name">
 									<div class="text">Name</div>
 								</li>
-								<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
+								<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}} role="button" tabindex="0" aria-label="Sort by created">
 									<div class="text">Created date</div>
 								</li>
-								<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
+								<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}} role="button" tabindex="0" aria-label="Sort by revised">
 									<div class="text">Last updated</div>
 								</li>
 							</ul>
@@ -35,10 +35,10 @@
 
 						<div class="text-center">
 							<ul class="ui-option-picker ui-option-picker-horiz">
-								<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
+								<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}} role="button" tabindex="0" aria-label="Sort ascending">
 									<div class="text">Ascending</div>
 								</li>
-								<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
+								<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}} role="button" tabindex="0" aria-label="Sort descending">
 									<div class="text">Descending</div>
 								</li>
 							</ul>
@@ -93,15 +93,15 @@
 					<div class="sequence">
 						{{#if document.isSequenced}}
                             {{#if showingAllDocs}}
-                                <i class="dicon {{constants.Icon.ArrowSmallUp}}" {{action "onPinSequence" document.id "u"}} title="Move up" />
-                                <i class="dicon {{constants.Icon.ArrowSmallDown}}" {{action "onPinSequence" document.id "d"}} title="Move down" />
+                                <i class="dicon {{constants.Icon.ArrowSmallUp}}" {{action "onPinSequence" document.id "u"}} title="Move up" role="button" tabindex="0"/>
+                                <i class="dicon {{constants.Icon.ArrowSmallDown}}" {{action "onPinSequence" document.id "d"}} title="Move down" role="button" tabindex="0" />
                             {{/if}}
-							<i class="dicon {{constants.Icon.Cross}}" {{action "onUnpin" document.id}} title="Unpin" />
+							<i class="dicon {{constants.Icon.Cross}}" {{action "onUnpin" document.id}} title="Unpin" role="button" tabindex="0" />
 						{{else}}
-							<i class="dicon {{constants.Icon.ArrowSmallUp}}" {{action "onPin" document.id}} title="Pin" />
+							<i class="dicon {{constants.Icon.ArrowSmallUp}}" {{action "onPin" document.id}} title="Pin" role="button" tabindex="0" />
 						{{/if}}
 					</div>
-					<div class="checkbox" {{action "selectDocument" document.id}}>
+					<div class="checkbox" {{action "selectDocument" document.id}} role="checkbox" tabindex="0">
 						{{#if document.selected}}
 							<i class="dicon {{constants.Icon.CheckboxChecked}}"/>
 						{{else}}
diff --git a/gui/app/templates/components/folder/settings-blocks.hbs b/gui/app/templates/components/folder/settings-blocks.hbs
index 31f454a3..580c297e 100644
--- a/gui/app/templates/components/folder/settings-blocks.hbs
+++ b/gui/app/templates/components/folder/settings-blocks.hbs
@@ -19,7 +19,7 @@
 </div>
 
 {{#if isSpaceAdmin}}
-    {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDeleteBlock")}}
-        <p>Are you sure you want to delete this re-usable content block?</p>
-    {{/ui/ui-dialog}}
-{{/if}}
\ No newline at end of file
+	{{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDeleteBlock")}}
+		<p>Are you sure you want to delete this re-usable content block?</p>
+	{{/ui/ui-dialog}}
+{{/if}}
diff --git a/gui/app/templates/components/folder/settings-category.hbs b/gui/app/templates/components/folder/settings-category.hbs
index 61323427..91392a8d 100644
--- a/gui/app/templates/components/folder/settings-category.hbs
+++ b/gui/app/templates/components/folder/settings-category.hbs
@@ -5,7 +5,7 @@
 
 <div class="space-admin">
 	<div class="categories">
-		<form class="form" onsubmit={{action "onAdd"}}>
+		<form class="form" onsubmit={{action "onAdd"}} role="form">
 			<div class="form-group">
 				{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
 			</div>
diff --git a/gui/app/templates/components/folder/settings-general.hbs b/gui/app/templates/components/folder/settings-general.hbs
index 92bdda0d..3b8aec22 100644
--- a/gui/app/templates/components/folder/settings-general.hbs
+++ b/gui/app/templates/components/folder/settings-general.hbs
@@ -3,7 +3,7 @@
 	desc="Set space visibility, icon and label"
 	icon=constants.Icon.Settings}}
 
-<form>
+<form role="form">
 	<div class="form-group">
 		<label>Name</label>
 		{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError "form-control is-invalid" "form-control") placeholder="Space name" autocomplete="off"}}
@@ -26,7 +26,7 @@
 		<div class="ui-icon-picker">
 			<ul class="list">
 				{{#each iconList as |icon|}}
-					<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
+					<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}} role="button" tabindex="0">
 						{{ui/ui-icon-meta icon=icon}}
 					</li>
 				{{/each}}
@@ -37,9 +37,9 @@
 	<div class="form-group">
 		<label>Label</label>
 		<ul class="space-label-picker">
-			<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
+			<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}} role="button" tabindex="0">None</li>
 			{{#each labels as |label|}}
-				<li class="label {{if (eq spaceLabel label.id) "selected"}}"
+				<li class="label {{if (eq spaceLabel label.id) "selected"}}" role="button" tabindex="0"
 					style={{label.bgColor}}
 					{{action "onSetLabel" label.id}} title={{label.name}}>
 					{{label.name}}
diff --git a/gui/app/templates/components/folder/settings-permissions.hbs b/gui/app/templates/components/folder/settings-permissions.hbs
index a2d2013c..e3132cce 100644
--- a/gui/app/templates/components/folder/settings-permissions.hbs
+++ b/gui/app/templates/components/folder/settings-permissions.hbs
@@ -5,7 +5,7 @@
 
 <div class="view-customize">
 	<div class="explain-user-perms">
-		<div class="title" {{action "toggleSpacePerms"}}>
+		<div class="title" {{action "toggleSpacePerms"}} role="button" tabindex="0">
 			Space Permissions Explained
 			{{#if showSpacePermExplain}}
                 <i class="dicon {{constants.Icon.ArrowSmallUp}}"></i>
@@ -24,7 +24,7 @@
 
 		<Ui::UiSpacer @size="200" />
 
-		<div class="title" {{action "toggleDocumentPerms"}}>
+		<div class="title" {{action "toggleDocumentPerms"}} role="button" tabindex="0">
 			Document Permissions Explained
 			{{#if showDocumentPermExplain}}
 				<i class="dicon {{constants.Icon.ArrowSmallUp}}"></i>
@@ -102,8 +102,8 @@
 						<i class="dicon {{constants.Icon.TriangleSmallDown}} cursor-pointer"/>
 						{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
 							<div class="menu">
-								<a class="item" href="#" {{action "onBulkPermission" permission true}}>Grant all</a>
-								<a class="item" href="#" {{action "onBulkPermission" permission false}}>Revoke all</a>
+								<a class="item" href="#" {{action "onBulkPermission" permission true}} role="button" tabindex="0">Grant all</a>
+								<a class="item" href="#" {{action "onBulkPermission" permission false}} role="button" tabindex="0">Revoke all</a>
 							</div>
 						{{/attach-popover}}
 						{{#if (eq permission.who "role")}}
diff --git a/gui/app/templates/components/folder/space-sidebar.hbs b/gui/app/templates/components/folder/space-sidebar.hbs
index 8317afed..b10fdfce 100644
--- a/gui/app/templates/components/folder/space-sidebar.hbs
+++ b/gui/app/templates/components/folder/space-sidebar.hbs
@@ -2,39 +2,39 @@
 	<div class="section">
 		<div class="title">filter</div>
 		<div class="list">
-			<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}>
+			<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}} role="button" tabindex="0">
 				<i class={{concat "dicon " constants.Icon.Filter}} />
 				<div class="name">All ({{documents.length}})</div>
 			</div>
 			{{#if hasCategories}}
 				{{#if (gt rootDocCount 0)}}
-					<div class="item {{if (eq selectedFilter "uncategorized") "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}}>
+					<div class="item {{if (eq selectedFilter "uncategorized") "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}} role="button" tabindex="0">
 						<i class={{concat "dicon " constants.Icon.Filter}} />
 						<div class="name">Uncategorized ({{rootDocCount}})</div>
 					</div>
 				{{/if}}
 			{{/if}}
 			{{#if permissions.documentTemplate}}
-				<div class="item {{if (eq selectedFilter "template") "selected"}}" {{action "onDocumentFilter" "template" space.id}}>
+				<div class="item {{if (eq selectedFilter "template") "selected"}}" {{action "onDocumentFilter" "template" space.id}} role="button" tabindex="0">
 					<i class={{concat "dicon " constants.Icon.Filter}} />
 					<div class="name">Templates ({{templates.length}})</div>
 				</div>
 			{{/if}}
 			{{#if permissions.documentLifecycle}}
-				<div class="item {{if (eq selectedFilter "draft") "selected"}}" {{action "onDocumentFilter" "draft" space.id}}>
+				<div class="item {{if (eq selectedFilter "draft") "selected"}}" {{action "onDocumentFilter" "draft" space.id}} role="button" tabindex="0">
 					<i class={{concat "dicon " constants.Icon.Filter}} />
 					<div class="name">Drafts ({{documentsDraft.length}})</div>
 				</div>
-				<div class="item {{if (eq selectedFilter "live") "selected"}}" {{action "onDocumentFilter" "live" space.id}}>
+				<div class="item {{if (eq selectedFilter "live") "selected"}}" {{action "onDocumentFilter" "live" space.id}} role="button" tabindex="0">
 					<i class={{concat "dicon " constants.Icon.Filter}} />
 					<div class="name">Live ({{documentsLive.length}})</div>
 				</div>
 			{{/if}}
-			<div class="item {{if (eq selectedFilter "add") "selected"}}" {{action "onDocumentFilter" "add" space.id}}>
+			<div class="item {{if (eq selectedFilter "add") "selected"}}" {{action "onDocumentFilter" "add" space.id}} role="button" tabindex="0">
 				<i class={{concat "dicon " constants.Icon.Filter}} />
 				<div class="name">Added recently ({{recentAdd.length}})</div>
 			</div>
-			<div class="item {{if (eq selectedFilter "update") "selected"}}" {{action "onDocumentFilter" "update" space.id}}>
+			<div class="item {{if (eq selectedFilter "update") "selected"}}" {{action "onDocumentFilter" "update" space.id}} role="button" tabindex="0">
 				<i class={{concat "dicon " constants.Icon.Filter}} />
 				<div class="name">Updated recently ({{recentUpdate.length}})</div>
 			</div>
@@ -48,7 +48,7 @@
 		<div class="list">
 			{{#if categories}}
 				{{#each categories as |cat|}}
-					<div class="item {{if cat.selected "selected"}}" {{action "onDocumentFilter" "category" cat.id}}>
+					<div class="item {{if cat.selected "selected"}}" {{action "onDocumentFilter" "category" cat.id}} role="button" tabindex="0">
 						<i class={{concat "dicon " constants.Icon.Category}} />
 						<div class="name">{{cat.category}} ({{cat.docCount}})</div>
 					</div>
diff --git a/gui/app/templates/components/folder/space-toolbar.hbs b/gui/app/templates/components/folder/space-toolbar.hbs
index 0b2ab6b0..7218a693 100644
--- a/gui/app/templates/components/folder/space-toolbar.hbs
+++ b/gui/app/templates/components/folder/space-toolbar.hbs
@@ -2,14 +2,14 @@
 	{{#if (or hasDocuments pinState.isPinned session.authenticated)}}
 		{{#ui/ui-toolbar-dropdown label="Content" arrow=true}}
 			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
-				<div class="menu">
+				<div class="menu" role="menu">
 					{{#if pinState.isPinned}}
-						<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
+						<li class="item" {{action "onUnpin"}} role="button" tabindex="0">Remove bookmark</li>
 					{{else if session.authenticated}}
-						<li class="item" {{action "onPin"}}>Bookmark</li>
+						<li class="item" {{action "onPin"}} role="button" tabindex="0">Bookmark</li>
 					{{/if}}
 					{{#if hasDocuments}}
-						<li class="item" {{action "onShowExport"}}>Download</li>
+						<li class="item" {{action "onShowExport"}} role="button" tabindex="0">Download</li>
 					{{/if}}
 				</div>
 			{{/attach-popover}}
@@ -19,12 +19,12 @@
 	{{#if permissions.documentAdd}}
 		{{#ui/ui-toolbar-dropdown label="New" arrow=true}}
 			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
-				<div class="menu">
-					<li class="item" {{action "onShowEmptyDocModal"}}>Blank canvas</li>
+				<div class="menu" role="menu">
+					<li class="item" {{action "onShowEmptyDocModal"}} role="button" tabindex="0">Blank canvas</li>
 					{{#if hasTemplates}}
-						<li class="item" {{action "onShowTemplateDocModal"}}>From template</li>
+						<li class="item" {{action "onShowTemplateDocModal"}} role="button" tabindex="0">From template</li>
 					{{/if}}
-					<li class="item" {{action "onShowImportDocModal"}}>Import files</li>
+					<li class="item" {{action "onShowImportDocModal"}} role="button" tabindex="0">Import files</li>
 				</div>
 			{{/attach-popover}}
 		{{/ui/ui-toolbar-dropdown}}
@@ -41,7 +41,7 @@
 		<div class="modal-content">
 			<div class="modal-header">Blank Canvas</div>
 			<div class="modal-body">
-				<form onsubmit={{action "onAddEmptyDoc"}}>
+				<form onsubmit={{action "onAddEmptyDoc"}} role="form">
 					<div class="form-group">
 						<label for="empty-doc-name">Document Name</label>
 						{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
@@ -61,7 +61,7 @@
 		<div class="modal-content">
 			<div class="modal-header">From Template</div>
 			<div class="modal-body">
-				<form onsubmit={{action "onAddTemplateDoc"}}>
+				<form onsubmit={{action "onAddTemplateDoc"}} role="form">
 					<div class="form-group">
 						<label for="template-doc-name">Document Name</label>
 						{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
diff --git a/gui/app/templates/components/layout/master-navigation.hbs b/gui/app/templates/components/layout/master-navigation.hbs
index 2d79b67a..5f04c5c5 100644
--- a/gui/app/templates/components/layout/master-navigation.hbs
+++ b/gui/app/templates/components/layout/master-navigation.hbs
@@ -3,25 +3,25 @@
 		{{#unless hideNavigation}}
 			<div class="options">
 				{{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}}
-					<i class={{concat "dicon " constants.Icon.Grid}} title="Spaces" />
+					<i class={{concat "dicon " constants.Icon.Grid}} title="Spaces" tabindex="0" role="button" />
 				{{/link-to}}
 				{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
 					{{#if session.viewDashboard}}
 						{{#link-to "action" class=(if (eq selectedItem "actions") "option selected" "option")}}
-							<i class={{concat "dicon " constants.Icon.ListBullet}} title="Actions" />
+							<i class={{concat "dicon " constants.Icon.ListBullet}} title="Actions" tabindex="0" role="button" />
 						{{/link-to}}
 						{{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}}
-							<i class={{concat "dicon " constants.Icon.Pulse}} title="Activity" />
+							<i class={{concat "dicon " constants.Icon.Pulse}} title="Activity" tabindex="0" role="button" />
 						{{/link-to}}
 					{{/if}}
 					{{#if session.viewAnalytics}}
 						{{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}}
-							<i class={{concat "dicon " constants.Icon.BarChart}} title="Reports" />
+							<i class={{concat "dicon " constants.Icon.BarChart}} title="Reports" tabindex="0" role="button" />
 						{{/link-to}}
 					{{/if}}
 				{{/if}}
 				{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
-					<i class={{concat "dicon " constants.Icon.Search}} title="Search" />
+					<i class={{concat "dicon " constants.Icon.Search}} title="Search" role="search" tabindex="0" />
 				{{/link-to}}
 			</div>
 
@@ -29,31 +29,31 @@
 				{{#if session.isAdmin}}
 					{{#unless appMeta.valid}}
 						<div class="option invalid-plan" {{action "onBilling"}}>
-							<i class={{concat "dicon " constants.Icon.Announce}} title="Missing activation key" />
+							<i class={{concat "dicon " constants.Icon.Announce}} title="Missing activation key" tabindex="0" role="button" />
 						</div>
 					{{/unless}}
 					{{#unless appMeta.configured}}
 						<div class="option invalid-plan" {{action "onConfigured"}}>
-							<i class={{concat "dicon " constants.Icon.Announce}} title="Missing mail server settings" />
+							<i class={{concat "dicon " constants.Icon.Announce}} title="Missing mail server settings" tabindex="0" role="button" />
 						</div>
 					{{/unless}}
 				{{/if}}
 				{{#if session.authenticated}}
 					{{#if hasPins}}
 						<div class="option" id="user-pins-button">
-							<i class={{concat "dicon " constants.Icon.BookmarkSolid}}></i>
+							<i class={{concat "dicon " constants.Icon.BookmarkSolid}} aria-haspopup="menu" tabindex="0" role="button" title="Bookmarked content"></i>
 							{{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}}
 								<div class="menu">
 									{{#if hasSpacePins}}
 										<li class="item header">Spaces</li>
 										{{#each spacePins as |pin|}}
-											<a class="item" href="#" {{action "jumpToPin" pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
+											<a class="item" href="#" {{action "jumpToPin" pin}} data-id= {{pin.id}} id="pin-{{pin.id}}" tabindex="0" role="button">{{pin.pin}}</a>
 										{{/each}}
 									{{/if}}
 									{{#if hasDocumentPins}}
 										<li class="item header">Content</li>
 										{{#each documentPins as |pin|}}
-											<a class="item" href="#" {{action "jumpToPin" pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
+											<a class="item" href="#" {{action "jumpToPin" pin}} data-id= {{pin.id}} id="pin-{{pin.id}}" tabindex="0" role="button">{{pin.pin}}</a>
 										{{/each}}
 									{{/if}}
 								</div>
@@ -61,7 +61,7 @@
 						</div>
 					{{/if}}
 					<div class="user-gravatar-container">
-						<div class="user-gravatar" id="profile-button">
+						<div class="user-gravatar" id="profile-button" tabindex="0" role="button" aria-haspopup="menu">
 							{{session.user.initials}}
 							{{#if hasWhatsNew}}
 								<div class="whats-new-dot" />
diff --git a/gui/app/templates/components/search/search-results.hbs b/gui/app/templates/components/search/search-results.hbs
index 2d6d2505..075dc774 100644
--- a/gui/app/templates/components/search/search-results.hbs
+++ b/gui/app/templates/components/search/search-results.hbs
@@ -5,19 +5,19 @@
 			{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
 				{{#ui/ui-toolbar-icon icon=constants.Icon.Sort color=constants.Color.Gray tooltip="Sort"}}
 					{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
-						<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
+						<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}} role="button" tabindex="0" title="Close" aria-label="Close" />
 						<div class="container">
 							<Ui::UiSpacer @size="100" />
 
 							<div class="text-center">
 								<ul class="ui-option-picker ui-option-picker-horiz">
-									<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
+									<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}} role="button" tabindex="0" aria-label="Sort by name">
 										<div class="text">Name</div>
 									</li>
-									<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
+									<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}} role="button" tabindex="0" aria-label="Sort by created">
 										<div class="text">Created date</div>
 									</li>
-									<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
+									<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}} role="button" tabindex="0" aria-label="Sort by revised">
 										<div class="text">Last updated</div>
 									</li>
 								</ul>
@@ -27,10 +27,10 @@
 
 							<div class="text-center">
 								<ul class="ui-option-picker ui-option-picker-horiz">
-									<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
+									<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}} role="button" tabindex="0" aria-label="Sort ascending">
 										<div class="text">Ascending</div>
 									</li>
-									<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
+									<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}} role="button" tabindex="0" aria-label="Sort descending">
 										<div class="text">Descending</div>
 									</li>
 								</ul>
diff --git a/gui/app/templates/components/search/search-view.hbs b/gui/app/templates/components/search/search-view.hbs
index 744f1f76..b2a1a34d 100644
--- a/gui/app/templates/components/search/search-view.hbs
+++ b/gui/app/templates/components/search/search-view.hbs
@@ -1,5 +1,5 @@
 <div class="view-search">
-	<form onsubmit={{action "onSearch"}} class="form-inline">
+	<form onsubmit={{action "onSearch"}} class="form-inline" role="form">
 		<div class="form-group">
 			{{focus-input type="text" value=keywords class="form-control mr-3 search-box" placeholder="keywords, tags"}}
 		</div>
diff --git a/gui/app/templates/components/section/gemini/type-editor.hbs b/gui/app/templates/components/section/gemini/type-editor.hbs
index 8f3d4779..69cb2b3b 100644
--- a/gui/app/templates/components/section/gemini/type-editor.hbs
+++ b/gui/app/templates/components/section/gemini/type-editor.hbs
@@ -30,7 +30,7 @@
 					<ul class="section-gemini-workspaces">
 						{{#each workspaces as |card|}}
 							<li class="section-gemini-workspace" id="gemini-workspace-{{card.Id}}" title="{{card.Title}}">
-								<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action "onWorkspaceChange" card.Id}}>{{card.Key}}</div>
+								<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action "onWorkspaceChange" card.Id}} role="button" tabindex="0">{{card.Key}}</div>
 								{{#if card.selected}}
 									<div class="section-gemini-selected-card">&#10003;</div>
 								{{/if}}
diff --git a/gui/app/templates/components/section/jira/type-editor.hbs b/gui/app/templates/components/section/jira/type-editor.hbs
index bab6e886..3a2b8e5f 100644
--- a/gui/app/templates/components/section/jira/type-editor.hbs
+++ b/gui/app/templates/components/section/jira/type-editor.hbs
@@ -15,7 +15,7 @@
 		{{/unless}}
 	{{/if}}
 	{{#if authenticated}}
-		<form {{action "onPreview"}}>
+		<form {{action "onPreview"}} role="form">
 			<div class="form-group">
 				<label for="jira-jql">Jira Query Language</label>
 				{{focus-input id="jira-jql" type="text" value=config.jql class="form-control" placeholder="e.g. (status = resolved AND project = SysAdmin) OR assignee = bobsmith"}}
diff --git a/gui/app/templates/components/section/papertrail/type-editor.hbs b/gui/app/templates/components/section/papertrail/type-editor.hbs
index 4046f9c8..009dfd62 100644
--- a/gui/app/templates/components/section/papertrail/type-editor.hbs
+++ b/gui/app/templates/components/section/papertrail/type-editor.hbs
@@ -19,7 +19,7 @@
 		</div>
 		<div class="grid-cell-2">
 			{{#if authenticated}}
-				<form {{action "onAction" on="submit"}}>
+				<form {{action "onAction" on="submit"}} role="form">
 					<div class="form-group">
 						<label for="papertrail-query">Search query</label>
 						{{input id="papertrail-query" type="text" class="form-control mousetrap" value=config.query}}
diff --git a/gui/app/templates/components/section/pdf/type-editor.hbs b/gui/app/templates/components/section/pdf/type-editor.hbs
index 6e52618f..4067f5da 100644
--- a/gui/app/templates/components/section/pdf/type-editor.hbs
+++ b/gui/app/templates/components/section/pdf/type-editor.hbs
@@ -20,7 +20,7 @@
 
     <div class="form-group">
         <label for="new-space-name">Sidebar</label>
-        <select onchange={{action "onSetSidebar" value="target.value"}} class="form-control">
+        <select onchange={{action "onSetSidebar" value="target.value"}} class="form-control" role="button" tabindex="0">
             <option value="none" selected={{is-equal pdfOption.sidebar "none"}}>
                 None
             </option>
diff --git a/gui/app/templates/components/section/trello/type-editor.hbs b/gui/app/templates/components/section/trello/type-editor.hbs
index 765f4be4..351da23d 100644
--- a/gui/app/templates/components/section/trello/type-editor.hbs
+++ b/gui/app/templates/components/section/trello/type-editor.hbs
@@ -20,7 +20,7 @@
 					<div class="section-trello-board" style= {{boardStyle}}>
 						<div class="section-trello-board-title">{{config.board.name}}</div>
 						{{#each config.lists as |list|}}
-							<div class="section-trello-list" {{action "onListCheckbox" list.id}}>
+							<div class="section-trello-list" {{action "onListCheckbox" list.id}} role="button" tabindex="0">
 								{{#if list.included}}
 									<i class="section-trello-list-checkbox dicon {{constants.Icon.CheckboxChecked}}" />
 								{{else}}
@@ -49,4 +49,4 @@
 		{{/if}}
 	{{/if}}
 
-{{/section/base-editor}}
\ No newline at end of file
+{{/section/base-editor}}
diff --git a/gui/app/templates/components/ui/label-color-picker.hbs b/gui/app/templates/components/ui/label-color-picker.hbs
index 69904189..ae6ddd8d 100644
--- a/gui/app/templates/components/ui/label-color-picker.hbs
+++ b/gui/app/templates/components/ui/label-color-picker.hbs
@@ -2,7 +2,7 @@
 	{{#each colors as |color|}}
 		<div class="color {{if color.selected "selected"}}"
 			style={{concat "background-color: " color.code ";"}}
-			{{action "onSelect" color.code}}>
+			{{action "onSelect" color.code}} role="button" tabindex="0">
 		</div>
 	{{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/gui/app/templates/components/ui/theme-picker.hbs b/gui/app/templates/components/ui/theme-picker.hbs
index 19cda14f..e150b26d 100644
--- a/gui/app/templates/components/ui/theme-picker.hbs
+++ b/gui/app/templates/components/ui/theme-picker.hbs
@@ -1,7 +1,7 @@
 <div class="theme-picker">
 	{{#each themes as |theme|}}
-		<div class="theme {{if theme.selected "selected"}}" style={{concat "background-color: " theme.primary}} {{action "onSelect" theme.name}}>
+		<div class="theme {{if theme.selected "selected"}}" style={{concat "background-color: " theme.primary}} {{action "onSelect" theme.name}} role="button" tabindex="0">
 			{{theme.name}}
 		</div>
 	{{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/gui/app/templates/components/ui/ui-button.hbs b/gui/app/templates/components/ui/ui-button.hbs
index 935f6e54..fd9429c1 100644
--- a/gui/app/templates/components/ui/ui-button.hbs
+++ b/gui/app/templates/components/ui/ui-button.hbs
@@ -1,5 +1,5 @@
 {{#if hasIcon}}
-	<i class="dicon {{iconClass}}"/>
+	<i class="dicon {{iconClass}}" />
 {{/if}}
 <div class="label" title={{label}}>{{label}}</div>
-{{yield}}
\ No newline at end of file
+{{yield}}
diff --git a/gui/app/templates/components/ui/ui-checkbox.hbs b/gui/app/templates/components/ui/ui-checkbox.hbs
index 664d77ca..5554a8a2 100644
--- a/gui/app/templates/components/ui/ui-checkbox.hbs
+++ b/gui/app/templates/components/ui/ui-checkbox.hbs
@@ -1,4 +1,4 @@
-<div class="ui-checkbox {{if selected "ui-checkbox-selected"}}" {{action "onCheck"}}>
+<div class="ui-checkbox {{if selected "ui-checkbox-selected"}}" {{action "onCheck"}} role="checkbox" tabindex="0">
 	{{#if selected}}
 		<i class="dicon {{constants.Icon.CheckboxChecked}} selected" />
 	{{else}}
diff --git a/gui/app/templates/components/ui/ui-dialog.hbs b/gui/app/templates/components/ui/ui-dialog.hbs
index 0e39bbe2..232cb8ae 100644
--- a/gui/app/templates/components/ui/ui-dialog.hbs
+++ b/gui/app/templates/components/ui/ui-dialog.hbs
@@ -3,7 +3,7 @@
 		<div class="modal-content">
 			<div class="modal-header">{{title}}</div>
 			<div class="modal-body">
-				<form onsubmit={{action "onAction"}}>
+				<form onsubmit={{action "onAction"}} role="form">
 					 {{yield}}
 				</form>
 			</div>
diff --git a/gui/app/templates/components/ui/ui-list-picker.hbs b/gui/app/templates/components/ui/ui-list-picker.hbs
index 5071f31a..c620e91f 100644
--- a/gui/app/templates/components/ui/ui-list-picker.hbs
+++ b/gui/app/templates/components/ui/ui-list-picker.hbs
@@ -1,10 +1,10 @@
 <div class="widget-list-picker">
 	<ul class="options" style={{{styleCss}}}>
 		{{#each items as |item|}}
-			<li class="option {{if item.selected "selected"}}" {{action "onToggle" item}}>
+			<li class="option {{if item.selected "selected"}}" {{action "onToggle" item}} role="button" tabindex="0">
 				<div class="text text-truncate">{{get item nameField}}</div>
 				{{#if item.selected}}
-					<i class="dicon {{constants.Icon.Tick}}" />
+					<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
 				{{/if}}
 			</li>
 		{{/each}}