Skip to content

a11y: add aria-labels to all icon-only buttons and interactive elements #1176

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
Aryan-Verma-999 wants to merge 1 commit into
base: develop
Choose a base branch
from
+32 −3
Open

a11y: add aria-labels to all icon-only buttons and interactive elements #1176

Show file tree
Hide file tree
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
9 changes: 8 additions & 1 deletion packages/react/src/views/ChatInput/ChatInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -631,7 +631,13 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
ref={messageRef}
/>

<input type="file" hidden ref={inputRef} onChange={sendAttachment} />
<input
type="file"
hidden
ref={inputRef}
onChange={sendAttachment}
aria-label="Upload file"
/>
<Box
css={css`
padding: 0.25rem;
Expand All @@ -646,6 +652,7 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
type="primary"
disabled={disableButton || isRecordingMessage}
icon="send"
aria-label="Send message"
/>
) : null
) : (
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const ChatInputFormattingToolbar = ({
square
ghost
disabled={isRecordingMessage}
aria-label="Emoji"
onClick={() => {
if (isRecordingMessage) return;
setEmojiOpen(true);
Expand Down Expand Up @@ -152,6 +153,7 @@ const ChatInputFormattingToolbar = ({
square
ghost
disabled={isRecordingMessage}
aria-label="Upload file"
onClick={() => {
if (isRecordingMessage) return;
handleClickToOpenFiles();
Expand Down Expand Up @@ -181,6 +183,7 @@ const ChatInputFormattingToolbar = ({
square
ghost
disabled={isRecordingMessage}
aria-label="Insert link"
onClick={() => {
if (isRecordingMessage) return;
setInsertLinkOpen(true);
Expand Down Expand Up @@ -222,6 +225,7 @@ const ChatInputFormattingToolbar = ({
square
disabled={isRecordingMessage}
ghost
aria-label={item.name}
onClick={() => {
if (isRecordingMessage) return;
formatSelection(messageRef, item.pattern);
Expand Down Expand Up @@ -302,6 +306,7 @@ const ChatInputFormattingToolbar = ({
square
disabled={isRecordingMessage}
ghost
aria-label={itemInFormatter.name}
onClick={() =>
formatSelection(messageRef, itemInFormatter.pattern)
}
Expand All @@ -323,6 +328,7 @@ const ChatInputFormattingToolbar = ({
square
ghost
disabled={isRecordingMessage}
aria-label="More options"
onClick={() => {
if (isRecordingMessage) return;
setPopoverOpen(!isPopoverOpen);
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/views/DynamicHeader/DynamicHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const DynamicHeader = ({
display="inline"
square
size="small"
aria-label="Go back"
>
<Icon name={iconName} size="1.25rem" />
</ActionButton>
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/views/SurfaceMenu/SurfaceItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const SurfaceItem = ({ item, size }) => (
size={size}
iconSize="small"
color={item.type}
aria-label={item.label}
/>
</Tooltip>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/ui-elements/src/components/Menu/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const Menu = ({
ghost
icon="kebab"
size={size}
aria-label="Options menu"
onClick={(e) => {
e.stopPropagation();
setOpen((prev) => !prev);
Expand All @@ -84,6 +85,7 @@ const Menu = ({
ghost
icon="kebab"
size={size}
aria-label="Options menu"
onClick={(e) => {
e.stopPropagation();
setOpen((prev) => !prev);
Expand Down
8 changes: 7 additions & 1 deletion packages/ui-elements/src/components/Modal/ModalClose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ export const ModalClose = ({
style={{ ...style, ...styleOverrides }}
{...props}
>
<ActionButton ghost icon="cross" onClick={onClick} tabIndex={tabIndex} />
<ActionButton
ghost
icon="cross"
onClick={onClick}
tabIndex={tabIndex}
aria-label="Close"
/>
</Box>
);
};
8 changes: 7 additions & 1 deletion packages/ui-elements/src/components/ToastBar/ToastBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,13 @@ const ToastBar = ({ toast, onClose }) => {
>
<Icon size="1em" name={iconName} />
{message}
<ActionButton icon="cross" size="small" onClick={onClose} ghost />
<ActionButton
icon="cross"
size="small"
onClick={onClose}
ghost
aria-label="Dismiss"
/>
</Box>
);
};
Expand Down