Accessibility loses focus on horizontal scroll
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
I have this issue that I can't seem to find anyone else talking about having the same problem. Basically, if you have the screen reader enabled on iOS and long scroll (so the tap tap tap happens), on an inaccessible container, then the screen reader ends up focusing on the container. Weirdly, the outline for the screen reader stays where you were. Scrolling backwards does go back up from the bottom through the elements.
I've started a basic React Native app and the same thing happens. In the attached videos, I scroll just enough to get the long horizontal tap scroll engaged, and then the screen reader loses focus and is focused on the bottom of the screen. I then swipe right, and it gives the sort of "end of page" sound even though visually, I'm on the first element still. I can then swipe left, and be back into the content but at the bottom of the page.
Any help would be amazing - is there just something I am missing about ensuring content is not accessible?
https://github.com/facebook/react-native/assets/7016167/3769d5b3-a129-4f29-acc5-a3ae10b14677
My modified and very bare bones App.tsx from the default new React Native app
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: 'gray',
flex: 1, // happens with or without the flex here
};
return (
<SafeAreaView
style={backgroundStyle}
accessible={false}
importantForAccessibility="no">
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}
accessible={false}
importantForAccessibility="no"
horizontal={false}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}
accessible={false}
importantForAccessibility="no">
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
</View>
</ScrollView>
</SafeAreaView>
);
}
React Native Version
0.72.7
Output of npx react-native info
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1 Pro
Memory: 65.53 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.0
path: ~/.nvm/versions/node/v18.17.0/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v18.17.0/bin/yarn
npm:
version: 9.6.7
path: ~/.nvm/versions/node/v18.17.0/bin/npm
Watchman:
version: 2023.09.25.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.11.3
path: /Users/dan/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.1
- iOS 16.1
- macOS 13.0
- tvOS 16.1
- watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 14.1/14B47
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.17
path: /usr/bin/javac
Ruby:
version: 2.7.5
path: /Users/dlinds/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.7
wanted: 0.72.7
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Steps to reproduce
- Create a new React Native app
npx react-native@latest init ScreenReaderTest - Remove enough content from the body of App() so that the content doesn't reach the bottom of the screen
- Make everything inaccessible except for the Text elements
- Build the app to a physical iOS device
- Select the first Text element on the screen
- Engage the horizontal scroll slide gesture at the bottom of the screen, you should hear the multi tap sound
- even a longer slide can engage it
- The screen reader outline will still be on the first element, but you can't swipe to the next element
- You can however swipe backwards to move upwards on the page, as the focus is now at the bottom of the screen
Snack, screenshot, or link to a repository
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
リンクされたSnackと最小限のApp.tsxの再現例から始め、VoiceOverを有効にした物理的なiOSデバイスで実行して、記載された水平スクロールの手順に従います。ジェスチャーの前後で、アクセシビリティフォーカスと表示されるアウトラインを比較します。完了の条件は、フォーカスの動作が修正されているか、制限事項と影響を受ける設定が明確に文書化されていることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- ios, react-native, typescript
- 領域
- accessibility, mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 35/100