Skip to content

Implement accessibilityLevel for Fabric #14550

@HariniMalothu17

Description

@HariniMalothu17

Add support for accessibilityLevel / aria-level prop.

Documentation

accessibilityLevel Documentation
aria-level
UIA level

Behavior

When it comes to the headings in a document structure, you can have first-level headings, second-level headings, third-level headings, etc. In trees, you have the root element, its children, the children's children (or grandchildren), and so on.This attribute exposes hierarchy to assistive technologies so it can be communicated to the users

Value Description
number 1-based integer that describes the location of an element inside hierarchical or broken hierarchical structures.
 <View>
        <View
          style={{width: 50, height: 50, backgroundColor: 'blue'}}
          accessible={true}
          accessibilityLabel="A blue box"
          accessibilityLevel={1}
        />
        <View
          style={{width: 50, height: 50, backgroundColor: 'red'}}
          accessible={true}
          accessibilityLabel="A hint for the red box."
         accessibilityLevel={2}
        />
        <View
          style={{width: 50, height: 50, backgroundColor: 'red'}}
          accessible={true}
          accessibilityLabel="This label should not be used"
          accessibilityLevel={3}
        />
      </View>

In the above example , the nested View Component have different accessibilityLevel assigned to it.

The accessibilityLevel prop should set the value of Level property. The value of the Level will be also a number.
So value mapping won't be an issue.

Implementation on Paper

} else if (propertyName == "accessibilityLevel") {
if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64) {
auto value = static_cast<int>(propertyValue.AsDouble());
auto boxedValue = winrt::Windows::Foundation::PropertyValue::CreateInt32(value);
element.SetValue(xaml::Automation::AutomationProperties::LevelProperty(), boxedValue);
} else if (propertyValue.IsNull()) {

Implementation Plan

We should:

  1. Take the value of the accessibilityLevel prop and set the value of the Level property using that.

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions