From 5bd239ef88561d0d0089f0d0418888e0ac4d72c1 Mon Sep 17 00:00:00 2001
From: aouos <aouos@qq.com>
Date: Fri, 18 Feb 2022 23:36:52 +0800
Subject: [PATCH 1/2] style: fix SpreadSheet dark mode display (#1533)

---
 src/guide/extras/demos/SpreadSheet.vue     | 5 +++--
 src/guide/extras/demos/SpreadSheetCell.vue | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/guide/extras/demos/SpreadSheet.vue b/src/guide/extras/demos/SpreadSheet.vue
index 3739c981e5..0f70915676 100644
--- a/src/guide/extras/demos/SpreadSheet.vue
+++ b/src/guide/extras/demos/SpreadSheet.vue
@@ -26,7 +26,8 @@ const cols = cells.map((_, i) => String.fromCharCode(65 + i))
 
 <style scoped>
 th {
-  background-color: #eee;
+  color: var(--vt-c-text-1);
+  background-color: var(--vt-c-bg-mute);
   padding: 0 1em;
 }
 
@@ -39,7 +40,7 @@ tr:first-of-type th:first-of-type {
 }
 
 td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--vt-c-bg-mute);
   padding: 0;
 }
 </style>
diff --git a/src/guide/extras/demos/SpreadSheetCell.vue b/src/guide/extras/demos/SpreadSheetCell.vue
index 5cf2ec4d1c..4ca0b80683 100644
--- a/src/guide/extras/demos/SpreadSheetCell.vue
+++ b/src/guide/extras/demos/SpreadSheetCell.vue
@@ -33,6 +33,7 @@ function update(e) {
   height: 1.5em;
   line-height: 1.5;
   font-size: 15px;
+  color: var(--vt-c-text-1);
 }
 
 .cell span {
@@ -46,7 +47,7 @@ function update(e) {
 }
 
 .cell input:focus {
-  border: 2px solid blue;
-  background-color: #fff;
+  border: 2px solid var(--vt-c-divider);
+  color: var(--vt-c-text-1);
 }
 </style>

From ebaa98586726b684dd34fec7486495836804dccc Mon Sep 17 00:00:00 2001
From: aouos <aouos@qq.com>
Date: Sat, 19 Feb 2022 09:57:39 +0800
Subject: [PATCH 2/2] fix: add placeholder example (#1532)

---
 src/guide/best-practices/accessibility.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/guide/best-practices/accessibility.md b/src/guide/best-practices/accessibility.md
index 5e99cff700..759b3bd381 100644
--- a/src/guide/best-practices/accessibility.md
+++ b/src/guide/best-practices/accessibility.md
@@ -277,6 +277,27 @@ Avoid using placeholders as they can confuse many users.
 
 One of the issues with placeholders is that they don't meet the [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) by default; fixing the color contrast makes the placeholder look like pre-populated data in the input fields. Looking at the following example, you can see that the Last Name placeholder which meets the color contrast criteria looks like pre-populated data:
 
+```vue-html
+<form
+  class="demo"
+  action="/dataCollectionLocation"
+  method="post"
+  autocomplete="on"
+>
+  <div v-for="item in formItems" :key="item.id" class="form-item">
+    <label :for="item.id">{{ item.label }}: </label>
+    <input
+      type="text"
+      :id="item.id"
+      :name="item.id"
+      v-model="item.value"
+      :placeholder="item.placeholder"
+    />
+  </div>
+  <button type="submit">Submit</button>
+</form>
+```
+
 <!-- <common-codepen-snippet title="Form Placeholder" slug="ExZvvMw" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
 
 It is best to provide all the information the user needs to fill out forms outside any inputs.