From d5261cab42bc63b9ee54c322ef21b097b3ef1d26 Mon Sep 17 00:00:00 2001 From: Philip Rogers Date: Sat, 27 Feb 2016 22:20:18 -0800 Subject: [PATCH] Add focus effects on custom select boxes for accessibility --- index.html | 4 ++++ index.js | 14 ++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/index.html b/index.html index 1ed3c3a..885bf16 100644 --- 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); + } diff --git a/index.js b/index.js index 2e02221..5c6d198 100644 --- 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');