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

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

本文給大家分享Jerry上周處理一個(gè)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時(shí)，我還是覺得自己的前端知識(shí)遠(yuǎn)遠(yuǎn)不夠用。

滿足Accessibility(可訪問性)的應(yīng)用，即應(yīng)用以“所有人”為核心(包括某些殘疾人)，能在更廣闊的場(chǎ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è)計(jì)到開發(fā)，測(cè)試，直至最后發(fā)布的整個(gè)流程中，確保產(chǎn)品對(duì)Accessibility的良好支持，是每位SAP開發(fā)人員致力的目標(biāo)之一。

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

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

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

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

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

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

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

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

Issue描述的問題

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

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

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

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

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

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

• 我期望的行為是XXX
• make it happen
• show me the PR

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

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

大佬沒有回復(fù)我。

后來我把這個(gè)issue涉及到的一些知識(shí)點(diǎn)羅列了一下，通過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ū)別，各自使用場(chǎng)景
• 幾種css選擇器和優(yōu)先級(jí)

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

第一次嘗試

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

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

第二次嘗試

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

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

第三次嘗試

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

最后行項(xiàng)目得到focus時(shí)的輪廓線效果如下：

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

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

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

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Jerry的反省：程序员不要轻易说出“这个功能技术上无法实现“的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。