Skip to content

M
MobileScreenReadersApi
Commit 6b0c632b authored by paolo.pecis's avatar paolo.pecis
Browse files
Options

Add RN Hide Focus

parent 30e92aed
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 31 deletions
HideFocus/RNHideFocus/App.js
View file @ 6b0c632b
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Body, Header, Title } from 'react-native';
function changeText(){
console.log("PIPPO");
}
......@@ -15,46 +17,39 @@ export default class App extends React.Component{
hideFocus(){
console.log("Button clicked")
this.setState({accessible:false, buttonText:"I am no more focusable"})
this.setState({accessible:false, buttonText:"BUTTON 2: I am no more focusable"})
}
render(){
return (
<>
<View style={styles.header}>
<Text style={styles.headerText}>RNChangeFocus</Text>
</View>
<View style={styles.container} >
<View>
<TouchableOpacity style={styles.button} onPress={() => this.hideFocus()} >
<Text>press to hide BUTTON 2 focus</Text>
</TouchableOpacity>
</View>
<View importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
<TouchableOpacity backgroundColor="" style={styles.button} importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
<Text>{this.state.buttonText}</Text>
<Text>Press to make BUTTON 2 unfocusable</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity style={styles.button}>
<Text>BUTTON 3 </Text>
<Text>BUTTON 1 </Text>
</TouchableOpacity>
</View>
<View importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
<TouchableOpacity backgroundColor="" style={styles.button} importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
<Text>{this.state.buttonText}</Text>
</TouchableOpacity>
</View>
);
}
}
function App2() {
return (
<View style={styles.container}>
<Text>SSSSSSSOpen up App.js tsasddso start working on your app!AAAAAAAAA</Text>
<TouchableOpacity style={styles.button} onPress={changeText}>
<Text>Press to change focus to BUTTON 3</Text>
</TouchableOpacity>
</View>
</>
);
}
}
const styles = StyleSheet.create({
......@@ -70,4 +65,16 @@ const styles = StyleSheet.create({
padding: 10,
marginBottom: 20,
},
header: {
backgroundColor: '#008577',
paddingHorizontal: 20,
paddingVertical: 20,
marginTop: 20,
},
headerText: {
color: 'white',
},
});
HideFocus/RNHideFocus/package-lock.json
View file @ 6b0c632b
......@@ -1036,6 +1036,14 @@
"minimist": "^1.2.0"
}
},
"@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
"requires": {
"@types/hammerjs": "^2.0.36"
}
},
"@expo/vector-icons": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-10.1.0.tgz",
......@@ -1220,6 +1228,71 @@
"resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-3.0.0.tgz",
"integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg=="
},
"@react-native-community/masked-view": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.6.tgz",
"integrity": "sha512-PpMoeXwPUoldCRKDuSi+zK5rT+sJTW6ri6RdGPkSKRzU77Q1d9IaR0O5IKvBj0XSdL3p+dcOa05gk35aGDffBQ=="
},
"@react-navigation/core": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.3.5.tgz",
"integrity": "sha512-s+XL+2r/NS9e0/kcRCBJ2NV7+3zqAqLXFHX2+qzES++oc+gb5A8JSrHjwRUwxMqR2AOqSfz5HSyYXnYIwgl4JQ==",
"requires": {
"@react-navigation/routers": "^5.4.1",
"escape-string-regexp": "^2.0.0",
"nanoid": "^3.0.2",
"query-string": "^6.12.0",
"react-is": "^16.13.0",
"use-subscription": "^1.4.0"
},
"dependencies": {
"escape-string-regexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
},
"query-string": {
"version": "6.12.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.12.1.tgz",
"integrity": "sha512-OHj+zzfRMyj3rmo/6G8a5Ifvw3AleL/EbcHMD27YA31Q+cO5lfmQxECkImuNVjcskLcvBRVHNAB3w6udMs1eAA==",
"requires": {
"decode-uri-component": "^0.2.0",
"split-on-first": "^1.0.0",
"strict-uri-encode": "^2.0.0"
}
},
"strict-uri-encode": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
}
}
},
"@react-navigation/native": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.1.7.tgz",
"integrity": "sha512-0/TWbeorcLb42AN9KYK4rWzZk3RrpX95vIuqzcI5zPlo/Yhs3h+TEXX1s+6n2MT42W8xHPZzK/RaHnBGKD0aLw==",
"requires": {
"@react-navigation/core": "^5.3.5"
}
},
"@react-navigation/routers": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.1.tgz",
"integrity": "sha512-Gay9yCrE2xuvUUJcbG+giqnh2ZAPyYecO5RJ3tXDztmT+UaJoyHLSfyjkb74gSjij684udtzUKkoXGBbgcANhg==",
"requires": {
"nanoid": "^3.0.2"
}
},
"@react-navigation/stack": {
"version": "5.2.14",
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.2.14.tgz",
"integrity": "sha512-hVzkqcAXPrZ10Gjtlzl8+Ad9x1p0n0Vn2YTff4xSlZkVVgKcHyTAWg59NL93fvq9T1zJXOCJZ0hoHiFMmNmAlA==",
"requires": {
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.2.1"
}
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
......@@ -1230,6 +1303,11 @@
"resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
"integrity": "sha1-jtIE2g9U6cjq7DGx7skeJRMtCCw="
},
"@types/hammerjs": {
"version": "2.0.36",
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz",
"integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ=="
},
"@types/invariant": {
"version": "2.2.32",
"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.32.tgz",
......@@ -1957,6 +2035,15 @@
"object-visit": "^1.0.0"
}
},
"color": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.2"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
......@@ -1970,6 +2057,15 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"color-support": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
......@@ -3469,6 +3565,11 @@
"resolved": "https://registry.npmjs.org/hermes-engine/-/hermes-engine-0.2.1.tgz",
"integrity": "sha512-eNHUQHuadDMJARpaqvlCZoK/Nitpj6oywq3vQ3wCwEsww5morX34mW5PmKWQTO7aU0ck0hgulxR+EVDlXygGxQ=="
},
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"hosted-git-info": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
......@@ -4694,6 +4795,11 @@
"integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
"optional": true
},
"nanoid": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.3.tgz",
"integrity": "sha512-Zw8rTOUfh6FlKgkEbHiB1buOF2zOPOQyGirABUWn+9Z7m9PpyoLVkh6Ksc53vBjndINQ2+9LfRPaHxb/u45EGg=="
},
"nanomatch": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
......@@ -5621,6 +5727,43 @@
}
}
},
"react-native-gesture-handler": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz",
"integrity": "sha512-gQgIKhDiYf754yzhhliagLuLupvGb6ZyBdzYzr7aus3Fyi87TLOw63ers+r4kGw0h26oAWTAdHd34JnF4NeL6Q==",
"requires": {
"@egjs/hammerjs": "^2.0.17",
"hoist-non-react-statics": "^2.3.1",
"invariant": "^2.2.4",
"prop-types": "^15.7.2"
}
},
"react-native-iphone-x-helper": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
"integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
},
"react-native-reanimated": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.7.1.tgz",
"integrity": "sha512-aBwhoQdH4shkeTPbi7vKcAwYOzBp/6zElEKuIOgby11TceoM7y5SgNImC3HbDWWld3QV2PA2AgQGwAy51WgF3Q==",
"requires": {
"fbjs": "^1.0.0"
}
},
"react-native-safe-area-context": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-0.7.3.tgz",
"integrity": "sha512-9Uqu1vlXPi+2cKW/CW6OnHxA76mWC4kF3wvlqzq4DY8hn37AeiXtLFs2WkxH4yXQRrnJdP6ivc65Lz+MqwRZAA=="
},
"react-native-screens": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.2.0.tgz",
"integrity": "sha512-a0VzxOWot7F9B/GQyDSssBRd3jUJazFnTQS61IiyReWB6aHlFhf3Xz10jBRoURXy1EMCDCHgenmTVTkKHpKyqQ==",
"requires": {
"debounce": "^1.2.0"
}
},
"react-native-view-shot": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz",
......@@ -5643,6 +5786,15 @@
"react-timer-mixin": "^0.13.4"
}
},
"react-navigation-stack": {
"version": "2.3.13",
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-2.3.13.tgz",
"integrity": "sha512-WOfrkDnTaGeVU+8+Fm5WHvovN/9o1jHADcOBBGgNN6T8XsYwtGHPr5eQbe77LKYXQ/gX3pcGiOVG3WSBDHzH+w==",
"requires": {
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.2.1"
}
},
"react-refresh": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.2.tgz",
......@@ -6052,6 +6204,21 @@
"plist": "^3.0.1"
}
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"requires": {
"is-arrayish": "^0.3.1"
},
"dependencies": {
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
......@@ -6256,6 +6423,11 @@
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
"integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q=="
},
"split-on-first": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
},
"split-string": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
......@@ -6688,6 +6860,14 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
"use-subscription": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.1.tgz",
"integrity": "sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==",
"requires": {
"object-assign": "^4.1.1"
}
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
......
HideFocus/RNHideFocus/package.json
View file @ 6b0c632b
......@@ -8,11 +8,19 @@
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.14",
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7"
"react-native-gesture-handler": "~1.6.0",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.11.7",
"react-navigation-stack": "^2.3.13"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment