feat: Improve support for accessibility with aria label section

CHANGELOG.md

@@ -14,12 +14,13 @@
 
 **Added:**
 - Added proper support for React 19!
+- Added a new `ariaLabel` section to improve accessibility support
 - Added a new `useChatHistory` hook that provides 3 new actions (`showChatHistory`, `getHistoryMessages` and `setHistoryMessages`)
 - Added a new `sendButtonDisabledStyle` (send button is now properly disabled when textarea is disabled as well)
 - Improved localised styling of chatbots to reduce conflicts with host websites (and with other chatbots)
 
 **Note:**
-This update brings about a couple of fantastic improvements - drastically reduced library size (by nearly 60%), React 19 support and improved localised styles!
+This update brings about a couple of fantastic improvements - drastically reduced library size (by nearly 60%), React 19 support, improved localised styles and better accessibility support!
 
 ## v2.0.0-beta.13 (26-09-2024)
 

src/components/Buttons/AudioButton/AudioButton.tsx

@@ -33,6 +33,8 @@ const AudioButton = () => {
 
 	return (
 		<div
+			aria-label={settings.ariaLabel?.audioButton ?? "toggle audio"}
+			role="button" 
 			onMouseDown={(event: MouseEvent) => {
 				event.preventDefault();
 				toggleAudio();

src/components/Buttons/CloseChatButton/CloseChatButton.tsx

@@ -27,6 +27,8 @@ const CloseChatButton = () => {
 
 	return (
 		<div
+			aria-label={settings.ariaLabel?.closeChatButton ?? "close chat"}
+			role="button" 
 			onMouseDown={(event: MouseEvent) => {
 				event.stopPropagation();
 				openChat(false);

src/components/Buttons/EmojiButton/EmojiButton.tsx

@@ -128,6 +128,8 @@ const EmojiButton = () => {
 	return (
 		<>
 			<div
+				aria-label={settings.ariaLabel?.emojiButton ?? "emoji picker"}
+				role="button" 
 				ref={iconContainerRef}
 				className={`${textAreaDisabled ? "rcb-emoji-button-disabled" : "rcb-emoji-button-enabled"}`}
 				style={textAreaDisabled ? emojiButtonDisabledStyle : styles.emojiButtonStyle}

src/components/Buttons/FileAttachmentButton/FileAttachmentButton.tsx

@@ -129,6 +129,8 @@ const FileAttachmentButton = () => {
 		<>
 			{blockAllowsAttachment ? (
 				<label
+					aria-label={settings.ariaLabel?.fileAttachmentButton ?? "upload file"}
+					role="button" 
 					className="rcb-attach-button-enabled"
 					style={styles.fileAttachmentButtonStyle}
 				>

src/components/Buttons/NotificationButton/NotificationButton.tsx

@@ -33,6 +33,8 @@ const NotificationButton = () => {
 
 	return (
 		<div
+			aria-label={settings.ariaLabel?.notificationButton ?? "toggle notifications"}
+			role="button" 
 			onMouseDown={(event: MouseEvent) => {
 				event.preventDefault();
 				toggleNotifications();

src/components/Buttons/SendButton/SendButton.tsx

@@ -67,6 +67,8 @@ const SendButton = () => {
 
 	return (
 		<div
+			aria-label={settings.ariaLabel?.sendButton ?? "send message"}
+			role="button" 
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 			onMouseDown={async (event: MouseEvent) => {

src/components/Buttons/VoiceButton/VoiceButton.tsx

@@ -100,6 +100,8 @@ const VoiceButton = () => {
 
 	return (
 		<div
+			aria-label={settings.ariaLabel?.voiceButton ?? "toggle voice"}
+			role="button" 
 			onMouseDown={(event: MouseEvent) => {
 				event.preventDefault();
 				if (textAreaDisabled) {

src/components/ChatBotButton/ChatBotButton.tsx

@@ -38,7 +38,8 @@ const ChatBotButton = () => {
 		<>
 			{!settings.general?.embedded &&
 				<div
-					aria-label="Open Chat"
+					aria-label={settings.ariaLabel?.chatButton ?? "open chat"}
+					role="button"
 					style={chatButtonStyle}
 					className={`rcb-toggle-button ${isChatWindowOpen ? "rcb-button-hide" : "rcb-button-show"}`}
 					onClick={toggleChatWindow}

src/components/ChatBotInput/ChatBotInput.tsx

@@ -166,6 +166,8 @@ const ChatBotInput = ({ buttons }: { buttons: JSX.Element[] }) => {
 
 	return (
 		<div 
+			aria-label={settings.ariaLabel?.inputTextArea ?? "input text area"}
+			role="textbox" 
 			onMouseDown={(event: MouseEvent) => {
 				event.stopPropagation();
 				// checks if user is interacting with chatbot for the first time

src/constants/internal/DefaultSettings.tsx

@@ -183,5 +183,16 @@ export const DefaultSettings: Settings = {
 		rcbUserSubmitText: false,
 		rcbUserUploadFile: false,
 		rcbTextAreaChangeValue: false,
+	},
+	ariaLabel: {
+		chatButton: "open chat",
+		audioButton: "toggle audio",
+		closeChatButton: "close chat",
+		emojiButton: "emoji picker",
+		fileAttachmentButton: "upload file",
+		notificationButton: "toggle notifications",
+		sendButton: "send message",
+		voiceButton: "toggle voice",
+		inputTextArea: "input text area",
 	}
 }

src/types/Settings.ts

@@ -149,5 +149,16 @@ export type Settings = {
 		rcbUserSubmitText?: boolean;
 		rcbUserUploadFile?: boolean;
 		rcbTextAreaChangeValue?: boolean;
+	},
+	ariaLabel?: {
+		chatButton?: string;
+		audioButton?: string;
+		closeChatButton?: string;
+		emojiButton?: string;
+		fileAttachmentButton?: string;
+		notificationButton?: string;
+		sendButton?: string;
+		voiceButton?: string;
+		inputTextArea?: string;
 	}
 }