Skip to content

Commit

Permalink
[8.x] fix: [Stateful: Home page] Not accessible element, showing numb…
Browse files Browse the repository at this point in the history 
…er of active API keys, via keyboard (#197456) (#198804)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Not accessible element, showing number of
active API keys, via keyboard
(#197456)](#197456)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-04T14:47:33Z","message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via
keyboard","number":197456,"url":"https://github.com/elastic/kibana/pull/197456","mergeCommit":{"message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197456","number":197456,"mergeCommit":{"message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
  • Loading branch information
@kibanamachine @alexwizp
kibanamachine and alexwizp authored Nov 4, 2024
1 parent dda93c0 commit 094c46d
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 40 deletions.
34 changes: 14 additions & 20 deletions x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const ApiKeyPanel: React.FC = () => {
<EuiCopy textToCopy={elasticsearchEndpoint || ''} afterMessage={COPIED_LABEL}>
{(copy) => (
<EuiButtonIcon
data-test-subj="enterpriseSearchApiKeyPanelButton"
onClick={copy}
iconType="copyClipboard"
aria-label={i18n.translate(
Expand Down Expand Up @@ -113,6 +114,7 @@ export const ApiKeyPanel: React.FC = () => {
<EuiCopy textToCopy={cloudId || ''} afterMessage={COPIED_LABEL}>
{(copy) => (
<EuiButtonIcon
data-test-subj="enterpriseSearchApiKeyPanelButton"
onClick={copy}
iconType="copyClipboard"
aria-label={i18n.translate(
Expand All @@ -133,26 +135,18 @@ export const ApiKeyPanel: React.FC = () => {
<EuiSplitPanel.Inner color="subdued">
<EuiFlexGroup direction="row" alignItems="center" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.enterpriseSearch.apiKey.activeKeys"
defaultMessage="{number} active API keys."
values={{
number: (
<EuiBadge
color={apiKeys.length > 0 ? 'success' : 'warning'}
data-test-subj="api-keys-count-badge"
>
{apiKeys.length}
</EuiBadge>
),
}}
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiBadge
color={apiKeys.length > 0 ? 'success' : 'warning'}
data-test-subj="api-keys-count-badge"
>
<FormattedMessage
id="xpack.enterpriseSearch.apiKey.activeKeys"
defaultMessage="{number} active API keys."
values={{
number: apiKeys.length,
}}
/>
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<span>
Expand Down
32 changes: 12 additions & 20 deletions ...rprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,26 +102,18 @@ export const ApiKeyPanelContent: React.FC<ApiKeyPanelContent> = ({ apiKeys, open
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiText size="xs" color="subdued">
<FormattedMessage
id="xpack.enterpriseSearch.apiKey.activeKeys"
defaultMessage="{number} active API keys."
values={{
number: (
<EuiBadge
color={(apiKeys?.length || 0) > 0 ? 'success' : 'warning'}
data-test-subj="api-keys-count-badge"
>
{apiKeys?.length || 0}
</EuiBadge>
),
}}
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiBadge
color={(apiKeys?.length || 0) > 0 ? 'success' : 'warning'}
data-test-subj="api-keys-count-badge"
>
<FormattedMessage
id="xpack.enterpriseSearch.apiKey.activeKeys"
defaultMessage="{number} active API keys."
values={{
number: apiKeys?.length || 0,
}}
/>
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down

0 comments on commit 094c46d

Please sign in to comment.