ffoodd · ffoodd · Jan 11, 2021 · Jan 9, 2021 · Jan 9, 2021 · Jan 11, 2021
diff --git a/css/a11y-ar.css b/css/a11y-ar.css
diff --git a/css/a11y-ar_error.css b/css/a11y-ar_error.css
diff --git a/css/a11y-ar_obsolete.css b/css/a11y-ar_obsolete.css
diff --git a/css/a11y-ar_warning.css b/css/a11y-ar_warning.css
diff --git a/css/a11y-en.css b/css/a11y-en.css
diff --git a/css/a11y-en_advices-only.css b/css/a11y-en_advices-only.css
diff --git a/css/a11y-en_error.css b/css/a11y-en_error.css
diff --git a/css/a11y-en_errors-only.css b/css/a11y-en_errors-only.css
diff --git a/css/a11y-en_obsolete.css b/css/a11y-en_obsolete.css
diff --git a/css/a11y-en_warning.css b/css/a11y-en_warning.css
diff --git a/css/a11y-es.css b/css/a11y-es.css
diff --git a/css/a11y-es_error.css b/css/a11y-es_error.css
diff --git a/css/a11y-es_obsolete.css b/css/a11y-es_obsolete.css
diff --git a/css/a11y-es_warning.css b/css/a11y-es_warning.css
diff --git a/css/a11y-fr.css b/css/a11y-fr.css
diff --git a/css/a11y-fr_error.css b/css/a11y-fr_error.css
diff --git a/css/a11y-fr_obsolete.css b/css/a11y-fr_obsolete.css
diff --git a/css/a11y-fr_warning.css b/css/a11y-fr_warning.css
diff --git a/css/a11y-gr.css b/css/a11y-gr.css
diff --git a/css/a11y-gr_error.css b/css/a11y-gr_error.css
diff --git a/css/a11y-gr_obsolete.css b/css/a11y-gr_obsolete.css
diff --git a/css/a11y-gr_warning.css b/css/a11y-gr_warning.css
diff --git a/css/a11y-pt-br.css b/css/a11y-pt-br.css
diff --git a/css/a11y-pt-br_error.css b/css/a11y-pt-br_error.css
diff --git a/css/a11y-pt-br_obsolete.css b/css/a11y-pt-br_obsolete.css
diff --git a/css/a11y-pt-br_warning.css b/css/a11y-pt-br_warning.css
diff --git a/css/a11y-ru.css b/css/a11y-ru.css
diff --git a/css/a11y-ru_error.css b/css/a11y-ru_error.css
diff --git a/css/a11y-ru_obsolete.css b/css/a11y-ru_obsolete.css
diff --git a/css/a11y-ru_warning.css b/css/a11y-ru_warning.css
diff --git a/css/a11y-zh.css b/css/a11y-zh.css
diff --git a/css/a11y-zh_error.css b/css/a11y-zh_error.css
diff --git a/css/a11y-zh_obsolete.css b/css/a11y-zh_obsolete.css
diff --git a/css/a11y-zh_warning.css b/css/a11y-zh_warning.css
diff --git a/docs/Hologram/test-assets/_header.html b/docs/Hologram/test-assets/_header.html
@@ -105,6 +105,7 @@
                   <option value="ru" lang="ru">русский</option>
                   <option value="zh" lang="zh">中文</option>
                   <option value="gr" lang="gr">ελληνικά</option>
+                  <option value="es" lang="es">Español</option>
                 </select>
               </p>
             </fieldset>

diff --git a/locales/ar.json b/locales/ar.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "مصصم كجدول",
   "advice:no-href": "رابط من غير هدف",
   "advice:no-https": "لا يوجد HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "توزيع شريط البحث",
   "error:empty-href": "المصدر غير موجود[href]",

diff --git a/locales/en.json b/locales/en.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Layout table",
   "advice:no-href": "Link without target",
   "advice:no-https": "No HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "Disrupting tab order",
   "error:empty-href": "Empty [href]",

diff --git a/locales/es.json b/locales/es.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Diseño con tablas",
   "advice:no-href": "Enlace sin destino",
   "advice:no-https": "No HTTPS",
+  "advice:select-option-not-empty": "<select required> debe empezar con <option value=\"\">",
 
   "error:tab-order": "Orden de pestaña disruptivo",
   "error:empty-href": "[href] vacío",

diff --git a/locales/fr.json b/locales/fr.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Tableau de mise en forme",
   "advice:no-href": "Lien sans cible",
   "advice:no-https": "Pas de HTTPS",
+  "advice:select-option-not-empty": "Un <select required> devrait débuter par <option value=\"\"",
 
   "error:tab-order": "Ordre de tabulation perturbé",
   "error:empty-href": "[href] vide",

diff --git a/locales/gr.json b/locales/gr.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Δεδομένα σε πίνακα διάταξης.",
   "advice:no-href": "Σύνδεσμος χωρίς διεύθυνση.",
   "advice:no-https": "Ο σύνδεσμος δεν είναι HTTPS.",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "[tabindex] > 0",
   "error:empty-href": "Κενή ιδιότητα [href].",

diff --git a/locales/pt-br.json b/locales/pt-br.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Layout table",
   "advice:no-href": "Link sem destino",
   "advice:no-https": "Sem HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "Interrupção da ordem da aba",
   "error:empty-href": "Vazio [href]",

