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 ( - );