diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx
index 94ab5f5b5..9aa21176d 100644
--- a/src/components/RichTextEditor/BlockStyleButtons.jsx
+++ b/src/components/RichTextEditor/BlockStyleButtons.jsx
@@ -5,8 +5,8 @@ import BulletIcon from '../../styles/icons/bullet.svg';
import NumberIcon from '../../styles/icons/number.svg';
const BLOCK_TYPES = [
- { label: , style: 'unordered-list-item' },
- { label: , style: 'ordered-list-item' },
+ { label: , style: 'unordered-list-item', ariaLabel: 'Unordered list' },
+ { label: , style: 'ordered-list-item', ariaLabel: 'Ordered list' },
];
const BlockStyleButtons = (props) => {
@@ -24,7 +24,7 @@ const BlockStyleButtons = (props) => {
active={type.style === blockType}
label={type.label}
onToggle={() => onToggle(type.style)}
- style={type.style}
+ aria-label={type.ariaLabel}
/>
));
};
diff --git a/src/components/RichTextEditor/FileUploadAction.jsx b/src/components/RichTextEditor/FileUploadAction.jsx
index 665b1b713..af58957bd 100644
--- a/src/components/RichTextEditor/FileUploadAction.jsx
+++ b/src/components/RichTextEditor/FileUploadAction.jsx
@@ -17,6 +17,7 @@ const FileUploadAction = ({ onFileUpload, fileFilter }) => {
fileInputRef.current.value = '';
fileInputRef.current.click();
}}
+ aria-label="Download file"
/>
, style: 'BOLD' },
- { label: , style: 'ITALIC' },
- { label: , style: 'UNDERLINE' },
+ { label: , style: 'BOLD', ariaLabel: 'Bold' },
+ { label: , style: 'ITALIC', ariaLabel: 'Italic' },
+ {
+ label: ,
+ style: 'UNDERLINE',
+ ariaLabel: 'Underline',
+ },
];
const InlineStyleButtons = (props) => {
@@ -24,7 +28,7 @@ const InlineStyleButtons = (props) => {
active={currentStyle.has(type.style)}
label={type.label}
onToggle={() => onToggle(type.style)}
- style={type.style}
+ aria-label={type.ariaLabel}
/>
));
};
diff --git a/src/components/RichTextEditor/MentionAction.jsx b/src/components/RichTextEditor/MentionAction.jsx
index 295eea9cf..0a7792857 100644
--- a/src/components/RichTextEditor/MentionAction.jsx
+++ b/src/components/RichTextEditor/MentionAction.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import ToolbarButton from './ToolbarButton';
const MentionAction = ({ onToggle }) => (
- @} onToggle={onToggle} />
+ @} onToggle={onToggle} aria-label="Mention" />
);
export default MentionAction;
diff --git a/src/components/RichTextEditor/ToolbarButton.jsx b/src/components/RichTextEditor/ToolbarButton.jsx
index 0b679c257..67031a57c 100644
--- a/src/components/RichTextEditor/ToolbarButton.jsx
+++ b/src/components/RichTextEditor/ToolbarButton.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import Button from '../Button';
-const ToolbarButton = ({ onToggle, label, active }) => {
+const ToolbarButton = ({ onToggle, label, active, ...rest }) => {
const className = classnames('aui--toolbar-button', {
active,
});
@@ -18,7 +18,7 @@ const ToolbarButton = ({ onToggle, label, active }) => {
);
return (
-