Make semantic elements to navigate with keyboard (#24,#26,#44)

.eslintrc.json

@@ -59,6 +59,7 @@
 		"one-var": ["error", { "initialized": "never", "uninitialized": "consecutive" }],
 		"prefer-arrow-callback": "error",
 		"prefer-destructuring": ["error", { "object": true }],
+		"quotes": ["error", "single"],
 		"quote-props": ["error", "as-needed"],
 		"require-jsdoc": "off",
 		"template-curly-spacing": ["error", "always"]

bytebeat.css

@@ -4,7 +4,7 @@ html {
 	background-color: #000;
 	color: #c5c8c6;
 	font-size: 15px;
-	font-family: Courier, Sans, sans-serif;
+	font-family: sans-serif;
 }
 
 body {
@@ -15,12 +15,16 @@ a, a:visited {
 	color: #89c2ff;
 }
 
-a:hover, code:hover {
+a:hover {
 	color: #ed88fb !important;
 }
 
+:focus-visible {
+	outline: 2px solid #614fdb;
+}
+
 .disabled {
-	display: none;
+	display: none !important;
 }
 
 /* ==[ Containers ] ======================================================================================= */
@@ -60,10 +64,10 @@ a:hover, code:hover {
 	display: flex;
 	flex-shrink: 0;
 	position: relative;
-	cursor: pointer;
 	box-sizing: border-box;
 	border: 2px solid #fda757;
 	overflow: hidden;
+	cursor: pointer;
 }
 
 #canvas-main {
@@ -102,8 +106,8 @@ a:hover, code:hover {
 	top: 50%;
 	left: 50%;
 	padding: 1px 8px;
-	color: #c5c8c6;
 	border-radius: 16px;
+	color: #c5c8c6;
 	line-height: 0;
 	-webkit-transform: translate(-50%, -50%);
 	-moz-transform: translate(-50%, -50%);
@@ -140,8 +144,8 @@ button[name="close"] {
 	padding: 3px 3px 3px 5px;
 	border: none;
 	box-sizing: border-box;
-	color: #fff;
 	background-color: #000;
+	color: #fff;
 	font: 13px/13px Monospace;
 	word-break: break-all;
 	outline: none;
@@ -200,52 +204,60 @@ button[name="close"] {
 
 /* ==[ Library ] ========================================================================================== */
 
-code {
-	display: inline;
-	margin: 0px;
+.code-text {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	border: none;
 	color: #ffcc53;
+	background: none;
+	font: 12px monospace;
+	text-align: left;
+	text-decoration: none;
 	white-space: pre-wrap;
 	word-wrap: break-word;
 	word-break: break-all;
 	cursor: pointer;
 }
 
+.code-text:hover {
+	color: #ed88fb !important;
+}
 .code-date, .code-length, .code-samplerate {
 	color: gray;
-	letter-spacing: -1px;
 	cursor: default;
 }
 
 .code-button {
 	display: inline-block;
-	margin: 1px 0 1px 6px;
-	padding: 1px 4px;
+	margin: 1px 0 0 6px;
+	padding: 2px 4px;
+	border: none;
 	border-radius: 3px;
-	color: #ced5e1;
 	background-image: linear-gradient(to bottom, #424242, #171b22);
+	color: #ced5e1;
+	font-family: inherit;
+	font-size: 12px;
+	line-height: 12px;
 	white-space: nowrap;
-	letter-spacing: -1px;
 	cursor: pointer;
 }
 
 .code-button:hover {
+	background-image: linear-gradient(to bottom, #3c508a, #1f2331);
 	color: #c2dfff;
-	background-image: linear-gradient(to bottom, #364779, #1f2331);
 }
 
-.code-button[disabled] {
-	opacity: 0.7;
-	color: #ced5e1 !important;
-	background-image: linear-gradient(to bottom, #424242, #171b22) !important;
-	cursor: default;
+.code-toggle {
+	width: 18px;
 }
 
 .entry {
 	position: relative;
 }
 
 .entry-children > .entry:not(:last-child) {
-	margin-bottom: 3px;
+	margin-bottom: 4px;
 }
 
 .entry-children > .entry::before {
@@ -264,19 +276,19 @@ code {
 .entry.star-white::before {
 	content: "\2605";
 	position: absolute;
-	top: -2px;
+	top: 0;
 	left: -12px;
 	color: white;
-	font-size: 11px;
+	font-size: 12px;
 }
 
 .entry.star-yellow::before {
 	content: "\2605";
 	position: absolute;
-	top: -2px;
+	top: 0;
 	left: -12px;
 	color: yellow;
-	font-size: 11px;
+	font-size: 12px;
 }
 
 .entry-top {
@@ -293,6 +305,7 @@ code {
 	border-bottom: 1px solid #444;
 	border-left: 1px solid #444;
 	border-radius: 3px;
+	background: #0a0a0a;
 	font-size: 12px;
 }
 
@@ -301,15 +314,19 @@ code {
 	padding: 4px 5px;
 	border-radius: 3px;
 	background-image: linear-gradient(to bottom, #202c46, #0b0d17);
-	font-weight: bold;
 	cursor: pointer;
 }
 
-.library-header:hover {
+.library-header:hover, .library-header:focus-visible {
 	background-image: linear-gradient(to bottom, #32426c, #151b2b);
 	color: #94c7ff;
 }
 
+.library-header > h1 {
+	margin: inherit;
+	font-size: inherit;
+}
+
 .loading-error {
 	text-align: center;
 	color: #f92672;
@@ -336,15 +353,17 @@ code {
 .control-button, .control-select {
 	height: 32px;
 	margin: 1px 2px;
+	padding: 0;
+	border: none;
 	border-radius: 6px;
-	color: #e3e3e3;
 	background-image: linear-gradient(to bottom, #959595, #242a37);
+	color: #e3e3e3;
 	cursor: pointer;
 }
 
 .control-button:not([disabled]):hover, .control-select:hover {
+	background-image: linear-gradient(to bottom, #738cc1, #28314a);
 	color: #c2dfff;
-	background-image: linear-gradient(to bottom, #738cc1, #28314a)
 }
 
 .control-button:not([disabled]):active, .control-select:active  {
@@ -362,22 +381,21 @@ code {
 	height: 32px;
 	margin: 1px 2px 1px 0;
 	padding: 0 8px;
-	color: #e3e3e3;
 	background: linear-gradient(to top, #3a445e, #181c26);
+	color: #e3e3e3;
 	border: none;
 	border-radius: 0 4px 4px 0;
 	font-weight: bold;
-	outline: none;
-	box-shadow: inset 0px 0px 12px rgba(202, 202, 202, 0.5);
+	box-shadow: inset 0 0 12px rgba(202, 202, 202, 0.5);
 }
 
 #control-counter-units {
 	margin-right: 0;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
 	text-align: center;
 	font: bold 13px tahoma;
 	line-height: 30px;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
 	user-select: none;
 }
 
@@ -398,7 +416,6 @@ code {
 	padding-left: 4px;
 	border: none;
 	font-weight: bold;
-	outline: none;
 }
 
 .control-select > option {
@@ -407,11 +424,11 @@ code {
 
 #control-volume {
 	appearance: none;
-	background-color: #2e3239;
 	width: 150px;
 	height: 14px;
 	margin: 10px 0 10px 4px;
 	border-radius: 15px;
+	background-color: #2e3239;
 	align-self: center;
 }