Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BartoszKlonowski merged 15 commits into from
Feb 28, 2022
Merged

Fix: Conflicting states for accessibility and non-accessibility users #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
aaa1685
adding accessibilityState.disabled prop to Slider.js
fabOnReact Jan 26, 2022
9d2e110
removing java logic to trigger accessibility disabled announcement
fabOnReact Jan 26, 2022
8a2bd07
jest tests accessiblityState.disabled and disabled prop
fabOnReact Jan 26, 2022
88d063e
update jest snapshots
fabOnReact Jan 26, 2022
16d321b
adding invariant check on disabled prop type
fabOnReact Jan 28, 2022
80d7056
adding Slider disabled example
fabOnReact Jan 28, 2022
bc3f450
trigger invariant error when props.disabled is null
fabOnReact Jan 28, 2022
db11dd3
remove check on prop type commit 16d321b
fabOnReact Jan 28, 2022
1af1de1
improve test cases descriptions
fabOnReact Jan 28, 2022
584098b
add LogBox (console.warn) message to notify developer conflicting acc…
fabOnReact Jan 28, 2022
d15d881
update LogBox warning text
fabOnReact Jan 28, 2022
6e99b65
remove LogBox warning
fabOnReact Jan 28, 2022
3bf5b71
jest fix obsolete snapshots
fabOnReact Jan 28, 2022
e28fbda
Add test for reverted disabled/enabled case
BartoszKlonowski Feb 15, 2022
8a8436e
avoid conflicting disabled states
fabOnReact Feb 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions example/SliderExample.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
return <SliderExample value={0.6} vertical />;
},
},
{
title: 'Disabled slider',
platform: 'android',
render(): Element<any> {
return <SliderExample disabled value={0.6} />;
},
},
{
title: 'Slider with accessibilityState disabled',
platform: 'android',
render(): Element<any> {
return <SliderExample disabled value={0.6} />;
},
},
];
12 changes: 0 additions & 12 deletions src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
}
}

@Override
public boolean onTouchEvent(MotionEvent arg0) {
super.onTouchEvent(arg0);

if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
announceForAccessibility("slider disabled");
}
// Returns: True if the view handled the hover event
return true;
}

public void setupAccessibility(int index) {
if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
String sliderValue = mAccessibilityIncrements.get(index);
Expand Down
15 changes: 13 additions & 2 deletions src/js/Slider.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
}
: null;

const _disabled =
typeof props.disabled === 'boolean'
? props.disabled
: props.accessibilityState?.disabled === true;

const _accessibilityState =
typeof props.disabled === 'boolean'
? {...props.accessibilityState, disabled: props.disabled}
: props.accessibilityState;

const onChangeEvent = onValueChangeEvent;
const onSlidingStartEvent = onSlidingStart
? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
onRNCSliderSlidingStart={onSlidingStartEvent}
onRNCSliderSlidingComplete={onSlidingCompleteEvent}
onRNCSliderValueChange={onValueChangeEvent}
enabled={!props.disabled}
enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.
disabled={_disabled}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
accessibilityState={_accessibilityState}
/>
);
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
* and run Flow. */

SliderWithRef.defaultProps = {
disabled: false,
value: 0,
minimumValue: 0,
maximumValue: 1,
Expand Down
24 changes: 24 additions & 0 deletions src/js/__tests__/Slider.test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
expect(tree).toMatchSnapshot();
});

it('accessibilityState disabled sets disabled={true}', () => {
const tree = renderer
.create(<Slider accessibilityState={{disabled: true}} />)
.toJSON();

expect(tree).toMatchSnapshot();
});

it('disabled prop overrides accessibilityState.disabled', () => {
const tree = renderer
.create(<Slider disabled accessibilityState={{disabled: false}} />)
.toJSON();

expect(tree).toMatchSnapshot();
});

it('disabled prop overrides accessibilityState.enabled', () => {
const tree = renderer
.create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
.toJSON();

expect(tree).toMatchSnapshot();
});

it('renders a slider with custom props', () => {
const tree = renderer
.create(
Expand Down
95 changes: 95 additions & 0 deletions src/js/__tests__/__snapshots__/Slider.test.js.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
accessibilityState={
Object {
"disabled": true,
}
}
disabled={true}
enabled={false}
inverted={false}
maximumValue={1}
minimumValue={0}
onChange={null}
onRNCSliderSlidingComplete={null}
onRNCSliderSlidingStart={null}
onRNCSliderValueChange={null}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
step={0}
style={
Object {
"height": 40,
}
}
tapToSeek={false}
thumbImage={null}
value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
accessibilityState={
Object {
"disabled": true,
}
}
disabled={true}
enabled={false}
inverted={false}
maximumValue={1}
minimumValue={0}
onChange={null}
onRNCSliderSlidingComplete={null}
onRNCSliderSlidingStart={null}
onRNCSliderValueChange={null}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
step={0}
style={
Object {
"height": 40,
}
}
tapToSeek={false}
thumbImage={null}
value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
accessibilityState={
Object {
"disabled": true,
}
}
disabled={true}
enabled={false}
inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
accessibilityState={
Object {
"disabled": false,
}
}
disabled={false}
enabled={true}
inverted={false}
maximumValue={1}
minimumValue={0}
onChange={null}
onRNCSliderSlidingComplete={null}
onRNCSliderSlidingStart={null}
onRNCSliderValueChange={null}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
step={0}
style={
Object {
"height": 40,
}
}
tapToSeek={false}
thumbImage={null}
value={0}
/>
`;
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Fix: Conflicting states for accessibility and non-accessibility users#354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

BartoszKlonowski
merged 15 commits into

from

Feb 28, 2022
 Merged


Fix: Conflicting states for accessibility and non-accessibility users
#354
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


15 commits


Select commit
Hold shift + click to select a range
aaa1685

adding accessibilityState.disabled prop to Slider.js


fabOnReact Jan 26, 2022
9d2e110

removing java logic to trigger accessibility disabled announcement


fabOnReact Jan 26, 2022
8a2bd07

jest tests accessiblityState.disabled and disabled prop


fabOnReact Jan 26, 2022
88d063e

update jest snapshots


fabOnReact Jan 26, 2022
16d321b

adding invariant check on disabled prop type


fabOnReact Jan 28, 2022
80d7056

adding Slider disabled example


fabOnReact Jan 28, 2022
bc3f450

trigger invariant error when props.disabled is null


fabOnReact Jan 28, 2022
db11dd3

remove check on prop type commit 16d321b


fabOnReact Jan 28, 2022
1af1de1

improve test cases descriptions


fabOnReact Jan 28, 2022
584098b

add LogBox (console.warn) message to notify developer conflicting acc…


fabOnReact Jan 28, 2022
d15d881

update LogBox warning text


fabOnReact Jan 28, 2022
6e99b65

remove LogBox warning


fabOnReact Jan 28, 2022
3bf5b71

jest fix obsolete snapshots


fabOnReact Jan 28, 2022
e28fbda

Add test for reverted disabled/enabled case


BartoszKlonowski Feb 15, 2022
8a8436e

avoid conflicting disabled states


fabOnReact Feb 28, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


14 changes: 14 additions & 0 deletions
example/SliderExample.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -223,4 +223,18 @@ export const examples = [
 return <SliderExample value={0.6} vertical />;
 },
 },
 {
 title: 'Disabled slider',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
 {
 title: 'Slider with accessibilityState disabled',
 platform: 'android',
 render(): Element<any> {
 return <SliderExample disabled value={0.6} />;
 },
 },
];

12 changes: 0 additions & 12 deletions
src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,6 @@
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityManager;
import androidx.appcompat.widget.AppCompatSeekBar;
Expand DownExpand Up@@ -153,17 +152,6 @@ public void run() {
 }
 }

 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 super.onTouchEvent(arg0);

 if (arg0.getActionMasked() == MotionEvent.ACTION_DOWN && this.isEnabled() == false) {
 announceForAccessibility("slider disabled");
 }
 // Returns: True if the view handled the hover event
 return true;
 }

 public void setupAccessibility(int index) {
 if (mAccessibilityUnits != null && mAccessibilityIncrements != null && mAccessibilityIncrements.size() - 1 == (int)mMaxValue) {
 String sliderValue = mAccessibilityIncrements.get(index);
Expand Down

15 changes: 13 additions & 2 deletions
src/js/Slider.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,6 +263,16 @@ const SliderComponent = (
 }
 : null;

 const _disabled =
 typeof props.disabled === 'boolean'
 ? props.disabled
 : props.accessibilityState?.disabled === true;

 const _accessibilityState =
 typeof props.disabled === 'boolean'
 ? {...props.accessibilityState, disabled: props.disabled}
 : props.accessibilityState;

 const onChangeEvent = onValueChangeEvent;
 const onSlidingStartEvent = onSlidingStart
 ? (event: Event) => {
Expand All@@ -289,9 +299,11 @@ const SliderComponent = (
 onRNCSliderSlidingStart={onSlidingStartEvent}
 onRNCSliderSlidingComplete={onSlidingCompleteEvent}
 onRNCSliderValueChange={onValueChangeEvent}
 enabled={!props.disabled}
 enabled={!_disabled}
Comment thread
BartoszKlonowski marked this conversation as resolved.

 disabled={_disabled}
 onStartShouldSetResponder={() => true}
 onResponderTerminationRequest={() => false}
 accessibilityState={_accessibilityState}
 />
 );
};
Expand All@@ -303,7 +315,6 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 * and run Flow. */

SliderWithRef.defaultProps = {
 disabled: false,
 value: 0,
 minimumValue: 0,
 maximumValue: 1,
Expand Down

24 changes: 24 additions & 0 deletions
src/js/__tests__/Slider.test.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,30 @@ describe('<Slider />', () => {
 expect(tree).toMatchSnapshot();
 });

 it('accessibilityState disabled sets disabled={true}', () => {
 const tree = renderer
 .create(<Slider accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.disabled', () => {
 const tree = renderer
 .create(<Slider disabled accessibilityState={{disabled: false}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('disabled prop overrides accessibilityState.enabled', () => {
 const tree = renderer
 .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
 .toJSON();

 expect(tree).toMatchSnapshot();
 });

 it('renders a slider with custom props', () => {
 const tree = renderer
 .create(
Expand Down

95 changes: 95 additions & 0 deletions
src/js/__tests__/__snapshots__/Slider.test.js.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Slider /> accessibilityState disabled sets disabled={true} 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.disabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;

exports[`<Slider /> renders a slider with custom props 1`] = `
<RNCSlider
 disabled={false}
Expand DownExpand Up@@ -30,6 +90,11 @@ exports[`<Slider /> renders a slider with custom props 1`] = `

exports[`<Slider /> renders disabled slider 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": true,
 }
 }
 disabled={true}
 enabled={false}
 inverted={false}
Expand DownExpand Up@@ -77,3 +142,33 @@ exports[`<Slider /> renders enabled slider 1`] = `
 value={0}
/>
`;

exports[`<Slider /> disabled prop overrides accessibilityState.enabled 1`] = `
<RNCSlider
 accessibilityState={
 Object {
 "disabled": false,
 }
 }
 disabled={false}
 enabled={true}
 inverted={false}
 maximumValue={1}
 minimumValue={0}
 onChange={null}
 onRNCSliderSlidingComplete={null}
 onRNCSliderSlidingStart={null}
 onRNCSliderValueChange={null}
 onResponderTerminationRequest={[Function]}
 onStartShouldSetResponder={[Function]}
 step={0}
 style={
 Object {
 "height": 40,
 }
 }
 tapToSeek={false}
 thumbImage={null}
 value={0}
/>
`;