Jerry的反省：程序員不要輕易說出"這個功能技術(shù)上無法實現(xiàn)"

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

Jerry之前的文章從醫(yī)院到家，再重返SAP成都研究院，Jerry還沒死 提到，我手術(shù)后重返SAP成都研究院，加入了Global的Spartacus開發(fā)團隊，開始從事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進行全棧開發(fā)，并且深入了解這些工具/框架的底層工作原理。

不過，當最近處理Spartacus的Accessibility issue時，我還是覺得自己的前端知識遠遠不夠用。

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

互聯(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)品標準)之一，在SAP產(chǎn)品從設計到開發(fā)，測試，直至最后發(fā)布的整個流程中，確保產(chǎn)品對Accessibility的良好支持，是每位SAP開發(fā)人員致力的目標之一。

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

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

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

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

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

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

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

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

Issue描述的問題

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

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

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

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

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

這正好和Jerry每當進入一個SAP新的領域時的學習方法一致，我也沒覺得什么不妥。

所以當我打算先把我correction的思路和大佬討論時，大佬直接回復我一波三連擊：

我期望的行為是XXX

make it happen

show me the PR

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

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

大佬沒有回復我。

后來我把這個issue涉及到的一些知識點羅列了一下，通過google和stackoverflow逐一進行了學習：

scss的工作原理

scss里%和&的用法

scss里@minxin的用法

scss里@include, @extend的用法

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

tabindex的使用方法

onfocus和onblur的關聯(lián)

css specificity的含義和calculation rule

a標簽能接收focus事件的前提條件

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

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

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

第一次嘗試

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

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

第二次嘗試

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

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

第三次嘗試

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

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

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

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

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

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

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

javaScript web前端 開發(fā)者

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。