Use <button> element for folder titles. (#137)

* title as button

* remove redundant properties

src/GUI.js

@@ -113,19 +113,11 @@ export default class GUI {
 		 * The DOM element that contains the title.
 		 * @type {HTMLElement}
 		 */
-		this.$title = document.createElement( 'div' );
+		this.$title = document.createElement( 'button' );
 		this.$title.classList.add( 'title' );
-		this.$title.setAttribute( 'role', 'button' );
 		this.$title.setAttribute( 'aria-expanded', true );
-		this.$title.setAttribute( 'tabindex', 0 );
 
 		this.$title.addEventListener( 'click', () => this.openAnimated( this._closed ) );
-		this.$title.addEventListener( 'keydown', e => {
-			if ( e.code === 'Enter' || e.code === 'Space' ) {
-				e.preventDefault();
-				this.$title.click();
-			}
-		} );
 
 		// enables :active pseudo class on mobile
 		this.$title.addEventListener( 'touchstart', () => {}, { passive: true } );

style/hierarchy.scss

@@ -4,13 +4,13 @@
 	.title {
 
 		height: var(--title-height);
-		line-height: calc(var(--title-height) - 4px);
 
 		font-weight: 600;
 		padding: 0 var(--padding);
-		-webkit-tap-highlight-color: transparent;
-		cursor: pointer;
-		outline: none;
+
+		width: 100%;
+		text-align: left;
+		background: none;
 
 		// we use an underline to indicate focus, don't underline arrow
 		text-decoration-skip: objects;

style/inputs.scss

@@ -68,6 +68,10 @@
 		color: var(--text-color);
 
 		width: 100%;
+		border: none;
+	}
+
+	.controller button {
 		height: var(--widget-height);
 
 		// todo: this is only here because three.js defines a global button style
@@ -76,7 +80,6 @@
 		background: var(--widget-color);
 		border-radius: var(--widget-border-radius);
 
-		border: none;
 
 		@include can-hover {
 			&:hover {