diff --git a/locales/ru.json b/locales/ru.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "Таблица используемая для разметки страницы",
   "advice:no-href": "Пропущен [href] у ссылки",
   "advice:no-https": "Нет HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "Некорректное значение tabindex",
   "error:empty-href": "Пустой атрибут [href]",

diff --git a/locales/zh.json b/locales/zh.json
@@ -26,6 +26,7 @@
   "advice:table-presentation": "确认这个 [table] 元素是用于布局而非展示数据",
   "advice:no-href": "缺少 [href]",
   "advice:no-https": "缺少 HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
 
   "error:tab-order": "标签页位置不正确",
   "error:empty-href": "[href] 为空",

diff --git a/sass/locales/_ar.scss b/sass/locales/_ar.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "مصصم كجدول",
   "advice:no-href": "رابط من غير هدف",
   "advice:no-https": "لا يوجد HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "توزيع شريط البحث",
   "error:empty-href": "المصدر غير موجود[href]",
   "error:empty-link": " الرابط غير موجود...",

diff --git a/sass/locales/_en.scss b/sass/locales/_en.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Layout table",
   "advice:no-href": "Link without target",
   "advice:no-https": "No HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "Disrupting tab order",
   "error:empty-href": "Empty [href]",
   "error:empty-link": "Empty link…",

diff --git a/sass/locales/_es.scss b/sass/locales/_es.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Diseño con tablas",
   "advice:no-href": "Enlace sin destino",
   "advice:no-https": "No HTTPS",
+  "advice:select-option-not-empty": "<select required> debe empezar con <option value=\"\">",
   "error:tab-order": "Orden de pestaña disruptivo",
   "error:empty-href": "[href] vacío",
   "error:empty-link": "Enlace vacío…",

diff --git a/sass/locales/_fr.scss b/sass/locales/_fr.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Tableau de mise en forme",
   "advice:no-href": "Lien sans cible",
   "advice:no-https": "Pas de HTTPS",
+  "advice:select-option-not-empty": "Un <select required> devrait débuter par <option value=\"\"",
   "error:tab-order": "Ordre de tabulation perturbé",
   "error:empty-href": "[href] vide",
   "error:empty-link": "Lien vide",

diff --git a/sass/locales/_gr.scss b/sass/locales/_gr.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Δεδομένα σε πίνακα διάταξης.",
   "advice:no-href": "Σύνδεσμος χωρίς διεύθυνση.",
   "advice:no-https": "Ο σύνδεσμος δεν είναι HTTPS.",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "[tabindex] > 0",
   "error:empty-href": "Κενή ιδιότητα [href].",
   "error:empty-link": "Κενός σύνδεσμος.",

diff --git a/sass/locales/_pt-br.scss b/sass/locales/_pt-br.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Layout table",
   "advice:no-href": "Link sem destino",
   "advice:no-https": "Sem HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "Interrupção da ordem da aba",
   "error:empty-href": "Vazio [href]",
   "error:empty-link": "Vazio link…",

diff --git a/sass/locales/_ru.scss b/sass/locales/_ru.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "Таблица используемая для разметки страницы",
   "advice:no-href": "Пропущен [href] у ссылки",
   "advice:no-https": "Нет HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "Некорректное значение tabindex",
   "error:empty-href": "Пустой атрибут [href]",
   "error:empty-link": "Пустая ссылка…",

diff --git a/sass/locales/_zh.scss b/sass/locales/_zh.scss
@@ -25,6 +25,7 @@ $messages: (
   "advice:table-presentation": "确认这个 [table] 元素是用于布局而非展示数据",
   "advice:no-href": "缺少 [href]",
   "advice:no-https": "缺少 HTTPS",
+  "advice:select-option-not-empty": "<select required> should start with <option value=\"\">",
   "error:tab-order": "标签页位置不正确",
   "error:empty-href": "[href] 为空",
   "error:empty-link": "空链接",

diff --git a/sass/themes/_advice.scss b/sass/themes/_advice.scss
@@ -1,6 +1,41 @@
 @charset 'UTF-8';
 
 
+/*doc
+---
+title: "<select required> should start with an empty <option>'s [value]"
+name: empty-option-on-select
+category: Advices
+---
+
+## Description
+A `<select required>` element, which isn't neither `[multiple]` nor `[size]` greater than `1`, should start with an empty `<option>`. That being said, you may use a placeholder content for this option but must ensure to use an empty `[value]` attribute; or set a `[size]` attributes to the `<select>`, which value should equal to the number of `<option>`s.
+
+## References
+* <https://twitter.com/WebPlatformNews/status/1346492730223058946>
+* <https://html.spec.whatwg.org/multipage/form-elements.html#placeholder-label-option>
+* <https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fjsbin.com%2Ftozopid%2Fquiet>
+
+## Selector
+```css_example
+select[required]:not([multiple])[size="1"],
+select[required]:not([multiple]):not([size])
+```
+
+## Test
+```html_example
+<select name="slices" required>
+  <option value="1">Cheese</option>
+  <option value="2">Salami</option>
+</select><span>†</span>
+```
+*/
+select[required]:not([multiple])[size="1"],
+select[required]:not([multiple]):not([size]) {
+  @include advice('select-option-not-empty', $self-closing: true);
+}
+
+
 /*doc
 ---
 title: "Empty [class] attribute"