這是Jerry 2020年的第81篇文章,，也是汪子熙公眾號總共第263篇原創(chuàng)文章。

Jerry之前的文章 從醫(yī)院到家，再重返SAP成都研究院,，Jerry還沒死 提到,，我手術(shù)后重返SAP成都研究院，加入了Global的Spartacus開發(fā)團(tuán)隊,，開始從事SAP Commerce Cloud新一代Storefront的開發(fā)工作,。文章 SAP Spartacus簡介，對SAP Spartacus做了一個概要介紹,。

本文給大家分享Jerry上周處理一個Spartacus issue的經(jīng)歷,。

本來Jerry也自詡是一位SAP全棧開發(fā)工程師——我能熟練使用SAP UI5，SAP Fiori Elements,，SAP WebClient UI,，SAP ABAP Webdynpro進(jìn)行全棧開發(fā)，并且深入了解這些工具/框架的底層工作原理,。

不過,，當(dāng)最近處理Spartacus的Accessibility issue時，我還是覺得自己的前端知識遠(yuǎn)遠(yuǎn)不夠用,。

滿足Accessibility(可訪問性)的應(yīng)用,，即應(yīng)用以“所有人”為核心(包括某些殘疾人)，能在更廣闊的場景下毫無障礙地被使用,。

互聯(lián)網(wǎng)的力量存在于它的普適性中,，讓包括殘疾人在內(nèi)的所有人都能訪問互聯(lián)網(wǎng), 是普適性中必不可少的一部分。

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee

Inventor of the World Wide Web

Accessibility也是SAP Product Standard(產(chǎn)品標(biāo)準(zhǔn))之一,，在SAP產(chǎn)品從設(shè)計到開發(fā),，測試，直至最后發(fā)布的整個流程中,，確保產(chǎn)品對Accessibility的良好支持,，是每位SAP開發(fā)人員致力的目標(biāo)之一。

Accessibility聽起來有點抽象,？SAP產(chǎn)品為了滿足Accessibility,，到底需要做什么具體的開發(fā)工作,？的確，Accessibility是一個比較籠統(tǒng)的范疇,，比如Jerry目前工作的Spartacus Accessibility, 落實到編程層面的實現(xiàn),，總共分為下圖幾類(Accessibility縮寫為a11y).  而我上周手頭上處理的一個issue, 是關(guān)于鍵盤的可訪問性支持(Keyboard Accessibility). 簡單來說，就是用戶能用鼠標(biāo)操作Spartacus完成的功能,，用鍵盤也必須同樣能完成,。

“移動-點擊”的鼠標(biāo)交互模式對于普通用戶來說，是最為簡便高效的網(wǎng)頁定位方式,。然而對于視覺存在障礙的用戶來說,，用肉眼定位鼠標(biāo)箭頭的位置, 不是一件容易的事情。而對于某些存在肢體障礙的用戶來說,，使用鼠標(biāo)甚至都是一件非常困難的事情(這一點Jerry剛剛被推出手術(shù)室后的頭七天簡直深有體會),。

對這些由于某種原因無法使用鼠標(biāo)來訪問瀏覽器應(yīng)用的特殊用戶來說，如何將鼠標(biāo)的“移動-點擊”的交互模式轉(zhuǎn)換成其他更易操作的步驟呢,？

我們利用鍵盤的tab鍵,，按次序遍歷頁面上的元素。

通過這種方式,，將原本用鼠標(biāo)選擇頁面元素的方式,，切換成了用鍵盤Tab鍵來代替。

當(dāng)按下Tab鍵遍歷到某個元素時,，該元素獲得焦點(focus), 觸發(fā)onfocus事件,。Jerry處理的issue, 如下圖所示，問題癥狀就是Spartacus Organization Unit List這個列表的行項目,，獲得焦點時的輪廓線(outline)顯示不盡如人意,，視覺效果需要改進(jìn)。

列表行項目第一列的實現(xiàn),，是一個自定義復(fù)合控件(Composite Control, SAP UI5也有類似概念,，叫做Reusable Control), 由一個a標(biāo)簽和一個button標(biāo)簽構(gòu)成，其中a標(biāo)簽通過自定義管道cxUrl在頁面渲染時動態(tài)生成一個url, 指向該行項目對應(yīng)的Organization Unit明細(xì)頁面,。當(dāng)a標(biāo)簽持有focus時，鼠標(biāo)點擊或者回車鍵按下之后,，跳轉(zhuǎn)到Org Unit明細(xì)頁面,。

Button標(biāo)簽結(jié)合自定義的cx-icon標(biāo)簽一起，二者共同實現(xiàn)一個三角箭頭,。點擊后,，會展開和收攏該Org Unit的子Unit列表。

Issue描述的問題

當(dāng)行項目復(fù)合控件內(nèi)的a標(biāo)簽被tab鍵focus之后,，因為a標(biāo)簽的css設(shè)置,，它本身會顯示被focus的輪廓線效果,。同時，a標(biāo)簽的父節(jié)點,，tr標(biāo)簽設(shè)置了偽類focus-within, 其效果是,，一旦tr有任意子節(jié)點得到focus, tr本身也會得到focus.

如此一來，a標(biāo)簽得到focus時,，列表行項目就會同時出現(xiàn)兩套輪廓線,，一套是標(biāo)簽a focus之后顯示的outline , 另一套是標(biāo)簽tr的focus outline. 

由于這個列表行項目一些另外的bug, 這兩套輪廓線的疊加顯示，視覺效果不佳,。更糟糕的是,，在不同寬度的屏幕下，a標(biāo)簽自身的focus輪廓線還會有差異：只有當(dāng)窄屏?xí)r,，才能顯示完整的上下左右四條輪廓線,。

