This is Jerry’s 81st article of 2020, and the 263rd original article of Wang Zixi’s official account.

Jerry mentioned in his previous article that I returned to SAP Chengdu Research Institute after my surgery, joined the Spartacus development team of Global, and began to work on the development of the new generation Storefront of SAP Commerce Cloud. This article introduces SAP Spartacus and gives a brief introduction to SAP Spartacus.

This article shares Jerry’s experience of dealing with a Spartacus issue last week.

Jerry also boasted that he was an SAP full-stack development engineer — I can skillfully use SAP UI5, SAP Fiori Elements, SAP WebClient UI and SAP ABAP Webdynpro for full-stack development. And understand the underlying workings of these tools/frameworks.

However, when I was working on the Spartacus Accessibility issue recently, I still felt like I didn’t have enough front-end knowledge.

Applications that org.swt.accessibility, that is, applications that have a core of “everyone” (including some people with disabilities) can be used in a wider range of contexts without obstacles.

The power of the Internet lies in its universality, and making it accessible to all, including people with disabilities, is an essential part of universality. 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 is also one of the SAP Product standards. It is one of the goals of every SAP developer to ensure that the Product Accessibility is well supported throughout the process of SAP Product design, development, testing, and finally release.

Accessibility sounds a bit abstract? What specific development work does SAP product need to do to enable Accessibility? Indeed, Accessibility is a fairly general category. For example, Spartacus Accessibility, which Jerry is currently working on, is implemented at the programmatic level. It falls into the following categories (Accessibility abbreviated a11y). One issue I was working on last week was about Keyboard Accessibility. Simply put, users must be able to do what Spartacus can do with a mouse.

“Move-click” mouse interaction mode is the most convenient and efficient way to locate web pages for ordinary users. However, for visually impaired users, it is not easy to locate the mouse arrow with the naked eye. For some people with physical disabilities, using a mouse can be very difficult (as Jerry found out during his first seven days in the operating room).

For those special users who for some reason cannot use a mouse to access browser applications, how do you convert the move-and-click interaction of the mouse into something more manageable?

We use the TAB key of the keyboard to traverse the elements on the page in order.

In this way, instead of using the mouse to select page elements, use the keyboard Tab key instead.

When the Tab key is pressed to traverse an element, the element gains focus and the onfocus event is fired. The issue Jerry deals with, as shown in the picture below, is the symptom of the row items in the Spartacus Organization Unit List. The outline is not satisfactory when getting the focus, and the visual effect needs to be improved.

The implementation of the first column of the list row item is a custom Composite Control (SAP UI5 has a similar concept called Reusable Control) that consists of an A tag and a Button tag. In which, label A dynamically generates a URL during page rendering through cxUrl, a custom pipe, pointing to the detailed page of Organization Unit corresponding to this project. When label A holds focus, click the mouse or press enter to jump to the Org Unit details page.

The Button tag is combined with the custom CX-icon tag to create a triangular arrow. Click to expand and close the list of subunits of the Org Unit.

Issue describes a problem

When the A TAB in the row item composite is tabbed, it will display the outline of the focus because of the CSS Settings of the A TAB. At the same time, the parent of the A tag, tr, sets the pseudo-class focus-within. The effect is that once any of tr’s children get focus, TR itself will also get focus.

In this way, when the tag A gets focus, two sets of outline lines will appear in the list line item at the same time. One set is the outline displayed after the tag A Focus, and the other set is the focus outline of the tag TR.

Due to some other bug in the list line project, the overlay of the two sets of Outlines doesn’t look good. To make matters worse, the FOCUS outline of the A TAB itself is different at different screen widths: only when the screen is narrow can the full four outline lines be displayed.

When I first joined the team, the development manager assigned me a development guru to answer any technical questions I encountered during development. According to the development manager, the boss is a veteran of Spartacus, and has been involved with the company from its inception to its latest version 3.0. The first time he and I introduced each other on the phone, he gave me some advice about learning Spartacus that went something like, “Do your own thinking, do your own thinking, instead of asking me on Slack right away, and you’ll grow faster.”

This is exactly how Jerry learns whenever he enters a new area at SAP, and I don’t see anything wrong with it.

So when I was going to discuss my correction thinking with the big guy first, the big guy directly replied to me with a three-punch:

• My desired behavior is XXX
• make it happen
• show me the PR

When I saw the demand from the boss, my first reaction was: 1 border when considering the row, it couldn’t be realized technically! At that time, I thought, the pseudo-class focus-within is to receive focus through the child node of the modified element, so as to achieve the effect of being focused itself. This means that if any element in the Org Unit List line item is focused, the entire line item must have two sets of focus Outlines instead of the required one. So, this requirement is technically impossible.

So, I expressed my opinion to the big guy: I think this requirement is technically impossible.

Big guy didn’t get back to me.

Later, I listed some knowledge points involved in this issue and learned them one by one through Google and StackOverflow:

• How SCSS works
• The use of % and & in SCSS
• The use of @minxin in SCSS
• SCSS: @include, @extend
• Difference between pseudo class :focus and :focus-within
• How to use tabIndex
• Onfocus and onblur associations
• CSS Specificity and Calculation rule
• A The prerequisite that the tag can receive the Focus event
• The page elements margin, padding and border are used in different scenarios
• Several CSS selectors and priorities

I immediately regretted saying “this feature is technically impossible” to the boss after learning these things. In fact, there are many, many ways to implement the need to display only one set of Focus contours for the line item Focus.

First try

I set the tabIndex of a tag to -1 so that A will not receive focus. When the button tag receives focus, its parent, tr, also receives focus-within. The effect is as follows:

However, since the TABIndex of the A tag is -1, meaning that it can no longer receive the Focus event, the press enter cannot trigger a jump to the Unit detail page, which is not an option.

Second attempt

Third attempt

Hide the Focus outline of label A. So, technically speaking, although the tag A gets focus, it and the parent tag TR are given their respective focus contours at the same time, but the former’s contours are set to hide, so the visual effects upstream project has only one contour, which meets the needs of the big guy.

The contour effect of the last line of the project is as follows:

Although the csS-related knowledge I learned through this issue is not worthy of mention in the eyes of front-end development leaders, it is true that I did not know or have a deep understanding of it before, because I have been doing SAP UI5 and SAP WebClient UI application layer development, and 99% of the time I cannot directly operate CSS and SCSS.

I’m also very grateful to the developers who asked me for the requirement. Instead of immediately dismissing me when I blurted out “this requirement is technically impossible”, I chose to ignore it, which gave me the opportunity to enrich myself through Google and StackOverflow.

Through this issue, MY experience is that when programmers are working in fields they are not completely familiar with, they had better not say “this function cannot be realized technically” without full assurance, otherwise, they may be slapped in the face later.

Thank you for your patience to read this trivia in my work, I hope you have a little inspiration, thank you for reading.

More of Jerry’s original articles can be found in “Wang Zixi” :