From a53723f7c8541531715c11a8681c7133aaf82a4e Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Mon, 25 Mar 2024 12:53:31 -0600
Subject: [PATCH] changed role attritubet to class in page editor ui

the role attribute is being used incorrectly through out the site, which
is bad for screen reader, so they need to be removed and replaced with
the class attribute

the page editor was the biggest culprit, so that one has been converted
first
---
 public/assets/css/dash/page-editor.css        | 195 ++++++------------
 .../scripts/dash/app/actions/PageActions.js   |   2 +-
 .../dash/app/controllers/PageEditor.js        |  20 +-
 .../assets/scripts/dash/app/ui/TextEditor.js  |  14 +-
 resources/views/back/page.blade.php           |  42 ++--
 resources/views/includes/editor.blade.php     |   2 +-
 6 files changed, 105 insertions(+), 170 deletions(-)

diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css
index 408a2b1..b39ddeb 100644
--- a/public/assets/css/dash/page-editor.css
+++ b/public/assets/css/dash/page-editor.css
@@ -1,12 +1,12 @@
 /* FILE MANAGER */
-main > section[role="file-manager"] {
+main > section.file-manager {
   width: 100%;
   background: var(--primary-highlight);
   padding: 20px 0;
   margin-top: 75px;
 }
 
-main > section[role="file-manager"] label[role="list-title"] {
+main > section.file-manager label.list-title {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
@@ -14,7 +14,7 @@ main > section[role="file-manager"] label[role="list-title"] {
   color: var(--primary);
 }
 
-main > section[role="file-manager"] > div[role="file-drop"] {
+main > section.file-manager > div.file-drop {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,8 +28,8 @@ main > section[role="file-manager"] > div[role="file-drop"] {
   margin: 10px auto;
 }
 
-main > section[role="file-manager"] > div[role="page-images-list"],
-main > section[role="file-manager"] > div[role="page-files-list"] {
+main > section.file-manager > div.page-images-list,
+main > section.file-manager > div.page-files-list {
   max-width: 900px;
   width: 100%;
   margin: 10px auto;
@@ -38,8 +38,8 @@ main > section[role="file-manager"] > div[role="page-files-list"] {
   gap: 10px;
 }
 
-main > section[role="file-manager"] > div[role="page-images-list"] > div,
-main > section[role="file-manager"] > div[role="page-files-list"] > div {
+main > section.file-manager > div.page-images-list > div,
+main > section.file-manager > div.page-files-list > div {
   width: 100%;
   height: 150px;
   border-radius: 3px;
@@ -48,117 +48,79 @@ main > section[role="file-manager"] > div[role="page-files-list"] > div {
   cursor: pointer;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div
-  > div.item-progress {
+main > section.file-manager > div.page-images-list > div > div.item-progress {
   width: 100%;
   height: 100%;
   background: var(--primary);
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] button {
+main > section.text-editor > div.text-editor-control button {
   border-radius: 0;
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] button > i {
+main > section.text-editor > div.text-editor-control button > i {
   font-size: 1.6em;
 }
 
-main
-  > section[role="text-editor"]
-  > div[role="text-editor-control"]
-  > button:nth-child(1) {
+main > section.text-editor > div.text-editor-control > button:nth-child(1) {
   border-radius: 3px 0 0 3px;
 }
 
-main
-  > section[role="text-editor"]
-  > div[role="text-editor-control"]
-  > button:nth-child(10) {
+main > section.text-editor > div.text-editor-control > button:nth-child(10) {
   border-radius: 0 3px 3px 0;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div
-  > button.media-remove,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div
-  > button.media-remove {
+main > section.file-manager > div.page-images-list > div > button.media-remove,
+main > section.file-manager > div.page-files-list > div > button.media-remove {
   color: var(--white);
   margin: 5px;
   padding: 10px 15px 7px;
   font-size: 1.5em;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div.video-item
-  > video {
+main > section.file-manager > div.page-images-list > div.video-item > video {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-images-list"]
-  > div.video-item
-  > button,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.audio-item
-  > button,
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.file-item
-  > button {
+main > section.file-manager > div.page-images-list > div.video-item > button,
+main > section.file-manager > div.page-files-list > div.audio-item > button,
+main > section.file-manager > div.page-files-list > div.file-item > button {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.audio-item {
+main > section.file-manager > div.page-files-list > div.audio-item {
   background: url("/assets/images/global/upload-audio.png") no-repeat center center /
     cover;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item {
+main > section.file-manager > div.page-files-list > div.file-item {
   background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
 }
 
-main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item > a {
+main > section.file-manager > div.page-files-list > div.file-item > a {
   position: absolute;
   bottom: 0;
   background: var(--secondary);
   padding: 2px;
 }
 
-main
-  > section[role="file-manager"]
-  > div[role="page-files-list"]
-  > div.audio-item
-  > audio {
+main > section.file-manager > div.page-files-list > div.audio-item > audio {
   height: 100%;
   width: 100%;
 }
 
 /* PAGE META */
 
-main > section[role="page-meta"] {
+main > section.page-meta {
   width: 100%;
   background: var(--secondary-highlight);
 }
 
-main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
+main > section.page-meta > div.page-meta-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
@@ -168,7 +130,7 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
   color: var(--secondary);
 }
 
-main section[role="page-meta"] textarea#post-title-text {
+main section.page-meta textarea#post-title-text {
   font-family: var(--base-type);
   width: 100%;
   height: 80px;
@@ -176,14 +138,14 @@ main section[role="page-meta"] textarea#post-title-text {
   color: var(--primary);
 }
 
-main section[role="page-meta"] textarea#post-tags {
+main section.page-meta textarea#post-tags {
   font-family: var(--base-type);
   width: 100%;
   height: 80px;
   color: var(--primary);
 }
 
-main section[role="page-meta"] select {
+main section.page-meta select {
   background: var(--primary);
   color: var(--secondary);
   border-radius: 3px;
@@ -194,15 +156,11 @@ main section[role="page-meta"] select {
   font-size: 1.5em;
 }
 
-main section[role="page-meta"] div[role="page-options"] {
+main section.page-meta div.page-options {
   width: 100%;
 }
 
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button {
+main section.page-meta div.page-meta-wrapper div.page-options button {
   width: 25%;
   height: 45px;
   transition: all 0.3s linear;
@@ -214,45 +172,36 @@ main
 }
 
 main
-  > section[role="page-meta"]
-  > div[role="page-meta-wrapper"]
-  > div[role="page-options"]
+  > section.page-meta
+  > div.page-meta-wrapper
+  > div.page-options
   > button.post-option-btn:nth-child(3) {
   border-radius: 3px 0 0 3px;
 }
 
-main
-  > section[role="page-meta"]
-  > div[role="page-meta-wrapper"]
-  > div[role="page-options"]
-  > a
-  > button {
+main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
   border-radius: 0 3px 3px 0;
 }
 
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-created"]
-  input {
+main section.page-meta div.page-meta-wrapper div.page-created input {
   display: none;
   visibility: hidden;
 }
 
 /* TEXT EDITOR */
 
-main > section[role="text-editor"] {
+main > section.text-editor {
   width: 100%;
   max-width: 900px;
   margin: 10px auto;
 }
 
-main section[role="text-editor"] .icon-hide {
+main section.text-editor .icon-hide {
   display: none;
   visibility: hidden;
 }
 
-main > section[role="text-editor"] > div[role="text-editor-control"] {
+main > section.text-editor > div.text-editor-control {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
 }
@@ -264,7 +213,7 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
   top: 65px;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
+main > section.text-editor > div.edit-post-wrapper {
   width: 100%;
   max-width: 900px;
   border-radius: 5px;
@@ -272,13 +221,13 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
   margin: 10px 0;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
+main > section.text-editor > div.edit-post-wrapper textarea:focus {
   outline: none;
   border-color: var(--secondary-highlight);
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
-main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
+main section.text-editor div.edit-post-wrapper #edit,
+main section.text-editor div.edit-post-wrapper #highlight {
   font-family: var(--mono-type);
   border: 0;
   width: 100%;
@@ -297,25 +246,25 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
   margin: 0;
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight-content {
+main section.text-editor div.edit-post-wrapper #highlight-content {
   word-wrap: normal;
   white-space: pre-wrap;
   line-break: normal;
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
+main > section.text-editor > div.edit-post-wrapper > #edit {
   z-index: 1;
   background: transparent;
   color: transparent;
   caret-color: var(--secondary-highlight);
 }
 
-main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {
+main > section.text-editor > div.edit-post-wrapper > #highlight {
   z-index: 0;
 }
 
-main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
-main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
+main section.text-editor div.edit-post-wrapper pre,
+main section.text-editor div.edit-post-wrapper pre code {
   padding: 0;
   margin: 0;
 }
@@ -323,68 +272,56 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
 /* RESPONSIVE */
 
 @media only screen and (max-width: 900px) {
-  main > section[role="file-manager"] > div[role="file-drop"],
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"],
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"],
-  main > section[role="text-editor"] {
+  main > section.file-manager > div.file-drop,
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list,
+  main > section.page-meta > div.page-meta-wrapper,
+  main > section.text-editor {
     width: 97%;
   }
 }
 
 @media only screen and (max-width: 480px) {
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"] {
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list {
     grid-template-columns: 1fr 1fr 1fr;
   }
 
-  main > section[role="file-manager"] > div[role="file-drop"],
-  main > section[role="file-manager"] > div[role="page-images-list"],
-  main > section[role="file-manager"] > div[role="page-files-list"],
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"],
-  main > section[role="text-editor"] {
+  main > section.file-manager > div.file-drop,
+  main > section.file-manager > div.page-images-list,
+  main > section.file-manager > div.page-files-list,
+  main > section.page-meta > div.page-meta-wrapper,
+  main > section.text-editor {
     width: 95%;
   }
 
-  main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
+  main > section.page-meta > div.page-meta-wrapper {
     grid-template-columns: 1fr;
   }
 
-  main > section[role="text-editor"] > div[role="text-editor-control"] {
+  main > section.text-editor > div.text-editor-control {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(1) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(1) {
     border-radius: 3px 0;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(5) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(5) {
     border-radius: 0 3px;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(6) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(6) {
     border-radius: 0 0 0 3px;
   }
 
-  main
-    > section[role="text-editor"]
-    > div[role="text-editor-control"]
-    > button:nth-child(10) {
+  main > section.text-editor > div.text-editor-control > button:nth-child(10) {
     border-radius: 0 0 3px;
   }
 
-  main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
-  main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
+  main section.text-editor div.edit-post-wrapper #edit,
+  main section.text-editor div.edit-post-wrapper #highlight {
     font-size: 0.8em;
   }
 }
diff --git a/public/assets/scripts/dash/app/actions/PageActions.js b/public/assets/scripts/dash/app/actions/PageActions.js
index ee37efd..cac3529 100644
--- a/public/assets/scripts/dash/app/actions/PageActions.js
+++ b/public/assets/scripts/dash/app/actions/PageActions.js
@@ -10,7 +10,7 @@ export default class PostActions {
 	collectInfo(files) {
 		return new Promise((resolve, reject) => {
 			let pageInfo = [];
-			let pageRef = document.querySelector('[role="file-manager"]');
+			let pageRef = document.querySelector('.file-manager');
 			//process html content for storage
 			let txt = document.createElement('textarea');
 			txt.innerHTML = document.getElementById('highlight-content').innerHTML;
diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js
index 57ab0e7..a90736a 100644
--- a/public/assets/scripts/dash/app/controllers/PageEditor.js
+++ b/public/assets/scripts/dash/app/controllers/PageEditor.js
@@ -28,23 +28,23 @@ export default class PostEditor {
 		this.postUUID = null;
 		this.postLayout = null;
 		this.fm = null;
-		if (document.querySelector('[role="file-manager"]').getAttribute('data-index')) {
+		if (document.querySelector('.file-manager').getAttribute('data-index')) {
 			this.postID = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-index');
 			this.postUUID = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-uuid');
 			this.postLayout = document
-				.querySelector('[role="file-manager"]')
+				.querySelector('.file-manager')
 				.getAttribute('data-layout');
 		}
 		if (document.getElementById('edit')) {
 			this.editor = new TextEditor(
 				document.getElementById('edit'),
-				document.querySelector('[role="file-manager"]').offsetHeight +
-					document.querySelector('[role="page-meta"]').offsetHeight +
-					document.querySelector('[role="text-editor"]').offsetHeight
+				document.querySelector('.page-meta').offsetHeight +
+					document.querySelector('.file-manager').offsetHeight +
+					document.querySelector('.text-editor').offsetHeight
 			);
 			this.editor.addListener(
 				EditorEvent.EDITOR_DELETE,
@@ -89,13 +89,13 @@ export default class PostEditor {
 	// methods
 	//--------------------------
 	start() {
-		if (document.querySelector('[role="file-drop"]')) {
+		if (document.querySelector('.file-drop')) {
 			//insert fileManager here
 			this.fm = new FileManager(
-				document.querySelector('[role="file-drop"]'),
+				document.querySelector('.file-drop'),
 				document.getElementById('page-files-upload'),
 				document.getElementById('page-images-list'),
-				document.querySelector('[role="page-files-list"]')
+				document.querySelector('.page-files-list')
 			);
 			var optionButtons = document.querySelectorAll('.post-option-btn');
 			for (var i = 0, length = optionButtons.length; i < length; i++) {
diff --git a/public/assets/scripts/dash/app/ui/TextEditor.js b/public/assets/scripts/dash/app/ui/TextEditor.js
index 3954e0b..e846a4e 100644
--- a/public/assets/scripts/dash/app/ui/TextEditor.js
+++ b/public/assets/scripts/dash/app/ui/TextEditor.js
@@ -18,22 +18,20 @@ class TextEditor extends EventEmitter {
 	constructor(textEditor, scrollLimit) {
 		super();
 
-		document
-			.querySelector('[role="text-editor-control"]')
-			.addEventListener('scroll', e => {
-				console.log('HERE');
-			});
+		document.querySelector('.text-editor-control').addEventListener('scroll', e => {
+			console.log('HERE');
+		});
 
 		document.body.addEventListener('scroll', e => {
 			var fixLimit = scrollLimit;
 			//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
 			if (document.body.scrollTop + 5 >= fixLimit) {
 				document
-					.querySelector('[role="text-editor-control"]')
+					.querySelector('.text-editor-control')
 					.classList.add('control-freeze');
 			} else {
 				document
-					.querySelector('[role="text-editor-control"]')
+					.querySelector('.text-editor-control')
 					.classList.remove('control-freeze');
 			}
 		});
@@ -47,7 +45,7 @@ class TextEditor extends EventEmitter {
 				.replace(new RegExp('&', 'g'), '&amp;')
 				.replace(new RegExp('<', 'g'), '&lt;');
 			let editorHeight = document.getElementById('highlight').offsetHeight;
-			document.querySelector('[role="edit-post-wrapper"]').style.height =
+			document.querySelector('.edit-post-wrapper').style.height =
 				editorHeight + 'px';
 			e.target.style.height = editorHeight + 30 + 'px'; //TODO: yeah, it's ugly but it works for now, fix soon
 			// Syntax Highlight
diff --git a/resources/views/back/page.blade.php b/resources/views/back/page.blade.php
index fb92e56..b7e67f4 100644
--- a/resources/views/back/page.blade.php
+++ b/resources/views/back/page.blade.php
@@ -32,21 +32,21 @@
 @endphp
 
   @section('main-content')
-    <section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" role="file-manager">
+    <section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" class="file-manager">
         @if($feature == '')
-            <div role="file-drop">
+            <div class="file-drop">
                 <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
             </div>
-            <label role="list-title">IMAGES AND VIDEO</label>
-            <div id="page-images-list" role="page-images-list"></div>
-            <label role="list-title">FILES</label>
-            <div role="page-files-list"></div>
+            <label class="list-title">IMAGES AND VIDEO</label>
+            <div id="page-images-list" class="page-images-list"></div>
+            <label class="list-title">FILES</label>
+            <div class="page-files-list"></div>
         @else
-            <div role="file-drop">
+            <div class="file-drop">
                 <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
             </div>
-            <label role="list-title">IMAGES AND VIDEO</label>
-            <div id="page-images-list" role="page-images-list">
+            <label class="list-title">IMAGES AND VIDEO</label>
+            <div id="page-images-list" class="page-images-list">
                 @if(count($media)>1)
                     @foreach($media as $item)
                         @if($item['type'] == "mp4")
@@ -80,8 +80,8 @@
                     @endif
                 @endif
             </div>
-            <label role="list-title">FILES</label>
-            <div role="page-files-list">
+            <label class="list-title">FILES</label>
+            <div class="page-files-list">
                 @if(count($files) > 1)
                     @foreach($files as $item)
                         @php
@@ -135,17 +135,17 @@
 
             </div>
         @endif
-    </section><section role="page-meta">
-        <div role="page-meta-wrapper">
-            <div role="page-title">
+    </section><section class="page-meta">
+        <div class="page-meta-wrapper">
+            <div class="page-title">
                 <strong>TITLE</strong>
                 <textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ $title }}</textarea>
             </div>
-            <div role="page-tags">
+            <div class="page-tags">
                 <strong>TAGS</strong>
                 <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ $tags }}</textarea>
             </div>
-            <div role="page-layouts">
+            <div class="page-layouts">
                 <strong>LAYOUTS</strong>
                 <select id="page-templates">
                     @foreach($views as $view)
@@ -157,19 +157,19 @@
                     @endforeach
                 </select>
             </div>
-            <div role="page-options">
+            <div class="page-options">
                 <strong>OPTIONS</strong>
                 @spaceless
                     @include('includes.options')
                 @endspaceless
             </div>
-            <div role="page-updated">
+            <div class="page-updated">
                 <strong>UPDATED</strong>
                 <span id="post-date" type="text">
                     {{ $updated }}
                 </span>
             </div>
-            <div role="page-created">
+            <div class="page-created">
                 <strong>CREATED</strong>
                 <span id="post-date" type="text">
                     {{ $date }}
@@ -180,11 +180,11 @@
             </div>
         </div>
     </section>
-    <section role="text-editor">
+    <section class="text-editor">
         @spaceless
         @include('includes.editor')
         @endspaceless
-        <div role="edit-post-wrapper">
+        <div class="edit-post-wrapper">
             <textarea id="edit" spellcheck="false" class="language-md">{{ $content }}</textarea>
             <pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>
         </div>
diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php
index dcbcd19..59aa00f 100644
--- a/resources/views/includes/editor.blade.php
+++ b/resources/views/includes/editor.blade.php
@@ -1,4 +1,4 @@
-<div role="text-editor-control">
+<div class="text-editor-control">
     <button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
         <svg id="edit-bold" role="icon">
               <use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/>