Taiga Intergration Test 2

First one used the wrong hook type. TG-3 #testing
Taiga Integration Test
21 changed files with 185 additions and 213 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 The Fipamo project was born from a need for a simple, easy to use no data blog platform that doesn't require much effort to set up and maintain. Fipamo uses Markdown to handle posts and renders them to flat html so you can serve them from anywhere. No complicated set ups. No long list of dependencies. Just set up and go. 

-Because nobody has time for all that.
+Because it's the 21 century. This should be easy.

 ## Check the (WIP) Docs to get you started.  <br>

--- a/brain/views/dash/_frame.twig
+++ b/brain/views/dash/_frame.twig
@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="UTF-8">
-		<meta name="theme-color" content="#FFFFFF"/>
+		<meta name="theme-color" content="#1d3040"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>
 			{% block title %}
@ -15,14 +15,10 @@
 		{% if status %}
 			<header>
 				{% apply spaceless %}
-				<nav role="top-nav">
-					<div role="nav-left">
-						<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
-					</div>
-					<div role="title">
-						<h1>{{ title }}</h1>
-					</div>
-					<div role="nav-right">
+				<nav class="top-nav">
+					<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
+					<h1>{{ title }}</h1>
+					<div class="nav-right">
 						{% if status %}
 							{% apply spaceless %}
 							{{ include("dash/partials/navigation.twig") }}
@ -30,7 +26,7 @@
 						{% endif %}
 					</div>
 				</nav>
-				<div role="notify">
+				<div class="notify" role="note">
 					{% apply spaceless %}
 					{{ include("dash/partials/notifications.twig") }}
 					{% endapply %}
--- a/brain/views/dash/forms/login.twig
+++ b/brain/views/dash/forms/login.twig
@ -1,4 +1,4 @@
-<section role="login">
+<section class="login">
 	<div>
 		<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
 	</div>
--- a/brain/views/dash/partials/index.twig
+++ b/brain/views/dash/partials/index.twig
@ -1,10 +1,10 @@
-<section role="index-header">
-	<div role="index-header-left">
+<section class="index-header">
+	<div class="index-header-left">
 		<h1>Recent</h1>
 	</div>
-	<div role="index-header-right"></div>
+	<div class="index-header-right"></div>
 </section>
-<section role="index-recent-pages">
+<section class="index-recent-pages">
 	{% if data["entryCount"] != 0 %}
 		{% for page in data['pages'] %}
 			{% if page.media[0].type == 'mp4' %}
--- a/brain/views/dash/partials/navigation.twig
+++ b/brain/views/dash/partials/navigation.twig
@ -1,4 +1,4 @@
-<div role="menu">
+<div class="menu">
 	{% if title == "Settings" %}
 		{% apply spaceless %}
 		{{ include("dash/partials/submenu_settings.twig") }}
@ -25,11 +25,11 @@
 	</a>
 </div>

-<button role="menu-toggle">
+<button class="menu-toggle">
 	<i class="ti ti-menu-2"></i>
 </button>

-<div role="mobile-menu">
+<div class="mobile-menu">
 	{% if title == "Settings" %}
 		{% apply spaceless %}
 		{{ include("dash/partials/submenu_settings.twig") }}
--- a/brain/views/dash/partials/notifications.twig
+++ b/brain/views/dash/partials/notifications.twig
@ -1,10 +1,10 @@
-<div role="notify-message">
-	<div role="notify-icons">
-		<i class="ti ti-mood-smile" role="notify-good"></i>
-		<i class="ti ti-mood-sad" role="notify-notgood"></i>
-		<i class="ti ti-settings" role="notify-working"></i>
+<div class="notify-message">
+	<div class="notify-icons">
+		<i class="ti ti-mood-smile notify-good"></i>
+		<i class="ti ti-mood-sad notify-notgood"></i>
+		<i class="ti ti-settings notify-working"></i>
 	</div>
-	<div role="notify-text">
-		<span role="response-text">Hey Hey</span>
+	<div class="notify-text">
+		<span class="response-text">Hey Hey</span>
 	</div>
 </div>
--- a/brain/views/dash/partials/options.twig
+++ b/brain/views/dash/partials/options.twig
@ -16,17 +16,17 @@
 	{% set published = 'false' %}
 {% endif %}
 <br>
-	<button id="option-menu-pin" class="option-inactive post-option-btn" aria-pressed="{{ menu }}" data-active="{{ menu }}" title='Pin to Menu'>
+	<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
 		<svg id="option-page-icon" role="icon">
 			<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
 		</svg>
 	</button>
