[Feature Request]: Accessibility Info of ui5 components

Feature Request Description

We received the following issue for the ui5-table: https://github.com/SAP/ui5-webcomponents/issues/7645 for the speech output when a table row is being focused. We use a similar pattern to the one used in the UI5 Responsive table which constructs a string which is a combination of column name + cell value - for example: "Product My Product Price 1$...". The only thing different is that we take the textContent of the element representing the table cell, but in UI5 a special method is used (getAccessibilityInfo) instead. Our approach is rather easier but results in some issues, as the one pointed in the issue above.

Proposed Solution

We need to have a similar to the getAccessibility method (or an interface with the same method) for each component which will hold the accessibility information of the control, which can later be used by parent components to construct and manipulate information relevant to accessibility and the speech output of the control. This method should return an object, for example this is a sample output from the sap.ui.core.Control documentation of the method:

     * MyControl.prototype.getAccessibilityInfo = function() {
     *    return {
     *      role: "textbox",
     *      type: "date input",
     *      description: "value",
     *      focusable: true,
     *      enabled: true,
     *      editable: true,
     *      required: true,
     *      children: []
     *    };
     * };

Some parts of the object could be easily distinguished with the current properties of most of the components, but others like "description" are not (like in the issue from the reporter). The description is basically the value of the component - for ui5-input this would be the input field value, but for some more complex control this could be a concatenated string representation of all selected tokens (multi input, multi combobox). It is up to the component to decide which information is relevant for accessibility and which parts of the component should be read out in cases like the one in the table.

Proposed Alternatives

No response

Organization

No response

Additional Context

For more information of the desired implementation please check: https://github.com/SAP/openui5/blob/e9c904406a65a34a73582ecbc177c7c844944482/src/sap.ui.core/src/sap/ui/core/Control.js#L1256 https://github.com/SAP/openui5/blob/e9c904406a65a34a73582ecbc177c7c844944482/src/sap.m/src/sap/m/ListItemBase.js#L190 https://github.com/SAP/openui5/blob/e9c904406a65a34a73582ecbc177c7c844944482/src/sap.m/src/sap/m/ListItemBase.js#L239

After the implementation of this an adoption of the feature should be done from the table.

Priority

Medium

Privacy Policy

[X] I’m not disclosing any internal or sensitive information.

Hello @elenastoyanovaa we have added this base method

get accessibilityInfo(): AccessibilityInfo {
    return {};
}

returning an object with the following type:

type AccessibilityInfo = {
    // The WAI-ARIA role of the component.
    role?: ARIARoles,

    // A translated text that represents the component type. Used when several components share same role,
    // f.e. Select and ComboBox both have role="combobox".
    type?: LowercaseString<string>,

    // A translated text that represents relevant component description/state - value, placeholder, label, etc.
    description?: string,

     // The component disabled state.
    disabled?: boolean,

    // The component readonly state.
    readonly?: boolean,

    // The component required state.
    required?: boolean,

    // An array of elements, aggregated by the component
    // <b>Note:</b> Children should only be provided when it is helpful to understand the accessibility context.
    children?: Array<HTMLElement>,
}

Every component can implement the accessibilityInfo and provide the necessary a11y information.

SAP / ui5-webcomponents