This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch fix/1.3.5/bug in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit fc5e2ac70bc943e2241fc933f30b9d6c7f8f29df Author: shuai <[email protected]> AuthorDate: Fri Jun 7 11:05:22 2024 +0800 fix: reactions add aria-label attribute --- i18n/en_US.yaml | 4 +++ .../Detail/components/Reactions/index.tsx | 41 +++++++++++++++------- ui/src/pages/Questions/Detail/index.scss | 2 +- 3 files changed, 33 insertions(+), 14 deletions(-) diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index e08092f4..e98a2fa4 100644 --- a/i18n/en_US.yaml +++ b/i18n/en_US.yaml @@ -781,6 +781,10 @@ ui: heart: heart smile: smile frown: frown + btn_label: add or remove reactions + undo_emoji: undo {{ emoji }} reaction + react_emoji: react with {{ emoji }} + unreact_emoji: unreact with {{ emoji }} comment: btn_add_comment: Add comment reply_to: Reply to diff --git a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx index 56c5a838..c6f9db53 100644 --- a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx +++ b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx @@ -69,10 +69,17 @@ const Index: FC<Props> = ({ const renderPopover = (props) => ( <Popover id="reaction-button-tooltip" {...props}> <Popover.Body className="d-block d-md-flex flex-wrap p-1"> - {emojiMap.map((d) => ( + {emojiMap.map((d, index) => ( <Button + aria-label={ + reactions?.[d.name]?.is_active + ? t('reaction.undo_emoji', { emoji: d.name }) + : t(`reaction.${d.name}`) + } key={d.icon} variant="light" + active={reactions?.[d.name]?.is_active} + className={`${index !== 0 ? 'ms-1' : ''}`} size="sm" onClick={() => handleSubmit({ object_id: objectId, emoji: d.name }) @@ -108,6 +115,8 @@ const Index: FC<Props> = ({ onToggle={(show) => setReactIsActive(show)}> <Button size="sm" + aria-label={t('reaction.btn_label')} + aria-haspopup="true" active={reactIsActive} className="smile-btn rounded-pill link-secondary" variant="light"> @@ -117,33 +126,39 @@ const Index: FC<Props> = ({ </OverlayTrigger> {reactions && - emojiMap.map((emoji) => { - if (!reactions[emoji.name] || reactions[emoji.name].count === 0) { + Object.keys(reactions).map((emoji) => { + if (!reactions[emoji] || reactions[emoji]?.count <= 0) { return null; } return ( <OverlayTrigger - key={emoji.name} + key={emoji} placement="top" overlay={ <Tooltip> <div className="text-start"> - <b>{t(`reaction.${emoji.name}`)}</b> <br />{' '} - {reactions[emoji.name].tooltip} + <b>{t(`reaction.${emoji}`)}</b> <br />{' '} + {reactions[emoji].tooltip} </div> </Tooltip> }> <Button - title={emoji.name} className="rounded-pill ms-2 link-secondary d-flex align-items-center" + aria-label={ + reactions?.[emoji]?.is_active + ? t('reaction.unreact_emoji', { emoji }) + : t('reaction.react_emoji', { emoji }) + } + aria-pressed="true" variant="light" - active={reactions[emoji.name].is_active} + active={reactions[emoji].is_active} size="sm" - onClick={() => - handleSubmit({ object_id: objectId, emoji: emoji.name }) - }> - <Icon name={emoji.icon} className={emoji.className} /> - <span className="ms-1 lh-1">{reactions[emoji.name].count}</span> + onClick={() => handleSubmit({ object_id: objectId, emoji })}> + <Icon + name={String(emojiMap.find((v) => v.name === emoji)?.icon)} + className={emojiMap.find((v) => v.name === emoji)?.className} + /> + <span className="ms-1 lh-1">{reactions[emoji].count}</span> </Button> </OverlayTrigger> ); diff --git a/ui/src/pages/Questions/Detail/index.scss b/ui/src/pages/Questions/Detail/index.scss index 9bb6e1a5..bbc42bc5 100644 --- a/ui/src/pages/Questions/Detail/index.scss +++ b/ui/src/pages/Questions/Detail/index.scss @@ -27,7 +27,7 @@ background-color: var(--bs-gray-100); } - &:active { + &:active, &.active { background-color: var(--bs-gray-200); } }
