Combobox の日本語化

content/patterns/combobox/examples/css/combobox-autocomplete.css

@@ -13,7 +13,7 @@
   background-color: white;
   color: black;
   box-sizing: border-box;
-  height: 24px;
+  height: 30px;
   padding: 0;
   margin: 0;
   vertical-align: bottom;
@@ -46,7 +46,7 @@ ul[role="listbox"] {
   padding: 0;
   position: absolute;
   left: 4px;
-  top: 28px;
+  top: 34px;
   list-style: none;
   background-color: white;
   display: none;

content/patterns/combobox/examples/css/grid-combo.css

@@ -23,7 +23,7 @@
   margin: 0;
   padding: 0;
   position: absolute;
-  top: 1.7em;
+  top: auto;
   z-index: 1;
 }
 

content/patterns/combobox/examples/css/select-only.css

@@ -20,7 +20,7 @@
   pointer-events: none;
   position: absolute;
   right: 16px;
-  top: 50%;
+  top: 65%;
   transform: translate(0, -65%) rotate(45deg);
   width: 12px;
 }
@@ -49,9 +49,9 @@
 
 .combo-label {
   display: block;
-  font-size: 20px;
   font-weight: 100;
   margin-bottom: 0.25em;
+  font-size: 1.2em;
 }
 
 .combo-menu {

content/patterns/combobox/examples/js/combobox-datepicker.js

@@ -11,18 +11,18 @@ class ComboboxDatePicker {
   constructor(cdp) {
     this.buttonLabel = 'Date';
     this.monthLabels = [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December',
+      '1月',
+      '2月',
+      '3月',
+      '4月',
+      '5月',
+      '6月',
+      '7月',
+      '8月',
+      '9月',
+      '10月',
+      '11月',
+      '12月',
     ];
 
     this.messageCursorKeys = 'Cursor keys can navigate dates';
@@ -756,7 +756,7 @@ class ComboboxDatePicker {
     }
 
     this.comboboxNode.value =
-      d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
+      d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
   }
 
   getDateFromCombobox() {
@@ -769,9 +769,9 @@ class ComboboxDatePicker {
       Number.isInteger(parseInt(parts[2]))
     ) {
       this.focusDay = new Date(
-        parseInt(parts[2]),
-        parseInt(parts[0]) - 1,
-        parseInt(parts[1])
+        parseInt(parts[0]),
+        parseInt(parts[1]) - 1,
+        parseInt(parts[2])
       );
       this.selectedDay = new Date(this.focusDay);
     } else {

content/patterns/combobox/examples/js/grid-combo-example.js

@@ -10,70 +10,70 @@
 var aria = aria || {};
 
 var FRUITS_AND_VEGGIES = [
-  ['Apple', 'Fruit'],
-  ['Artichoke', 'Vegetable'],
-  ['Asparagus', 'Vegetable'],
-  ['Banana', 'Fruit'],
-  ['Beets', 'Vegetable'],
-  ['Bell pepper', 'Vegetable'],
-  ['Broccoli', 'Vegetable'],
-  ['Brussels sprout', 'Vegetable'],
-  ['Cabbage', 'Vegetable'],
-  ['Carrot', 'Vegetable'],
-  ['Cauliflower', 'Vegetable'],
-  ['Celery', 'Vegetable'],
-  ['Chard', 'Vegetable'],
-  ['Chicory', 'Vegetable'],
-  ['Corn', 'Vegetable'],
-  ['Cucumber', 'Vegetable'],
-  ['Daikon', 'Vegetable'],
-  ['Date', 'Fruit'],
-  ['Edamame', 'Vegetable'],
-  ['Eggplant', 'Vegetable'],
-  ['Elderberry', 'Fruit'],
-  ['Fennel', 'Vegetable'],
-  ['Fig', 'Fruit'],
-  ['Garlic', 'Vegetable'],
-  ['Grape', 'Fruit'],
-  ['Honeydew melon', 'Fruit'],
-  ['Iceberg lettuce', 'Vegetable'],
-  ['Jerusalem artichoke', 'Vegetable'],
-  ['Kale', 'Vegetable'],
-  ['Kiwi', 'Fruit'],
-  ['Leek', 'Vegetable'],
-  ['Lemon', 'Fruit'],
-  ['Mango', 'Fruit'],
-  ['Mangosteen', 'Fruit'],
-  ['Melon', 'Fruit'],
-  ['Mushroom', 'Fungus'],
-  ['Nectarine', 'Fruit'],
-  ['Okra', 'Vegetable'],
-  ['Olive', 'Vegetable'],
-  ['Onion', 'Vegetable'],
-  ['Orange', 'Fruit'],
-  ['Parsnip', 'Vegetable'],
-  ['Pea', 'Vegetable'],
-  ['Pear', 'Fruit'],
-  ['Pineapple', 'Fruit'],
-  ['Potato', 'Vegetable'],
-  ['Pumpkin', 'Fruit'],
-  ['Quince', 'Fruit'],
-  ['Radish', 'Vegetable'],
-  ['Rhubarb', 'Vegetable'],
-  ['Shallot', 'Vegetable'],
-  ['Spinach', 'Vegetable'],
-  ['Squash', 'Vegetable'],
-  ['Strawberry', 'Fruit'],
-  ['Sweet potato', 'Vegetable'],
-  ['Tomato', 'Fruit'],
-  ['Turnip', 'Vegetable'],
-  ['Ugli fruit', 'Fruit'],
-  ['Victoria plum', 'Fruit'],
-  ['Watercress', 'Vegetable'],
-  ['Watermelon', 'Fruit'],
-  ['Yam', 'Vegetable'],
-  ['Zucchini', 'Vegetable'],
-];
+  ['リンゴ', '果物'],
+  ['アーティチョーク', '野菜'],
+  ['アスパラガス', '野菜'],
+  ['バナナ', '果物'],
+  ['ビート', '野菜'],
+  ['ピーマン', '野菜'],
+  ['ブロッコリー', '野菜'],
+  ['メキャベツ', '野菜'],
+  ['キャベツ', '野菜'],
+  ['ニンジン', '野菜'],
+  ['カリフラワー', '野菜'],
+  ['セロリ', '野菜'],
+  ['チャード', '野菜'],
+  ['チコリ', '野菜'],
+  ['トウモロコシ', '野菜'],
+  ['キュウリ', '野菜'],
+  ['ダイコン', '野菜'],
+  ['デーツ', '果物'],
+  ['エダマメ', '野菜'],
+  ['ナス', '野菜'],
+  ['エルダーベリー', '果物'],
+  ['フェンネル', '野菜'],
+  ['イチジク', '果物'],
+  ['ニンニク', '野菜'],
+  ['ブドウ', '果物'],
+  ['ハネデューメロン', '果物'],
+  ['アイスバーグレタス', '野菜'],
+  ['エルサレムアーティチョーク', '野菜'],
+  ['ケール', '野菜'],
+  ['キウイ', '果物'],
+  ['リーク', '野菜'],
+  ['レモン', '果物'],
+  ['マンゴー', '果物'],
+  ['マンゴスチン', '果物'],
+  ['メロン', '果物'],
+  ['キノコ', '菌類'],
+  ['ネクタリン', '果物'],
+  ['オクラ', '野菜'],
+  ['オリーブ', '野菜'],
+  ['タマネギ', '野菜'],
+  ['オレンジ', '果物'],
+  ['パースニップ', '野菜'],
+  ['エンドウ', '野菜'],
+  ['ナシ', '果物'],
+  ['パイナップル', '果物'],
+  ['ジャガイモ', '野菜'],
+  ['カボチャ', '果物'],
+  ['マルメロ', '果物'],
+  ['ラディッシュ', '野菜'],
+  ['ルバーブ', '野菜'],
+  ['エシャロット', '野菜'],
+  ['ホウレンソウ', '野菜'],
+  ['カボチャ', '野菜'],
+  ['イチゴ', '果物'],
+  ['サツマイモ', '野菜'],
+  ['トマト', '果物'],
+  ['カブ', '野菜'],
+  ['ウグリフルーツ', '果物'],
+  ['ビクトリアプラム', '果物'],
+  ['クレソン', '野菜'],
+  ['スイカ', '果物'],
+  ['ヤム', '野菜'],
+  ['ズッキーニ', '野菜'],
+].sort((a, b) => a[0].localeCompare(b[0])); // 配列リテラルをあいうえお順に並び替えると原文との対応が失われるため、sort()を使用
 
 function searchVeggies(searchString) {
   var results = [];

content/patterns/combobox/examples/js/select-only.js

@@ -170,6 +170,7 @@ function maintainScrollVisibility(activeElement, scrollParent) {
 const Select = function (el, options = []) {
   // element refs
   this.el = el;
+  this.labelEl = el.querySelector('.combo-label');
   this.comboEl = el.querySelector('[role=combobox]');
   this.listboxEl = el.querySelector('[role=listbox]');
 
@@ -194,7 +195,9 @@ Select.prototype.init = function () {
   this.comboEl.innerHTML = this.options[0];
 
   // add event listeners
+  this.labelEl.addEventListener('click', this.onLabelClick.bind(this));
   this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
+  this.listboxEl.addEventListener('focusout', this.onComboBlur.bind(this));
   this.comboEl.addEventListener('click', this.onComboClick.bind(this));
   this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
 
@@ -239,10 +242,13 @@ Select.prototype.getSearchString = function (char) {
   return this.searchString;
 };
 
-Select.prototype.onComboBlur = function () {
-  // do not do blur action if ignoreBlur flag has been set
-  if (this.ignoreBlur) {
-    this.ignoreBlur = false;
+Select.prototype.onLabelClick = function () {
+  this.comboEl.focus();
+};
+
+Select.prototype.onComboBlur = function (event) {
+  // do nothing if relatedTarget is contained within listboxEl
+  if (this.listboxEl.contains(event.relatedTarget)) {
     return;
   }