Skip to content

fix(example): add accessible names to icon-only buttons on IconButton screen (#5182) #5195

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

Open
EnesKartal wants to merge 1 commit into
base: main
Choose a base branch
from
+64 −7
Open

fix(example): add accessible names to icon-only buttons on IconButton screen (#5182) #5195

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
71 changes: 64 additions & 7 deletions example/src/Examples/IconButtonExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,33 @@ const ButtonExample = () => {
<ScreenWrapper contentContainerStyle={styles.v3Container}>
<List.Section title="Default">
<View style={styles.row}>
<IconButton icon="camera" size={24} onPress={() => {}} />
<IconButton icon="camera" selected size={24} onPress={() => {}} />
<IconButton icon="camera" disabled size={24} onPress={() => {}} />
<IconButton icon="camera" size={24} onPress={() => {}} loading />
<IconButton
icon="camera"
size={24}
onPress={() => {}}
aria-label="Camera default"
/>
<IconButton
icon="camera"
selected
size={24}
onPress={() => {}}
aria-label="Camera default selected"
/>
<IconButton
icon="camera"
disabled
size={24}
onPress={() => {}}
aria-label="Camera default disabled"
/>
<IconButton
icon="camera"
size={24}
onPress={() => {}}
loading
aria-label="Camera default loading"
/>
</View>
</List.Section>

Expand All @@ -23,20 +46,23 @@ const ButtonExample = () => {
mode="contained"
size={24}
onPress={() => {}}
aria-label="Camera contained"
/>
<IconButton
icon="camera"
mode="contained"
selected
size={24}
onPress={() => {}}
aria-label="Camera contained selected"
/>
<IconButton
icon="camera"
mode="contained"
disabled
size={24}
onPress={() => {}}
aria-label="Camera contained disabled"
/>
<IconButton
icon=""
Expand All @@ -45,6 +71,7 @@ const ButtonExample = () => {
loading
size={24}
onPress={() => {}}
aria-label="Camera contained loading"
/>
</View>
</List.Section>
Expand All @@ -56,20 +83,23 @@ const ButtonExample = () => {
mode="contained-tonal"
size={24}
onPress={() => {}}
aria-label="Camera contained tonal"
/>
<IconButton
icon="camera"
selected
mode="contained-tonal"
size={24}
onPress={() => {}}
aria-label="Camera contained tonal selected"
/>
<IconButton
icon="camera"
mode="contained-tonal"
disabled
size={24}
onPress={() => {}}
aria-label="Camera contained tonal disabled"
/>
<IconButton
icon=""
Expand All @@ -78,6 +108,7 @@ const ButtonExample = () => {
size={24}
onPress={() => {}}
loading
aria-label="Camera contained tonal loading"
/>
</View>
</List.Section>
Expand All @@ -89,20 +120,23 @@ const ButtonExample = () => {
mode="outlined"
size={24}
onPress={() => {}}
aria-label="Camera outline"
/>
<IconButton
selected
icon="camera"
mode="outlined"
size={24}
onPress={() => {}}
aria-label="Camera outlined selected"
/>
<IconButton
icon="camera"
mode="outlined"
disabled
size={24}
onPress={() => {}}
aria-label="Camera outlined disabled"
/>
<IconButton
icon=""
Expand All @@ -111,6 +145,7 @@ const ButtonExample = () => {
size={24}
onPress={() => {}}
loading
aria-label="Camera outlined loading"
/>
</View>
</List.Section>
Expand All @@ -122,6 +157,7 @@ const ButtonExample = () => {
size={24}
iconColor={Palette.tertiary50}
onPress={() => {}}
aria-label="Lock"
/>
<IconButton
icon="eye"
Expand All @@ -130,6 +166,7 @@ const ButtonExample = () => {
size={24}
iconColor={Palette.tertiary50}
onPress={() => {}}
aria-label="Eye square"
/>
<IconButton
icon="eye"
Expand All @@ -139,6 +176,7 @@ const ButtonExample = () => {
contentStyle={styles.contentPadding}
iconColor={Palette.tertiary50}
onPress={() => {}}
aria-label="Eye slightly rounded"
/>
<IconButton
icon="heart"
Expand All @@ -147,6 +185,7 @@ const ButtonExample = () => {
size={24}
iconColor={Palette.tertiary50}
onPress={() => {}}
aria-label="Heart contained tonal"
/>
<IconButton
icon="heart"
Expand All @@ -155,16 +194,34 @@ const ButtonExample = () => {
size={24}
iconColor={Palette.tertiary50}
onPress={() => {}}
aria-label="Heart outlined"
/>
<IconButton
icon="camera"
size={36}
onPress={() => {}}
aria-label="Camera medium"
/>
<IconButton icon="camera" size={36} onPress={() => {}} />
<IconButton
icon="lock"
size={36}
onPress={() => {}}
containerColor={Palette.tertiary60}
aria-label="Lock medium with container color"
/>
<IconButton
icon="heart"
size={60}
onPress={() => {}}
aria-label="Heart large"
/>
<IconButton
icon=""
size={60}
onPress={() => {}}
loading
aria-label="Heart large loading"
/>
<IconButton icon="heart" size={60} onPress={() => {}} />
<IconButton icon="" size={60} onPress={() => {}} loading />
</View>
</List.Section>
</ScreenWrapper>
Expand Down
Loading