Add accessibility improvements for screen readers to announce custom units (#175)

Author: Mike Young

src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

@@ -11,18 +11,18 @@
 import android.graphics.BitmapFactory;
 import android.graphics.drawable.BitmapDrawable;
 import android.os.Build;
-
-import androidx.annotation.RequiresApi;
-import androidx.appcompat.widget.AppCompatSeekBar;
-
 import android.util.AttributeSet;
-
+import android.view.accessibility.AccessibilityEvent;
+import android.view.accessibility.AccessibilityManager;
+import androidx.appcompat.widget.AppCompatSeekBar;
 import java.net.URL;
+import java.util.List;
+import java.util.Timer;
+import java.util.TimerTask;
 import java.util.concurrent.Callable;
 import java.util.concurrent.ExecutorService;
 import java.util.concurrent.Executors;
 import java.util.concurrent.Future;
-
 import javax.annotation.Nullable;
 
 /**
@@ -60,6 +60,10 @@ public class ReactSlider extends AppCompatSeekBar {
 
   private double mStepCalculated = 0;
 
+  private String mAccessibilityUnits;
+
+  private List<String> mAccessibilityIncrements;
+
   public ReactSlider(Context context, @Nullable AttributeSet attrs, int style) {
     super(context, attrs, style);
     disableStateListAnimatorIfNeeded();
@@ -94,6 +98,64 @@ private void disableStateListAnimatorIfNeeded() {
     updateAll();
   }
 
+  void setAccessibilityUnits(String accessibilityUnits) {
+    mAccessibilityUnits = accessibilityUnits;
+  }
+
+  void setAccessibilityIncrements(List<String> accessibilityIncrements) {
+    mAccessibilityIncrements = accessibilityIncrements;
+  }
+
+  @Override
+  public void onPopulateAccessibilityEvent(AccessibilityEvent event) {
+    super.onPopulateAccessibilityEvent(event);
+    if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED ||
+        (event.getEventType() == AccessibilityEvent.TYPE_VIEW_SELECTED && this.isAccessibilityFocused())) {
+      this.setupAccessibility();
+    }
+  }
+
+  @Override
+  public void announceForAccessibility(CharSequence text) {
+    Context ctx = this.getContext();
+    final AccessibilityManager manager = (AccessibilityManager) ctx.getSystemService(Context.ACCESSIBILITY_SERVICE);
+
+    if (manager.isEnabled()) {
+      final AccessibilityEvent e = AccessibilityEvent.obtain();
+      e.setEventType(AccessibilityEvent.TYPE_ANNOUNCEMENT);
+      e.setClassName(this.getClass().getName());
+      e.setPackageName(ctx.getPackageName());
+      e.getText().add(text);
+
+      TimerTask task = new TimerTask() {
+        @Override
+        public void run() {
+          manager.sendAccessibilityEvent(e);
+        }
+      };
+
+      Timer timer = new Timer();
+      timer.schedule(task, 1000);
+    }
+  }
+
+  private void setupAccessibility() {
+    if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
+      int index = (int)mValue;
+      String sliderValue = mAccessibilityIncrements.get(index);
+      int stringLength = mAccessibilityUnits.length();
+
+      String spokenUnits = mAccessibilityUnits;
+      if (sliderValue != null && Integer.parseInt(sliderValue) == 1) {
+        spokenUnits = spokenUnits.substring(0, stringLength - 1);
+      }
+
+      this.announceForAccessibility(String.format("%s %s", sliderValue, spokenUnits));
+    }
+  }
+
+
+
   /**
    * Convert SeekBar's native progress value (e.g. 0..100) to a value passed to JS (e.g. -1.0..2.5).
    */

src/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -12,9 +12,9 @@
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
 import android.view.View;
-import android.view.ViewGroup;
 import android.widget.SeekBar;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.LayoutShadowNode;
@@ -27,8 +27,9 @@
 import com.facebook.yoga.YogaMeasureMode;
 import com.facebook.yoga.YogaMeasureOutput;
 import com.facebook.yoga.YogaNode;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.Map;
-
 import javax.annotation.Nullable;
 
 /**
@@ -213,6 +214,21 @@ public void setInverted(ReactSlider view, boolean inverted) {
     else view.setScaleX(1f);
   }
 
+  @ReactProp(name = "accessibilityUnits")
+  public void setAccessibilityUnits(ReactSlider view, String accessibilityUnits) {
+    view.setAccessibilityUnits(accessibilityUnits);
+  }
+
+  @ReactProp(name = "accessibilityIncrements")
+  public void setAccessibilityIncrements(ReactSlider view, ReadableArray accessibilityIncrements) {
+    List objectList = accessibilityIncrements.toArrayList();
+    List<String> stringList = new ArrayList<>();
+    for(Object item: objectList) {
+      stringList.add((String)item);
+    }
+    view.setAccessibilityIncrements(stringList);
+  }
+
   @Override
   protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSlider view) {
     view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);

src/ios/RNCSlider.h

@@ -21,8 +21,8 @@
 @property (nonatomic, strong) UIImage *trackImage;
 @property (nonatomic, strong) UIImage *minimumTrackImage;
 @property (nonatomic, strong) UIImage *maximumTrackImage;
-
 @property (nonatomic, strong) UIImage *thumbImage;
-
+@property (nonatomic, strong) NSString *accessibilityUnits;
+@property (nonatomic, strong) NSArray *accessibilityIncrements;
 
 @end

src/ios/RNCSlider.m

@@ -21,12 +21,30 @@ - (void)setValue:(float)value
 {
   _unclippedValue = value;
   super.value = value;
+  [self setupAccessibility:value];
 }
 
 - (void)setValue:(float)value animated:(BOOL)animated
 {
   _unclippedValue = value;
   [super setValue:value animated:animated];
+  [self setupAccessibility:value];
+}
+
+- (void)setupAccessibility:(float)value
+{
+  if (self.accessibilityUnits && self.accessibilityIncrements && [self.accessibilityIncrements count] - 1 == (int)self.maximumValue) {
+    int index = (int)value;
+    NSString *sliderValue = (NSString *)[self.accessibilityIncrements objectAtIndex:index];
+    NSUInteger stringLength = [self.accessibilityUnits length];
+
+    NSString *spokenUnits = [NSString stringWithString:self.accessibilityUnits];
+    if (sliderValue && [sliderValue intValue] == 1) {
+      spokenUnits = [spokenUnits substringToIndex:stringLength-1];
+    }
+    
+    self.accessibilityValue = [NSString stringWithFormat:@"%@ %@", sliderValue, spokenUnits];
+  }
 }
 
 - (void)setMinimumValue:(float)minimumValue
@@ -104,7 +122,8 @@ - (void)setInverted:(BOOL)inverted
   }
 }
 
-- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
+- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
+{
     return YES;
 }
 

src/ios/RNCSliderManager.m

@@ -99,6 +99,9 @@ - (void)sliderTouchEnd:(RNCSlider *)sender
 RCT_EXPORT_VIEW_PROPERTY(thumbTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(thumbImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(accessibilityUnits, NSString);
+RCT_EXPORT_VIEW_PROPERTY(accessibilityIncrements, NSArray);
+
 RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RNCSlider)
 {
   if (json) {

src/js/RNCSliderNativeComponent.js

@@ -27,6 +27,8 @@ type Event = SyntheticEvent<
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
+  accessibilityUnits?: string,
+  accessibilityIncrements?: Array<string>,
   disabled?: ?boolean,
   enabled?: ?boolean,
   inverted?: ?boolean,

src/js/Slider.js

@@ -147,6 +147,22 @@ type Props = $ReadOnly<{|
    * Default value is false.
    */
   inverted?: ?boolean,
+
+  /**
+   * A string of one or more words to be announced by the screen reader.
+   * Otherwise, it will announce the value as a percentage.
+   * Requires passing a value to `accessibilityIncrements` to work correctly.
+   * Should be a plural word, as singular units will be handled.
+   */
+  accessibilityUnits?: string,
+
+  /**
+   * An array of values that represent the different increments displayed
+   * by the slider. All the values passed into this prop must be strings.
+   * Requires passing a value to `accessibilityUnits` to work correctly.
+   * The number of elements must be the same as `maximumValue`.
+   */
+  accessibilityIncrements?: Array<string>,
 |}>;
 
 /**

src/typings/index.d.ts

@@ -108,6 +108,21 @@ export interface SliderProps extends SliderPropsIOS, SliderPropsAndroid {
    */
   inverted?: boolean;
 
+  /**
+   * A string of one or more words to be announced by the screen reader.
+   * Otherwise, it will announce the value as a percentage.
+   * Requires passing a value to `accessibilityIncrements` to work correctly.
+   * Should be a plural word, as singular units will be handled.
+   */
+  accessibilityUnits?: string;
+
+  /**
+   * A string of one or more words to be announced by the screen reader.
+   * Otherwise, it will announce the value as a percentage.
+   * Requires passing a value to `accessibilityIncrements` to work correctly.
+   * Should be a plural word, as singular units will be handled.
+   */
+  accessibilityIncrements?: Array<string>;
 }
 
 /**