Add focus effects on custom select boxes for accessibility

progers · Feb 28, 2016 · d5261ca · d5261ca
1 parent cc2e430
commit d5261ca
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -267,6 +267,10 @@
         .customSelect select:focus {
             outline: none;
         }
+        /* Custom focus support because we cannot use parent CSS selectors. */
+        .customSelect#focused {
+            border-bottom: 1px solid rgba(0,0,0,0.87);
+        }
     </style>
 </head>
 <body>

diff --git a/index.js b/index.js
@@ -71,6 +71,20 @@ window.addEventListener('DOMContentLoaded', function() {
         onRightTypeChanged();
     });
 
+    // Ensure there is a focus effect on the custom type select boxes.
+    leftTypeSelect.addEventListener('focus', function(event) {
+        leftTypeSelect.parentElement.setAttribute('id', 'focused');
+    });
+    leftTypeSelect.addEventListener('blur', function(event) {
+        leftTypeSelect.parentElement.removeAttribute('id');
+    });
+    rightTypeSelect.addEventListener('focus', function(event) {
+        rightTypeSelect.parentElement.setAttribute('id', 'focused');
+    });
+    rightTypeSelect.addEventListener('blur', function(event) {
+        rightTypeSelect.parentElement.removeAttribute('id');
+    });
+
     // Drag and drop support.
     var insideCount = 0;
     var leftContent = left.querySelector('.content');