Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [Stateful: Home page] Not accessible element, showing number of active API keys, via keyboard #197456

Merged
merged 6 commits into from
Nov 4, 2024

Conversation

alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Oct 23, 2024

Closes: #195209

This PR is based on the following comment:

@cee-chen / @bhavyarm, could you please validate this issue? I'm not sure if the badge should be keyboard accessible. On the other hand, I think it might make sense to move active API keys inside the badge. However, this is more of a design question rather than an a11y one.

Originally posted by @alexwizp in #195209

This PR move text inside badge to address a11y concerns.

Screen:

image

@alexwizp
Copy link
Contributor Author

/ci

@alexwizp alexwizp marked this pull request as ready for review October 23, 2024 14:55
@alexwizp alexwizp requested a review from a team as a code owner October 23, 2024 14:55
@alexwizp alexwizp added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Project:Accessibility labels Oct 23, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@cee-chen
Copy link
Contributor

Rather than changing the design, could you add a aria-label wrapper around the entire text to smooth over the screen reader experience? You're more likely to get a faster approval that way (rather than having to get a designer to OK this change).

@alexwizp
Copy link
Contributor Author

@elastic/search-kibana please have a look. It looks like we have 2 options, which one do you like more?

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
enterpriseSearch 2.6MB 2.6MB -162.0B

History

@alexwizp alexwizp merged commit 0a1ec8f into elastic:main Nov 4, 2024
23 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11666608805

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 4, 2024
…active API keys, via keyboard (elastic#197456)

Closes: elastic#195209

This PR is based on the following comment:

> @cee-chen / @bhavyarm, could you please validate this issue? I'm not
sure if the badge should be keyboard accessible. On the other hand, I
think it might make sense to move active API keys inside the badge.
However, this is more of a design question rather than an a11y one.

_Originally posted by @alexwizp in
[elastic#195209](elastic#195209 (comment)

This PR move text inside badge to address a11y concerns.

## Screen:

<img width="734" alt="image"
src="https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb">

(cherry picked from commit 0a1ec8f)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Nov 4, 2024
…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]>
alexwizp added a commit that referenced this pull request Nov 6, 2024
…I keys.` text. (#199096)

This PR fixes a small typo in
#197456. No need to add `.` for
text placed in `EuiBadge`

## Screen
<img width="461" alt="image"
src="https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd">
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 6, 2024
…I keys.` text. (elastic#199096)

This PR fixes a small typo in
elastic#197456. No need to add `.` for
text placed in `EuiBadge`

## Screen
<img width="461" alt="image"
src="https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd">

(cherry picked from commit 1b9079f)
kibanamachine added a commit that referenced this pull request Nov 6, 2024
…60;{number} active API keys.&#x60; text. (#199096) (#199179)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search: Home page] Remove the extra &#x60;.&#x60; from the
&#x60;{number} active API keys.&#x60; text.
(#199096)](#199096)

<!--- 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-06T16:38:42Z","message":"[Search:
Home page] Remove the extra `.` from the `{number} active API keys.`
text. (#199096)\n\nThis PR fixes a small typo
in\r\nhttps://github.com//pull/197456. No need to add `.`
for\r\ntext placed in `EuiBadge`\r\n\r\n## Screen\r\n<img width=\"461\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd\">","sha":"1b9079f16416cb0e18eb05ef9939520f7a80f767","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","backport:prev-minor"],"title":"[Search:
Home page] Remove the extra `.` from the `{number} active API keys.`
text.","number":199096,"url":"https://github.com/elastic/kibana/pull/199096","mergeCommit":{"message":"[Search:
Home page] Remove the extra `.` from the `{number} active API keys.`
text. (#199096)\n\nThis PR fixes a small typo
in\r\nhttps://github.com//pull/197456. No need to add `.`
for\r\ntext placed in `EuiBadge`\r\n\r\n## Screen\r\n<img width=\"461\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd\">","sha":"1b9079f16416cb0e18eb05ef9939520f7a80f767"}},"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/199096","number":199096,"mergeCommit":{"message":"[Search:
Home page] Remove the extra `.` from the `{number} active API keys.`
text. (#199096)\n\nThis PR fixes a small typo
in\r\nhttps://github.com//pull/197456. No need to add `.`
for\r\ntext placed in `EuiBadge`\r\n\r\n## Screen\r\n<img width=\"461\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd\">","sha":"1b9079f16416cb0e18eb05ef9939520f7a80f767"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
mgadewoll pushed a commit to mgadewoll/kibana that referenced this pull request Nov 7, 2024
…I keys.` text. (elastic#199096)

This PR fixes a small typo in
elastic#197456. No need to add `.` for
text placed in `EuiBadge`

## Screen
<img width="461" alt="image"
src="https://github.com/user-attachments/assets/40ea17b2-c735-438a-b00e-9e0f0503d5cd">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Project:Accessibility release_note:skip Skip the PR/issue when compiling release notes Team:Search v8.17.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Stateful: Home page] Not accessible element, showing number of active API keys, via keyboard
5 participants