Skip to content
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

[LinkV1] Remove text from Link a11y tree and add a11yLabel #3856

Merged
merged 6 commits into from
Feb 11, 2025
Merged

[LinkV1] Remove text from Link a11y tree and add a11yLabel #3856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
880abb4
Remove text from Link a11y tree and add a11yLabel
ksiler Feb 10, 2025
bed0405
add LinkV1 to macOS test pages
ksiler Feb 10, 2025
3de135d
Change files
ksiler Feb 10, 2025
95e2748
undo yarn.lock changes
ksiler Feb 10, 2025
c8f7502
restore yarn.lock
ksiler Feb 10, 2025
8c67f51
update link snapshots
ksiler Feb 10, 2025
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
2 changes: 1 addition & 1 deletion apps/fluent-tester/src/testPages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const tests: TestDescription[] = [
name: 'Link V1',
component: LinkV1Test,
testPageButton: Constants.HOMEPAGE_LINKV1_BUTTON,
platforms: ['win32', 'android', 'windows'],
platforms: ['macos', 'win32', 'android', 'windows'],
},
{
name: 'Menu',
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-link-a9326e1b-bd1d-4dc4-b4f1-8f3ea2447708.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Remove text from Link a11y tree and add a11yLabel",
"packageName": "@fluentui-react-native/link",
"email": "krsiler@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-tester-384ba26f-dbdb-472c-9b9f-70a0931eb6b7.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "add LinkV1 to macOS test pages",
"packageName": "@fluentui-react-native/tester",
"email": "krsiler@microsoft.com",
"dependentChangeType": "patch"
}
14 changes: 12 additions & 2 deletions packages/components/Link/src/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @jsxRuntime classic */
/** @jsx withSlots */
import React from 'react';
import { Platform, View } from 'react-native';

import type { UseSlots } from '@fluentui-react-native/framework';
Expand Down Expand Up @@ -48,11 +49,20 @@ export const Link = compose<LinkType>({
// Views in Text, we use that to handle interactions instead.
const supportsInteractionOnText = Platform.OS !== 'macos';

// Find the first child that's a string and save it to set as the link's
// accessibilityLabel if one isn't defined.
let linkA11yLabel = '';
linkA11yLabel = React.Children.toArray(children)
.find((child) => typeof child === 'string')
.toString();

return supportsA11yTextInText && supportsInteractionOnText && (inline || mergedProps.selectable) ? (
<Slots.content {...mergedProps}>{children}</Slots.content>
) : (
<Slots.root {...mergedProps}>
<Slots.content focusable={false}>{children}</Slots.content>
<Slots.root {...mergedProps} accessibilityLabel={mergedProps.accessibilityLabel ?? linkA11yLabel}>
<Slots.content focusable={false} accessible={false}>
{children}
</Slots.content>
</Slots.root>
);
};
Expand Down
8 changes: 8 additions & 0 deletions packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`Link component tests Default Link 1`] = `
<View
accessibilityLabel="Link to Bing"
accessibilityRole="link"
accessibilityState={
{
Expand Down Expand Up @@ -31,6 +32,7 @@ exports[`Link component tests Default Link 1`] = `
tooltip="https://www.bing.com"
>
<Text
accessible={false}
ellipsizeMode="tail"
focusable={false}
numberOfLines={0}
Expand All @@ -52,6 +54,7 @@ exports[`Link component tests Default Link 1`] = `

exports[`Link component tests Default Link as a pressable 1`] = `
<View
accessibilityLabel="Link to Bing"
accessibilityRole="link"
accessibilityState={
{
Expand Down Expand Up @@ -80,6 +83,7 @@ exports[`Link component tests Default Link as a pressable 1`] = `
}
>
<Text
accessible={false}
ellipsizeMode="tail"
focusable={false}
numberOfLines={0}
Expand All @@ -101,6 +105,7 @@ exports[`Link component tests Default Link as a pressable 1`] = `

exports[`Link component tests Inline Link 1`] = `
<View
accessibilityLabel="Link to Bing"
accessibilityRole="link"
accessibilityState={
{
Expand Down Expand Up @@ -130,6 +135,7 @@ exports[`Link component tests Inline Link 1`] = `
tooltip="https://www.bing.com"
>
<Text
accessible={false}
ellipsizeMode="tail"
focusable={false}
numberOfLines={0}
Expand All @@ -152,6 +158,7 @@ exports[`Link component tests Inline Link 1`] = `

exports[`Link component tests Subtle Link 1`] = `
<View
accessibilityLabel="Link to Bing"
accessibilityRole="link"
accessibilityState={
{
Expand Down Expand Up @@ -182,6 +189,7 @@ exports[`Link component tests Subtle Link 1`] = `
tooltip="https://www.bing.com"
>
<Text
accessible={false}
ellipsizeMode="tail"
focusable={false}
numberOfLines={0}
Expand Down