react / react/react-native

Accessibility loses focus on horizontal scroll

Đang mở
#41,566 0 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Issue: Author Provided Repro Needs: Triage :mag:
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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
  1. Create a new React Native app npx react-native@latest init ScreenReaderTest
  2. Remove enough content from the body of App() so that the content doesn't reach the bottom of the screen
  3. Make everything inaccessible except for the Text elements
  4. Build the app to a physical iOS device
  5. Select the first Text element on the screen
  6. 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
  7. 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

https://snack.expo.dev/@dlinds-1/grounded-blue-churros

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với Snack được liên kết và bản tái hiện tối thiểu trong App.tsx, sau đó chạy nó trên thiết bị iOS vật lý với VoiceOver và thực hiện các bước cuộn ngang được liệt kê. So sánh tiêu điểm trợ năng với đường viền hiển thị trước và sau thao tác; được xem là hoàn tất khi hành vi của tiêu điểm đã được sửa hoặc khi giới hạn và cấu hình bị ảnh hưởng được ghi chép rõ ràng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
ios, react-native, typescript
Lĩnh vực
accessibility, mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.