search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

Accessibility: improve F6 fast nav integration with openui5 #5689

Closed pskelin closed 1 year ago

pskelin commented 2 years ago

The F6 fast navigation has been tested as working with openui5, but this is only by accident. This is because openui5 uses the ":sapTabbable" custom selector:

https://github.com/SAP/openui5/blob/cd7a1948b7a0132c09d13b7fdf90b8e94812a2f9/src/sap.ui.core/src/sap/ui/events/F6Navigation.js#L163

sapTabbable internally checks /input|select|textarea|button|object/.test( nodeName ), which also matches ui5-button, ui5-select, ui5-input. So fast nav works, but only for a few controls.

Discuss with openui5 to implement a custom elements and shadow DOM aware checks like in ui5-webcomponents: https://github.com/SAP/ui5-webcomponents/blob/274efaaa212e3152d27665f1809e649a75f67001/packages/base/src/util/FocusableElements.js#L28

codefactor commented 2 years ago

@pskelin , The SuccessFactors header is structured like this:

<xweb-shellbar>
  #shadow-root
    <ui5-shellbar data-sap-ui-fastnavgroup="true">
      #shadow-root
        <ui5-button>
          #shadow-root
            <button></button>
        </ui5-button>
    </ui5-shellbar>
</xweb-shellbar>

We have our own webcomponent called xweb-shellbar which is used to wrap the shellbar, and several popups and subtabs that are all brought by the successfactors shared header.

Hopefully whatever solution we propose to the F6Navigation.js, it should be able to expand shadow-roots recursively, at least 2 or 3 levels deep, to find focusable things.

We may want to opt-in to have the shadow-roots explored - to avoid performance issues - so maybe we need some attribute to select like this:

<xweb-shellbar data-sap-tabbable-host="true">

Then the UI5 code would know to select and then recurse on custom tags with this selector to then find data-sap-ui-fastnavgroups or tabbable things.

Just an idea!

ilhan007 commented 2 years ago

[update] Hello @codefactor @don-obrein the issue has been presented and forwarded to the SAPUI5/OpenUI5 Core team for research. We will update you asap on the next steps.

On UI5 Web Components side, we recently improved the support for F6 with this change when it comes to the standalone scenario (ui5wc only, not the mixed openui5/ui5wc case).

Setting to "blocked" until as it's depends on OpenUI5/SAPUI5 core implementation.

nnaydenow commented 1 year ago

Hi @codefactor,

SAPUI5/ OpenUI5 Core team provided a solution https://github.com/SAP/openui5/commit/8f6f71af8d545d59015d6cea975d68b13b707f3f . Their implementation now takes custom elements in mind too.