借鑑自強大的 google button .
mvc 分解:
總體架構:
Model and control :
不涉及 ui 渲染,用來表示按鈕的實質,按鈕具備以下數據屬性:
content : 按鈕顯示值
value : 按鈕的內在存儲值
tooltip : 按鈕的鼠標掠過(得到焦點)提示
described-by : wai-aria 可用性需要,按鈕的具體描述
disabled : 按鈕是否禁用
按鈕的 control 層會觸發一些事件,常用的就是 click (同時需要考慮鍵盤的可訪問性,enter,space 也會觸發click),並根據用戶交互通知 view 層渲染 UI。
View :
專注於 UI 渲染,根據 control 層以及 model 層的狀態來渲染對應的 UI。
最頂層抽象爲 buttonrender ,爲一個盒子 mixin 而成,不代表具體渲染器,只用於描述 ui 屬性,以及指定 role 爲 button 。
最簡單的就是 nativerender ,僅僅使用內置 button 渲染,那麼用戶交互狀態產生的 UI 變化由系統控制,並且可訪問性方面也不需多做。
或者可以自己使用 div 渲染自己的 button ( cssrender ),省事的話是單層 div
通過css3控制在除ie<9下的按鈕圓角,還需要根據control層同步自己渲染的ui。
1. focus/blur :渲染/取消 focus 樣式。
2.mousedown/up : 渲染/取消 active 樣式,並更新 aria-pressed 增強可訪問性。
3.mouseenter/leave : 渲染/取消 hover 樣式。
4.disabled : 渲染/取消 disabled 樣式,去除 tabindex(鍵盤導航不可達),更新 aria-disabled
也可以使用雙層 div 在所有瀏覽器下模擬圓角 ( customrender )
customrender 和 cssrender 的不同之處主要在於,初始渲染時生成雙層 div 即可:
.outer { border-width: 1px 0;}
.inner {
margin: 0 -1px;
border-width: 0 1px;
}
<div class='outer'>
<div class='inner'>
</div>
</div>
另一點就是需要通過 aria-labelledby 指定按鈕的真正內容所在節點(最內層),其他都是純粹裝飾!
demo :
refer :
button role 在可訪問性中的位置