-	<button id="option-feature" class="option-inactive post-option-btn" aria-pressed="{{ featured }}" data-active="{{ featured }}" title='Feature'>
+	<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
 		<svg id="option-feature-icon" role="icon">
 			<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
 		</svg>
 	</button>
-	<button id="option-published" class="option-inactive post-option-btn" aria-pressed="{{ published }}" data-active="{{ published }}" title='Published'>
+	<button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'>
 		<svg id="option-published-icon" role="icon">
 			<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
 		</svg>
--- a/brain/views/dash/partials/submenu_settings.twig
+++ b/brain/views/dash/partials/submenu_settings.twig
@ -1,4 +1,4 @@
-<div role="submenu">
+<div class="submenu">
 	<button id="save-toggle" title="save settings">
 		<i class="ti ti-device-floppy"></i>
 	</button>
--- a/brain/views/dash/partials/submenu_start.twig
+++ b/brain/views/dash/partials/submenu_start.twig
@ -1,4 +1,4 @@
-<div role="submenu">
+<div class="submenu">
 	<a href='/dashboard/pages' title="view pages">
 		<button>
 			<i class="ti ti-book-2"></i>
--- a/brain/views/dash/settings.twig
+++ b/brain/views/dash/settings.twig
@ -9,14 +9,14 @@
 	{% endblock %}

 	{% block mainContent %}
-		<article role="settings">
-			<section role="member-settings">
-				<div role="member-avatar">
-					<div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div>
+		<article class="settings">
+			<section class="member-settings">
+				<div class="member-avatar">
+					<div class="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div>
 					<input id="avatar-upload" type="file" name="avatar-upload"/>
 				</div>
-				<div role="site-background">
-					<div role="background" style="background: url({{ background }} ) no-repeat center center / cover"></div>
+				<div class="site-background">
+					<div class="background" style="background: url({{ background }} ) no-repeat center center / cover"></div>
 					<input id="background-upload" type="file" name="backgrond-upload"/>
 				</div>
 				<div>
@ -39,7 +39,7 @@
 						<span>span No back ups. Frowny face.</span>
 					{% endif %}
 				</div>
-				<div role="features">
+				<div class="features">
 					{% if apiStatus is defined and apiStatus == "true" %}
 						<button id="api-access-toggle" title="allow external api" data-enabled="true">
 							<i class="ti ti-phone-incoming"></i>
@ -67,7 +67,7 @@

 					{% endif %}
 				</div>
-				<div role="theme">
+				<div class="theme">
 					<label>Themes</label><br/>
 					{% for theme in themes %}
 						{% if theme.name == currentTheme %}
@ -84,7 +84,7 @@

 					{% endfor %}
 				</div>
-				<div role="mail">
+				<div class="mail">
 					<label>Email</label><br/>
 					{% if mailOption == "option-none" or mailOption == "" %}
 						<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
--- a/public/assets/css/dash/frame.css
+++ b/public/assets/css/dash/frame.css
@ -73,26 +73,26 @@ header {
  z-index: 500;
 }

