focus me

HTML

<script src="https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/js/listbox-combobox.js"></script>
<script src="https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/js/listbox-combo-example.js"></script>
<link rel="stylesheet" href="https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/css/combobox-1.1.css">
  
<div id="ex3">
        <label id="ex3-label" class="combobox-label">
          Choice 3 Fruit or Vegetable
        </label>
        <div class="combobox-wrapper">
          <div role="combobox" aria-expanded="false" aria-owns="ex3-listbox" aria-haspopup="listbox" id="ex3-combobox">
            <input type="text" aria-autocomplete="both" aria-controls="ex3-listbox" aria-labelledby="ex3-label" id="ex3-input" aria-activedescendant="">
            <div class="combobox-dropdown" id="ex3-combobox-arrow" tabindex="-1" role="button" aria-label="Show vegetable options">
              <img src="imgs/arrow_drop_down_grey_27x27.png" alt="">
            </div>
          </div>
          <ul aria-labelledby="ex3-label" role="listbox" id="ex3-listbox" class="listbox hidden"></ul>
        </div>
      </div>

CSS

.annotate{
	font-style: italic;
	color: #366ED4;
}

.hidden {
	display: none;
}

.combobox-wrapper {
	display: inline-block;
	position: relative;
	font-size: 16px;
}

.combobox-label {
	font-size: 14px;
	font-weight: bold;
	margin-right: 5px;
}

.listbox, .grid {
	min-width: 230px;
	background: white;
	border: 1px solid #ccc;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.7em;
	z-index: 1;
}

.listbox .result {
	cursor: default;
	margin: 0;
}

.listbox .result:hover, .grid .result-row:hover {
	background: rgb(139, 189, 225);
}

.listbox .focused, .grid .focused {
	background: rgb(139, 189, 225);
}

.grid .focused-cell {
	outline-style: dotted;
	outline-color: green;
}

.combobox-wrapper input {
	font-size: inherit;
  border: 1px solid #aaa;
	border-radius: 2px;
  line-height: 1.5em;
	padding-right: 30px;
  width: 200px;
}

.combobox-dropdown {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 0 2px;
	height: 1.5em;
	border-radius: 0 2px 2px 0;
	border: 1px solid #aaa;
}

.grid .result-row {
	padding: 2px;
	cursor: default;
	margin: 0;
}

.grid .result-cell {
	display: inline-block;
	cursor: default;
	margin: 0;
	padding: 0 5px;
}

.grid .result-cell:last-child {
	float: right;
	font-size: 12px;
	font-weight: 200;
	color: #333;
	line-height: 24px;
}