Fixing aria-markup and keyboard accessibility/focus management for quality plugin.

* Adds aria-controls and aria-expanded status.
* Rewrites EventListeners to handle showing/hiding the flyout with keyboard and mouse events.
* Adding focus highlighting
* Converting px to rem
* Removing unnecessary CSS

Author: digitas-git

src/quality/quality.css

@@ -7,25 +7,28 @@
 .mejs-qualities-button > button {
     background: transparent;
     color: #fff;
-    font-size: 11px;
+    font-size: 0.6875rem;
     font-weight: 700;
-    line-height: normal;
-    margin: 9px 0 0;
-    width: 36px;
+    margin: 0.563rem 0 0;
+    width: 2.25rem;
 }
 
 .mejs__qualities-selector,
 .mejs-qualities-selector {
     background: rgba(50, 50, 50, 0.7);
-    border: solid 1px transparent;
+    border: 0.063rem solid transparent;
     border-radius: 0;
-    height: 100px;
-    left: -10px;
+    height: 6.25rem;
+    left: -0.625rem;
     overflow: hidden;
     padding: 0;
     position: absolute;
-    top: -100px;
-    width: 60px;
+    top: -6.25rem;
+    width: 3.75rem;
+}
+
+.mejs__qualities-selector:focus-within {
+    border-color: #fff;
 }
 
 .mejs__qualities-selector ul,
@@ -43,33 +46,38 @@
     cursor: pointer;
     display: block;
     list-style-type: none!important;
-    margin: 0 0 6px;
     overflow: hidden;
-    padding: 0 10px;
+    padding: 0 0.625rem;
+    border: 0.06rem solid transparent;
 }
+
 .mejs__qualities-selector li:hover,
 .mejs-qualities-selector li:hover {
     background-color: rgba(255, 255, 255, 0.2);
     cursor: pointer;
 }
 
+.mejs__qualities-selector li:focus-within,
+.mejs-qualities-selector li:focus-within {
+    border-color: #fff;
+}
+
 .mejs__qualities-selector input,
 .mejs-qualities-selector input {
     clear: both;
     float: left;
-    left: -1000px;
-    margin: 3px 3px 0 5px;
+    left: -62.5rem;
+    margin: 0.188rem 0.188rem 0 0.313rem;
     position: absolute;
 }
 
 .mejs__qualities-selector label,
 .mejs-qualities-selector label {
     cursor: pointer;
     float: left;
-    font-size: 10px;
-    line-height: 15px;
-    padding: 4px 0 0;
-    width: 55px;
+    font-size: 0.625rem;
+    padding: 0.375rem 0;
+    width: 3.438rem;
 }
 
 .mejs__qualities-selected,