我剛剛加入團(tuán)隊時，團(tuán)隊的開發(fā)經(jīng)理給我分配了一位開發(fā)大佬,，負(fù)責(zé)解答我開發(fā)過程中遇到的技術(shù)問題,。據(jù)開發(fā)經(jīng)理介紹，這位大佬是Spartacus的元老級人物,，從Spartacus立項到現(xiàn)在最新的3.0版本一直參與其中,。這位大佬第一次和我電話里互相介紹彼此時，給我學(xué)習(xí)Spartacus的建議大意就是,，“遇到問題盡量自己多思考,，多想辦法，而不是馬上就在Slack上

問我,，這樣你會成長很快”,。

這正好和Jerry每當(dāng)進(jìn)入一個SAP新的領(lǐng)域時的學(xué)習(xí)方法一致，我也沒覺得什么不妥,。

所以當(dāng)我打算先把我correction的思路和大佬討論時,，大佬直接回復(fù)我一波三連擊：

• 我期望的行為是XXX

• make it happen

• show me the PR

我當(dāng)時看到大佬提出的需求，第一反應(yīng)就是: 1 border when highlighting the row這個需求,，技術(shù)上無法實現(xiàn)啊! 我當(dāng)時的想法是,，偽類focus-within不就是通過被修飾元素的子節(jié)點接收到focus, 從而達(dá)到自身也被focus的效果嗎？這意味著Org Unit List行項目內(nèi),，只要有任意一個元素被focus, 整個行項目必定有兩套focus輪廓線出現(xiàn),，而不是大佬要求的一套。所以,，大佬這個需求技術(shù)上無法實現(xiàn)啊,。

于是，我向大佬表達(dá)了我的看法：我認(rèn)為這個需求技術(shù)上無法實現(xiàn)。

大佬沒有理我,。

后來我把這個issue涉及到的一些知識點羅列了一下,，通過google和stackoverflow逐一進(jìn)行了學(xué)習(xí)：

• scss的工作原理

• scss里%和&的用法

• scss里@minxin的用法

• scss里@include, @extend的用法

• pseudo class :focus和:focus-within的區(qū)別

• tabindex的使用方法

• onfocus和onblur的關(guān)聯(lián)

• css specificity的含義和calculation rule

• a標(biāo)簽?zāi)芙邮說ocus事件的前提條件

• 頁面元素margin, padding和border的區(qū)別，各自使用場景

• 幾種css選擇器和優(yōu)先級

學(xué)習(xí)完這些知識點之后,，我立即后悔了,，覺得當(dāng)初不該對大佬說出“這個功能技術(shù)上無法實現(xiàn)”這句傻話。事實上,，要實現(xiàn)行項目focus時只顯示一套focus輪廓線的需求,，方法簡直太多太多了。

第一次嘗試

我把a(bǔ)標(biāo)簽的tabindex設(shè)置成-1, 這樣a就不會收到focus了,。a標(biāo)簽的兄弟節(jié)點,，button標(biāo)簽收到focus時，其父節(jié)點即tr通過:focus-within,，也收到focus, 效果如下:

然而,，因為a標(biāo)簽的tabindex為-1, 意味著它不能再接收focus事件，所以回車之后無法觸發(fā)跳轉(zhuǎn)到unit明細(xì)頁面的操作了,，這條路行不通,。

第二次嘗試

我想通過調(diào)整a:focus的outline-offset值，設(shè)法讓其和tr的focus輪廓線完全重合,，這樣focus事件發(fā)生時,，視覺上講，用戶也只會看見一套輪廓線,。

然而我觀察了現(xiàn)有的tr輪廓線,，發(fā)現(xiàn)有計算邏輯參與在里面，而a標(biāo)簽并沒有,。簡單評估了一下,，如果要讓a標(biāo)簽在不同的屏幕尺寸下的輪廓線和tr標(biāo)簽的輪廓線始終保持重合，代價太大,，得不償失,，所以我放棄了。

第三次嘗試

直接隱藏a標(biāo)簽的focus輪廓線,。這樣,，技術(shù)上來說，雖然標(biāo)簽a得到focus時,，它會和父標(biāo)簽tr同時被賦予各自的focus輪廓線,，但前者的輪廓線被設(shè)置成隱藏，因此視覺效果上行項目只有一條輪廓線,，這就滿足了大佬的需求,。

最后行項目得到focus時的輪廓線效果如下：

雖然通過這個issue我學(xué)到的css相關(guān)知識,，在前端開發(fā)大佬們眼中不值一提,，但這些確實是我以前不了解或者沒有理解透徹的,，因為以前一直做SAP UI5和SAP WebClient UI的應(yīng)用層開發(fā)，99%的情況下不會直接操作css和scss.

我也非常感謝給我提出需求的開發(fā)大佬,，在我貿(mào)然說出"這個需求技術(shù)上無法實現(xiàn)"的時候,，沒有立即懟我，而是選擇了直接無視,，這才給我創(chuàng)造了通過google和stackoverflow充實自己的機(jī)會,。

通過這個issue我的體會就是，程序員在自己尚不完全熟悉的領(lǐng)域工作時,，如果沒有十足的把握,，最好別貿(mào)然說出“這個功能技術(shù)上無法實現(xiàn)”這種話，否則,，后續(xù)可能會被打臉,。

感謝大家有耐心讀完我工作中的發(fā)生的這件瑣事，希望對大家有一點點啟發(fā),，感謝閱讀,。