如何为Lightning Input日期选择器设置深色悬停/激活样式以符合WCAG

针对你提供的lightning-input日期选择器，为满足WCAG无障碍要求（给日期/月份切换箭头添加深色悬停及激活状态），以下是两种实现方案：

方案1：从零构建自定义日期选择器步骤 #

Step 1：搭建核心结构 #

创建LWC组件，用原生HTML构建可访问的日期选择器框架：

• 只读输入框展示选中日期，点击唤起日历面板
• 日历面板包含年月导航按钮（用<button>确保键盘可访问）、日期网格
• 示例结构片段：

<div class="custom-date-picker">
  <input 
    type="text" 
    readonly 
    value={formattedDob} 
    aria-label="选择出生日期" 
    onclick={toggleCalendarPanel}
  >
  <div if:true={showCalendar} class="calendar-panel" role="dialog" aria-modal="true">
    <div class="month-nav">
      <button class="nav-btn" aria-label="切换到上一月" onclick={handlePrevMonth}>‹</button>
      <span>{currentMonthYear}</span>
      <button class="nav-btn" aria-label="切换到下一月" onclick={handleNextMonth}>›</button>
    </div>
    <!-- 星期标题、日期网格代码省略 -->
  </div>
</div>

Step 2：配置无障碍属性 #

• 导航按钮必须用<button>，确保Tab键可聚焦，添加清晰的aria-label
• 日历面板显示时，将焦点自动移到导航按钮，隐藏时恢复焦点到输入框
• 支持键盘操作：Enter/空格选择日期，Esc关闭面板，左右箭头切换年月，上下箭头切换日期

Step 3：实现合规样式 #

编写CSS满足WCAG对比度要求，添加悬停、聚焦、激活状态：

.nav-btn {
  background: #f0f0f0;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.nav-btn:hover, .nav-btn:focus {
  background: #2d2d2d;
  color: #fff;
  outline: 2px solid #0066cc; /* 聚焦轮廓增强可见性 */
}
.nav-btn:active {
  background: #1a1a1a;
}

Step 4：开发日期逻辑 #

• 编写JS处理年月切换、日期渲染、选中日期的格式化
• 绑定输入框值与选中日期，触发自定义onchange事件适配业务逻辑（如你的checkDatesDOB）
• 可选：添加日期范围限制（如禁止选择未来日期）

Step 5：无障碍测试 #

• 用屏幕阅读器（NVDA/VoiceOver）验证朗读逻辑
• 测试键盘全流程操作是否顺畅
• 检查颜色对比度是否符合WCAG 2.1 AA标准（至少4.5:1）

方案2：修改标准lightning-input内部样式示例 #

LWC默认不允许直接穿透修改标准组件样式，可通过加载静态资源或动态插入样式实现：

方式1：加载静态资源CSS #

1. 创建静态资源
   在Salesforce中新建静态资源（命名为DatePickerFixCSS），内容如下：

/* 定位日期选择器的导航箭头 */
.dob .slds-datepicker__navigation-previous,
.dob .slds-datepicker__navigation-next {
  background: transparent;
}
/* 悬停/聚焦状态 */
.dob .slds-datepicker__navigation-previous:hover,
.dob .slds-datepicker__navigation-previous:focus,
.dob .slds-datepicker__navigation-next:hover,
.dob .slds-datepicker__navigation-next:focus {
  background: #2d2d2d;
  border-radius: 4px;
}
/* 激活状态 */
.dob .slds-datepicker__navigation-previous:active,
.dob .slds-datepicker__navigation-next:active {
  background: #1a1a1a;
}
/* 确保图标在深色背景下可见 */
.dob .slds-datepicker__navigation-previous:hover .slds-icon,
.dob .slds-datepicker__navigation-next:hover .slds-icon {
  fill: #fff;
}

2. 在组件中加载资源
   在组件JS中导入并加载静态资源：

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import DatePickerFixCSS from '@salesforce/resourceUrl/DatePickerFixCSS';

export default class YourComponent extends LightningElement {
  #styleLoaded = false;

  renderedCallback() {
    if (this.#styleLoaded) return;
    this.#styleLoaded = true;
    loadStyle(this, DatePickerFixCSS)
      .catch(err => console.error('样式加载失败:', err));
  }
}

方式2：动态插入样式元素 #

在组件的renderedCallback中创建style标签并插入：

import { LightningElement } from 'lwc';

export default class YourComponent extends LightningElement {
  #styleAdded = false;

  renderedCallback() {
    if (this.#styleAdded) return;
    this.#styleAdded = true;

    const styleEl = document.createElement('style');
    styleEl.textContent = `
      .dob .slds-datepicker__navigation-previous,
      .dob .slds-datepicker__navigation-next {
        background: transparent;
      }
      .dob .slds-datepicker__navigation-previous:hover,
      .dob .slds-datepicker__navigation-previous:focus,
      .dob .slds-datepicker__navigation-next:hover,
      .dob .slds-datepicker__navigation-next:focus {
        background: #2d2d2d;
        border-radius: 4px;
      }
      .dob .slds-datepicker__navigation-previous:active,
      .dob .slds-datepicker__navigation-next:active {
        background: #1a1a1a;
      }
      .dob .slds-datepicker__navigation-previous:hover .slds-icon,
      .dob .slds-datepicker__navigation-next:hover .slds-icon {
        fill: #fff;
      }
    `;
    this.template.querySelector('.dob').appendChild(styleEl);
  }
}

注意：该方案依赖标准组件的内部类名，Salesforce更新组件后可能失效，需定期验证；同时确保颜色对比度符合WCAG要求。

内容的提问来源于stack exchange，提问作者techfordev