-header > nav > div[role="nav-left"] img {
+header > nav > a img {
  width: 40px;
  padding: 5px;
 }

-header > nav > div[role="title"] {
+header > nav > h1 {
  text-align: left;
  height: 100%;
 }

-header > nav > div[role="title"] h1 {
+header > nav > h1 {
  color: var(--primary);
  margin: 15px;
 }

-header > nav > div[role="nav-right"] {
+header > nav > div.nav-right {
  padding: 5px;
 }

-header > nav > div > div[role="mobile-menu"] {
+header > nav > div > div.mobile-menu {
  display: none;
  position: fixed;
  z-index: 1000;
@ -101,7 +101,7 @@ header > nav > div > div[role="mobile-menu"] {
  background: var(--white);
 }

-header > nav > div[role="nav-right"] button {
+header > nav > div.nav-right button {
  width: 40px;
  height: 40px;
  margin-left: 5px;
@ -109,25 +109,21 @@ header > nav > div[role="nav-right"] button {
  color: var(--white);
 }

-header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
+header > nav > div.nav-right > button.menu-toggle {
  display: none;
 }

-header > nav > div[role="nav-right"] div[role="submenu"] {
+header > nav > div.nav-right div.submenu {
  display: inline;
 }

-header > nav > div[role="nav-right"] div[role="submenu"] button {
+header > nav > div.nav-right div.submenu button {
  background: var(--primary);
  color: var(--white);
  font-size: 0.8em;
 }

-header
-  > nav
-  > div[role="nav-right"]
-  div[role="submenu"]
-  button[data-render="true"] {
+header > nav > div.nav-right div.submenu button[data-render="true"] {
  background: var(--tertiary);
  color: var(--primary);
 }
@ -141,11 +137,11 @@ header
 }

@media only screen and (max-width: 530px) {
-  header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
+  header > nav > div.nav-right > button.menu-toggle {
    display: inline;
  }

-  header > nav > div > div[role="menu"] {
+  header > nav > div > div.menu {
    display: none;
  }
 }
--- a/public/assets/css/dash/index.css
+++ b/public/assets/css/dash/index.css
@ -1,4 +1,4 @@
-section[role="index-header"] {
+section[class="index-header"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
@ -6,7 +6,7 @@ section[role="index-header"] {
  margin: 60px auto 0;
 }

-section[role="index-recent-pages"] a {
+section[class="index-recent-pages"] a {
  width: 100%;
  height: 100%;
  display: flex;
@ -17,7 +17,7 @@ section[role="index-recent-pages"] a {
  position: relative;
 }

-section[role="index-recent-pages"] a video {
+section[class="index-recent-pages"] a video {
  width: 100%;
  position: absolute;
  object-fit: cover;
@ -25,32 +25,32 @@ section[role="index-recent-pages"] a video {
  border-radius: 5px;
 }

-section[role="index-recent-pages"] a:nth-child(1) {
+section[class="index-recent-pages"] a:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
 }

-section[role="index-recent-pages"] a:nth-child(2) {
+section[class="index-recent-pages"] a:nth-child(2) {
  grid-row: 3/6;
 }

-section[role="index-recent-pages"] a:nth-child(3) {
+section[class="index-recent-pages"] a:nth-child(3) {
  grid-column: 2/4;
  grid-row: 3/5;
 }

-section[role="index-header"] div[role="index-header-right"] {
+section[class="index-header"] div[class="index-header-right"] {
  display: flex;
  justify-content: right;
  align-items: center;
 }

-section[role="index-header"] div[role="index-header-right"] a {
+section[class="index-header"] div[class="index-header-right"] a {
  border-bottom: none;
  margin-left: 5px;
 }

-section[role="index-recent-pages"] {
+section[class="index-recent-pages"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(200px, auto);
@ -60,31 +60,31 @@ section[role="index-recent-pages"] {
  margin: 10px auto;
 }

-section[role="index-recent-pages"] a button {
+section[class="index-recent-pages"] a button {
  padding: 1px 5px;
 }

-section[role="index-recent-pages"] button i {
+section[class="index-recent-pages"] button i {
  font-size: 1.8em;
 }

-section[role="index-recent-pages"] button[data-active="true"] {
+section[class="index-recent-pages"] button[data-active="true"] {
  background: var(--primary);
 }

-section[role="index-recent-pages"] button[data-active="true"] i {
+section[class="index-recent-pages"] button[data-active="true"] i {
  color: var(--tertiary);
 }

-section[role="index-recent-pages"] button[data-active="false"] {
+section[class="index-recent-pages"] button[data-active="false"] {
  background: var(--secondary);
 }

-section[role="index-recent-pages"] button[data-active="false"] i {
+section[class="index-recent-pages"] button[data-active="false"] i {
  fill: var(--primary);
 }

-section[role="index-recent-pages"] aside {
+section[class="index-recent-pages"] aside {
  font-size: 1.1em;
  color: var(--white);
  text-shadow: 2px 2px 2px var(--black);
@ -92,57 +92,57 @@ section[role="index-recent-pages"] aside {
  z-index: 10;
 }

-section[role="index-recent-pages"] hr {
+section[class="index-recent-pages"] hr {
  color: var(--white);
  border: 0.1px solid;
  margin: 7px 0;
 }

@media only screen and (max-width: 900px) {
-  section[role="index-header"],
-  section[role="index-recent-pages"] {
+  section[class="index-header"],
+  section[class="index-recent-pages"] {
    width: 97%;
  }
 }

@media only screen and (max-width: 520px) {
-  section[role="index-recent-pages"] {
+  section[class="index-recent-pages"] {
    grid-template-columns: 1fr 1fr;
  }

-  section[role="index-recent-pages"] a:nth-child(1) {
+  section[class="index-recent-pages"] a:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/2;
  }

-  section[role="index-recent-pages"] a:nth-child(2) {
+  section[class="index-recent-pages"] a:nth-child(2) {
    grid-row: 2/3;
    grid-column: 1/2;
  }

-  section[role="index-recent-pages"] a:nth-child(3) {
+  section[class="index-recent-pages"] a:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
 }

@media only screen and (max-width: 350px) {
-  section[role="index-recent-pages"] a:nth-child(2) {
+  section[class="index-recent-pages"] a:nth-child(2) {
    grid-column: 1/3;
    grid-row: 2/3;
  }

-  section[role="index-recent-pages"] a:nth-child(3) {
+  section[class="index-recent-pages"] a:nth-child(3) {
    grid-column: 1/3;
    grid-row: 3/4;
  }

-  section[role="index-recent-pages"] a:nth-child(4) {
+  section[class="index-recent-pages"] a:nth-child(4) {
    grid-column: 1/3;
    grid-row: 4/5;
  }

-  section[role="index-recent-pages"] a:nth-child(5) {
+  section[class="index-recent-pages"] a:nth-child(5) {
    grid-column: 1/3;
    grid-row: 5/6;
  }
--- a/public/assets/css/dash/init.css
+++ b/public/assets/css/dash/init.css
@ -1,6 +1,6 @@
 /* LOGIN */

-section[role="login"],
+section.login,
 section[role="password-reset"],
 section[role="restore-fresh"],
 section[role="restore-backup"] {
@ -20,19 +20,19 @@ section[role="restore-backup"] {
  color: var(--white);
 }

-section[role="login"] form input {
+section.login form input {
  width: 95%;
  height: 30px;
  padding: 5px;
  margin-bottom: 10px;
 }

-section[role="login"] form button {
+section.login form button {
  padding: 10px 5px;
  width: 82%;
 }

-section[role="login"] form a {
+section.login form a {
  padding: 10px 5px;
  border-radius: 5px;
  width: 10%;
@ -88,7 +88,7 @@ section[role="restore-backup"] form input {
 /* RESPONSIVE */

@media only screen and (max-width: 500px) {
-  section[role="login"],
+  section.login,
  section[role="password-reset"],
  section[role="restore-fresh"],
  section[role="restore-backup"] {
@ -97,14 +97,14 @@ section[role="restore-backup"] form input {
 }

@media only screen and (max-width: 375px) {
-  section[role="login"],
+  section.login,
  section[role="password-reset"],
  section[role="restore-fresh"],
  section[role="restore-backup"] {
    grid-template-columns: 1fr;
  }

-  section[role="login"] img,
+  section.login img,
  section[role="password-reset"] img,
  section[role="restore-fresh"] img,
  section[role="restore-backup"] img {
--- a/public/assets/css/dash/notifications.css
+++ b/public/assets/css/dash/notifications.css
@ -1,4 +1,4 @@
-header > nav[role="top-nav"] {
+header > nav.top-nav {
  display: grid;
  text-align: right;
  grid-template-columns: 50px auto auto;
@ -15,7 +15,7 @@ header > nav[role="top-nav"] {
  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
 }

-header > div[role="notify"] {
+header > div.notify {
  display: grid;
  height: 100%;
  position: relative;
@ -31,20 +31,17 @@ header > div[role="notify"] {
  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
 }

-header > div[role="notify"] > div[role="notify-message"] {
+header > div.notify > div.notify-message {
  display: flex;
  height: 86%;
 }

-header > div[role="notify"] > div[role="notify-message"] div {
+header > div.notify > div.notify-message div {
  display: inline-block;
  transition: all 0.2s linear;
 }

-header
-  > div[role="notify"]
-  > div[role="notify-message"]
-  > div[role="notify-text"] {
+header > div.notify > div.notify-message > div.notify-text {
  color: var(--white);
  border-radius: 5px;
  height: 79%;
@ -52,30 +49,23 @@ header
  opacity: 0;
 }

-header
-  > div[role="notify"]
-  > div[role="notify-message"]
-  > div[role="notify-icons"] {
+header > div.notify > div.notify-message > div.notify-icons {
  margin: 5px;
  width: 40px;
  opacity: 0;
 }

-header
-  > div[role="notify"]
-  > div[role="notify-message"]
-  > div[role="notify-text"]
-  span {
+header > div.notify > div.notify-message > div.notify-text span {
  display: block;
  padding: 5px;
 }

-header > div[role="notify"] > div[role="notify-message"] i {
+header > div.notify > div.notify-message i {
  display: none;
  color: var(--white);
 }

-i[role="notify-working"] {
+i.notify-working {
  animation: 2s infinite linear spin;
  height: 40px;
  width: 40px;
--- a/public/assets/css/dash/settings.css
+++ b/public/assets/css/dash/settings.css
@ -1,22 +1,22 @@
-article[role="settings"] {
+article[class="settings"] {
  margin: 100px auto;
  width: 100%;
  max-width: 900px;
  transition: all 0.8s linear;
 }

-article[role="settings"] h1 {
+article[class="settings"] h1 {
  color: var(--white);
 }

-article[role="settings"] label {
+article[class="settings"] label {
  color: var(--secondary);
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 400;
 }

-section[role="member-settings"] {
+section[class="member-settings"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: auto;
@ -26,100 +26,100 @@ section[role="member-settings"] {
  margin: 10px auto;
 }

-section[role="member-settings"] > div:nth-child(1) {
+section[class="member-settings"] > div:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3;
 }

-section[role="member-settings"] > div:nth-child(2) {
+section[class="member-settings"] > div:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1/3;
 }

-section[role="member-settings"] > div:nth-child(3) {
+section[class="member-settings"] > div:nth-child(3) {
  grid-row: 1/3;
 }

-section[role="member-settings"] > div:nth-child(4) {
+section[class="member-settings"] > div:nth-child(4) {
  color: var(--white);
 }

-section[role="member-settings"] > div:nth-child(4) a {
+section[class="member-settings"] > div:nth-child(4) a {
  font-weight: bold;
  text-decoration: underline;
  color: var(--tertiary);
 }

-section[role="member-settings"] > div:nth-child(5) {
+section[class="member-settings"] > div:nth-child(5) {
  grid-column: 2/4;
 }

-section[role="member-settings"] > div:nth-child(6) {
+section[class="member-settings"] > div:nth-child(6) {
  grid-column: 1/3;
 }

-section[role="member-settings"] > div:nth-child(7) {
+section[class="member-settings"] > div:nth-child(7) {
  grid-column: 3/5;
  min-height: 325px;
 }

-section[role="member-settings"] > div:nth-child(8) {
+section[class="member-settings"] > div:nth-child(8) {
  grid-column: 1/4;
  color: var(--white);
  word-wrap: break-word;
 }

-section[role="member-settings"] > div[role="member-avatar"] div,
-section[role="member-settings"] > div[role="site-background"] div {
+section[class="member-settings"] > div[class="member-avatar"] div,
+section[class="member-settings"] > div[class="site-background"] div {
  height: 100%;
  border-radius: 3px;
 }

-section[role="member-settings"] div input[type="file"] {
+section[class="member-settings"] div input[type="file"] {
  display: none;
  visibility: hidden;
 }

-section[role="member-settings"] div input[type="text"] {
+section[class="member-settings"] div input[type="text"] {
  width: 98.4%;
  height: 40px;
  margin-bottom: 10px;
 }

-section[role="member-settings"] div textarea {
+section[class="member-settings"] div textarea {
  width: 98.4%;
  height: 63%;
 }

-article[role="settings"] button {
+article[class="settings"] button {
  width: 100%;
  text-align: left;
  height: 50px;
  margin-bottom: 5px;
 }

-article[role="settings"] button > span {
+article[class="settings"] button > span {
  font-size: 0.8em;
  display: inline;
  top: -10px;
  position: relative;
 }

-section[role="member-settings"]
-  > div[role="features"]
+section[class="member-settings"]
+  > div[class="features"]
  button[data-enabled="true"] {
  color: var(--white);
 }

-section[role="member-settings"]
-  > div[role="features"]
+section[class="member-settings"]
+  > div[class="features"]
  button[data-enabled="false"] {
  color: var(--primary);
  background: var(--secondary);
 }

-section[role="member-settings"]
-  > div[role="theme"]
+section[class="member-settings"]
+  > div[class="theme"]
  button[data-enabled="true"] {
  color: var(--white);
  background: var(--highlight);
@ -128,8 +128,8 @@ section[role="member-settings"]
  padding: 3px;
 }

-section[role="member-settings"]
-  > div[role="theme"]
+section[class="member-settings"]
+  > div[class="theme"]
  button[data-enabled="false"] {
  color: var(--primary);
  background: var(--secondary);
@ -138,7 +138,7 @@ section[role="member-settings"]
  padding: 3px;
 }

-section[role="member-settings"] > div[role="mail"] a {
+section[class="member-settings"] > div[class="mail"] a {
  margin-right: 3px;
  color: var(--secondary);
  display: inline-block;
@ -147,129 +147,129 @@ section[role="member-settings"] > div[role="mail"] a {
  border-top: var(--primary) 1px solid;
 }

-section[role="member-settings"] > div[role="mail"] a[data-enabled="true"] {
+section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] {
  color: var(--tertiary);
  font-weight: bold;
  border-top: var(--highlight) 1px solid;
 }

-section[role="member-settings"] > div[role="mail"] div[data-enabled="false"] {
+section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] {
  visibility: hidden;
  display: none;
 }

-section[role="member-settings"] > div[role="mail"] input {
+section[class="member-settings"] > div[class="mail"] input {
  width: 98.4%;
  height: 40px;
  padding-left: 5px;
  margin-bottom: 10px;
 }

-section[role="data-settings"] {
+section[class="data-settings"] {
  color: var(--white);
 }

@media only screen and (max-width: 900px) {
-  main > article[role="settings"] {
+  main > article[class="settings"] {
    width: 97%;
  }
 }

@media only screen and (max-width: 650px) {
-  section[role="member-settings"] div input[type="text"] {
+  section[class="member-settings"] div input[type="text"] {
    width: 99.3%;
    height: 40px;
    margin-bottom: 10px;
  }

-  section[role="member-settings"] {
+  section[class="member-settings"] {
    grid-template-columns: 1fr 1fr;
  }

-  section[role="member-settings"] > div[role="mail"] input {
+  section[class="member-settings"] > div[class="mail"] input {
    width: 97.7%;
    height: 40px;
    padding-left: 5px;
    margin-bottom: 10px;
  }

-  section[role="member-settings"] div textarea {
+  section[class="member-settings"] div textarea {
    height: 80px;
    width: 99.3%;
  }

-  section[role="member-settings"] > div:nth-child(1) {
+  section[class="member-settings"] > div:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
    height: 200px;
  }

-  section[role="member-settings"] > div:nth-child(2) {
+  section[class="member-settings"] > div:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/3;
  }

-  section[role="member-settings"] > div:nth-child(3) {
+  section[class="member-settings"] > div:nth-child(3) {
    grid-column: 1/3;
    grid-row: 3/5;
  }

-  section[role="member-settings"] > div:nth-child(4) {
+  section[class="member-settings"] > div:nth-child(4) {
    grid-column: 1/2;
  }

-  section[role="member-settings"] > div:nth-child(5) {
+  section[class="member-settings"] > div:nth-child(5) {
    grid-column: 2/3;
  }

-  section[role="member-settings"] > div:nth-child(6) {
+  section[class="member-settings"] > div:nth-child(6) {
    grid-column: 1/2;
  }

-  section[role="member-settings"] > div:nth-child(7) {
+  section[class="member-settings"] > div:nth-child(7) {
    grid-column: 2/3;
    min-height: 325px;
  }

-  section[role="member-settings"] > div:nth-child(8) {
+  section[class="member-settings"] > div:nth-child(8) {
    grid-column: 1/3;
  }
 }

@media only screen and (max-width: 530px) {
-  section[role="member-settings"] > div[role="mail"] input {
+  section[class="member-settings"] > div[class="mail"] input {
    width: 98.5%;
  }

-  section[role="member-settings"] {
+  section[class="member-settings"] {
    grid-template-columns: 100%;
  }

-  section[role="member-settings"] div textarea {
+  section[class="member-settings"] div textarea {
    height: 80px;
  }

-  section[role="member-settings"] > div:nth-child(1) {
+  section[class="member-settings"] > div:nth-child(1) {
    grid-row: 1/3;
    height: 200px;
  }

-  section[role="member-settings"] > div:nth-child(2) {
+  section[class="member-settings"] > div:nth-child(2) {
    grid-row: 3/5;
    grid-column: 1;
    height: 200px;
  }

-  section[role="member-settings"] > div:nth-child(3) {
+  section[class="member-settings"] > div:nth-child(3) {
    grid-column: 1;
    grid-row: 5/7;
  }

-  section[role="member-settings"] > div:nth-child(4),
-  section[role="member-settings"] > div:nth-child(5),
-  section[role="member-settings"] > div:nth-child(6),
-  section[role="member-settings"] > div:nth-child(7),
-  section[role="member-settings"] > div:nth-child(8) {
+  section[class="member-settings"] > div:nth-child(4),
+  section[class="member-settings"] > div:nth-child(5),
+  section[class="member-settings"] > div:nth-child(6),
+  section[class="member-settings"] > div:nth-child(7),
+  section[class="member-settings"] > div:nth-child(8) {
    grid-column: 1;
  }
 }
--- a/public/assets/scripts/dash.js
+++ b/public/assets/scripts/dash.js
@ -3767,15 +3767,15 @@ $8b9e2899b2e82f52$var$anime.random = function(min, max) {
 var $8b9e2899b2e82f52$export$2e2bcd8739ae039 = $8b9e2899b2e82f52$var$anime;


-const $accfb6154319a04b$var$notifcation = document.querySelector('[role="notify-message"]');
+const $accfb6154319a04b$var$notifcation = document.querySelector(".notify-message");
 const $accfb6154319a04b$var$notify = document.getElementById("notify-message");
-const $accfb6154319a04b$var$responseText = document.querySelector('[role="response-text"]');
-const $accfb6154319a04b$var$notifyText = document.querySelector('[role="notify-text"]');
-const $accfb6154319a04b$var$notifyIcons = document.querySelector('[role="notify-icons"]');
+const $accfb6154319a04b$var$responseText = document.querySelector(".response-text");
+const $accfb6154319a04b$var$notifyText = document.querySelector(".notify-text");
+const $accfb6154319a04b$var$notifyIcons = document.querySelector(".notify-icons");
 //const notifyProgress = document.getElementById('notify-progress');
-const $accfb6154319a04b$var$iconGood = document.querySelector('[role="notify-good"]');
-const $accfb6154319a04b$var$iconNotGood = document.querySelector('[role="notify-notgood"]');
-const $accfb6154319a04b$var$iconWorking = document.querySelector('[role="notify-working"]');
+const $accfb6154319a04b$var$iconGood = document.querySelector(".notify-good");
+const $accfb6154319a04b$var$iconNotGood = document.querySelector(".notify-notgood");
+const $accfb6154319a04b$var$iconWorking = document.querySelector(".notify-working");
 class $accfb6154319a04b$export$2e2bcd8739ae039 {
    //--------------------------
    // constructor
@ -3805,12 +3805,12 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
            $accfb6154319a04b$var$iconWorking.style.display = "block";
        }
        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-            targets: document.querySelector('[role="top-nav"]'),
+            targets: document.querySelector(".top-nav"),
            rotateX: "180deg",
            easing: "easeOutQuint"
        });
        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-            targets: document.querySelector('[role="notify"]'),
+            targets: document.querySelector(".notify"),
            rotateX: "10deg",
            easing: "easeOutQuint",
            complete: ()=>{
@ -3845,12 +3845,12 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
                                    duration: 350
                                });
                                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-                                    targets: document.querySelector('[role="top-nav"]'),
+                                    targets: document.querySelector(".top-nav"),
                                    rotateX: "0deg",
                                    easing: "easeOutQuint"
                                });
                                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-                                    targets: document.querySelector('[role="notify"]'),
+                                    targets: document.querySelector(".notify"),
                                    rotateX: "180deg",
                                    easing: "easeOutQuint"
                                });
@ -6690,13 +6690,8 @@ class $371d2518d50c1748$export$2e2bcd8739ae039 {
                break;
        }
        if (currentOption != null) {
-            let active = currentOption.getAttribute("aria-pressed");
-            currentOption.setAttribute("data-active", "false");
-            currentOption.setAttribute("aria-pressed", "false");
-            if (active == "false") {
-                currentOption.setAttribute("data-active", "true");
-                currentOption.setAttribute("aria-pressed", "true");
-            }
+            let active = currentOption.getAttribute("data-active");
+            active == "false" ? currentOption.setAttribute("data-active", "true") : currentOption.setAttribute("data-active", "false");
        }
    }
    handleEditorOptions(e) {
@ -6925,10 +6920,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
            //console.log(err);
            }));
        //handle set up image uploads
-        document.querySelector('[role="avatar"]').addEventListener("click", ()=>{
+        document.querySelector(".avatar").addEventListener("click", ()=>{
            document.getElementById("avatar-upload").click();
        });
-        document.querySelector('[role="background"]').addEventListener("click", ()=>{
+        document.querySelector(".background").addEventListener("click", ()=>{
            document.getElementById("background-upload").click();
        });
        document.getElementById("avatar-upload").addEventListener("change", (e)=>{
@ -7206,8 +7201,8 @@ class $f32c20539eb29606$export$2e2bcd8739ae039 {
    //--------------------------
    constructor(){
        this.mobile = false;
-        this.mobileMenu = document.querySelector('[role="mobile-menu"]');
-        document.querySelector('[role="menu-toggle"]').addEventListener("click", (e)=>this.handleMobile(e));
+        this.mobileMenu = document.querySelector(".mobile-menu");
+        document.querySelector(".menu-toggle").addEventListener("click", (e)=>this.handleMobile(e));
    }
    //--------------------------
    // methods
--- a/public/assets/scripts/dash.js.map
+++ b/public/assets/scripts/dash.js.map
--- a/src/com/controllers/PageEditor.js
+++ b/src/com/controllers/PageEditor.js
@ -127,15 +127,10 @@ export default class PostEditor {
 				break;
 		}
 		if (currentOption != null) {
-			let active = currentOption.getAttribute('aria-pressed');
-			
-			currentOption.setAttribute('data-active', 'false');
-			currentOption.setAttribute('aria-pressed', 'false');
-			
-			if (active == 'false') {
-				currentOption.setAttribute('data-active', 'true');
-				currentOption.setAttribute('aria-pressed', 'true');
-			}
+			let active = currentOption.getAttribute('data-active');
+			active == 'false'
+				? currentOption.setAttribute('data-active', 'true')
+				: currentOption.setAttribute('data-active', 'false');
 		}
 	}
 	handleEditorOptions(e) {
--- a/src/com/controllers/SettingsIndex.js
+++ b/src/com/controllers/SettingsIndex.js
@ -39,10 +39,10 @@ export default class SettingsIndex {
 				})
 		);
 		//handle set up image uploads
-		document.querySelector('[role="avatar"]').addEventListener('click', () => {
+		document.querySelector('.avatar').addEventListener('click', () => {
 			document.getElementById('avatar-upload').click();
 		});
-		document.querySelector('[role="background"]').addEventListener('click', () => {
+		document.querySelector('.background').addEventListener('click', () => {
 			document.getElementById('background-upload').click();
 		});
 		document.getElementById('avatar-upload').addEventListener(
--- a/src/com/ui/Menu.js
+++ b/src/com/ui/Menu.js
@ -4,9 +4,9 @@ export default class Menu {
 	//--------------------------
 	constructor() {
 		this.mobile = false;
-		this.mobileMenu = document.querySelector('[role="mobile-menu"]');
+		this.mobileMenu = document.querySelector('.mobile-menu');
 		document
-			.querySelector('[role="menu-toggle"]')
+			.querySelector('.menu-toggle')
 			.addEventListener('click', e => this.handleMobile(e));
 	}
 	//--------------------------
--- a/src/com/ui/Notifications.js
+++ b/src/com/ui/Notifications.js
@ -1,13 +1,13 @@
 import anime from 'animejs/lib/anime.es.js';
-const notifcation = document.querySelector('[role="notify-message"]');
+const notifcation = document.querySelector('.notify-message');
 const notify = document.getElementById('notify-message');
-const responseText = document.querySelector('[role="response-text"]');
-const notifyText = document.querySelector('[role="notify-text"]');
-const notifyIcons = document.querySelector('[role="notify-icons"]');
+const responseText = document.querySelector('.response-text');
+const notifyText = document.querySelector('.notify-text');
+const notifyIcons = document.querySelector('.notify-icons');
 //const notifyProgress = document.getElementById('notify-progress');
-const iconGood = document.querySelector('[role="notify-good"]');
-const iconNotGood = document.querySelector('[role="notify-notgood"]');
-const iconWorking = document.querySelector('[role="notify-working"]');
+const iconGood = document.querySelector('.notify-good');
+const iconNotGood = document.querySelector('.notify-notgood');
+const iconWorking = document.querySelector('.notify-working');

 export default class Notfications {
 	//--------------------------
@ -41,13 +41,13 @@ export default class Notfications {
 		}

 		new anime({
-			targets: document.querySelector('[role="top-nav"]'),
+			targets: document.querySelector('.top-nav'),
 			rotateX: '180deg',
 			easing: 'easeOutQuint'
 		});

 		new anime({
-			targets: document.querySelector('[role="notify"]'),
+			targets: document.querySelector('.notify'),
 			rotateX: '10deg',
 			easing: 'easeOutQuint',
 			complete: () => {
@ -85,13 +85,13 @@ export default class Notfications {
 								});

 								new anime({
-									targets: document.querySelector('[role="top-nav"]'),
+									targets: document.querySelector('.top-nav'),
 									rotateX: '0deg',
 									easing: 'easeOutQuint'
 								});

 								new anime({
-									targets: document.querySelector('[role="notify"]'),
+									targets: document.querySelector('.notify'),
 									rotateX: '180deg',
 									easing: 'easeOutQuint'
 								});
Author	SHA1	Message	Date
Ro	49c1f2d3f2	Taiga Intergration Test 2 First one used the wrong hook type. TG-3 #testing	1 year ago
Ro	2ce0a4eb82	Taiga Integration Test Just seeing if this thing actually work TG-3 #testing	1 year ago
Ro	599fca18f1	Removed invalid role attributes from Settings page Cleaned up the settings page by removing the improper usage of the role tag and replaced it with class to maintain current design integrity. Also updated the script files that was referencing the old role tags	1 year ago
Ro	bea40049fc	Removed invalid role attributes from dash index Converted role tags to class to remove the invalid role attributes used.	1 year ago
Ro	df8e301a0b	Confirming Verify Commit Error I tried submitting an updated through and IDE and it does not properly verify signed commits. Using git from the command line works fine.	1 year ago
Ro	16de29c399	testing verified commits	1 year ago
Ro	ac08c77813	Removed role from header, notification and login Began the process of removing all invalid role attributes starting with the header, login, and notifications components. Updated the corresponding scripts as well. Made a few structural changes to the header to simply it and then tested it to ensure notification still worked.	1 year ago