add aria-label for modal close button (X)

This commit is contained in:
btzr-io 2021-07-13 18:23:45 -05:00
parent 97202dd7aa
commit 3e13930425
2 changed files with 12 additions and 3 deletions

View file

@ -2043,5 +2043,8 @@
"Trending for #Art": "Trending for #Art", "Trending for #Art": "Trending for #Art",
"Trending for #Education": "Trending for #Education", "Trending for #Education": "Trending for #Education",
"Trending for #Technology": "Trending for #Technology", "Trending for #Technology": "Trending for #Technology",
"Enter a @username or URL": "Enter a @username or URL",
"examples: @channel, @channel#3, https://odysee.com/@Odysee:8, lbry://@Odysee#8": "examples: @channel, @channel#3, https://odysee.com/@Odysee:8, lbry://@Odysee#8",
"Moderators": "Moderators",
"--end--": "--end--" "--end--": "--end--"
} }

View file

@ -14,8 +14,8 @@ type ModalProps = {
abortButtonLabel?: string, abortButtonLabel?: string,
confirmButtonDisabled?: boolean, confirmButtonDisabled?: boolean,
abortButtonDisabled?: boolean, abortButtonDisabled?: boolean,
onConfirmed?: any => any, onConfirmed?: (any) => any,
onAborted?: any => any, onAborted?: (any) => any,
className?: string, className?: string,
children?: React.Node, children?: React.Node,
extraContent?: React.Node, extraContent?: React.Node,
@ -52,7 +52,13 @@ export function Modal(props: ModalProps) {
> >
{title && <h1 className="card__title card__title--deprecated">{title}</h1>} {title && <h1 className="card__title card__title--deprecated">{title}</h1>}
{type === 'card' && ( {type === 'card' && (
<Button iconSize={isMobile ? 24 : undefined} button="close" icon={ICONS.REMOVE} onClick={onAborted} /> <Button
iconSize={isMobile ? 24 : undefined}
button="close"
aria-label={__('Close')}
icon={ICONS.REMOVE}
onClick={onAborted}
/>
)} )}
{children} {children}
{type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons {type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons