Skip to content

[Enterprise Search] Fix SchemaFieldTypeSelect axe issues#100035

Merged
cee-chen merged 2 commits intoelastic:masterfrom
cee-chen:schema-type-select-axe
May 13, 2021
Merged

[Enterprise Search] Fix SchemaFieldTypeSelect axe issues#100035
cee-chen merged 2 commits intoelastic:masterfrom
cee-chen:schema-type-select-axe

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented May 13, 2021

Summary

The shared <SchemaFieldTypeSelect /> component currently used in our schema table components was registering an axe failure for each select, because it was missing a label of some kind (in this case, I simply used aria-labelledby to re-use the table column heading as a label).

Before

After

Checklist

Functionally, I didn't notice a difference while QAing in VoiceOver in FIrefox, but I think that's because the select is in a table - so the table column heading already comes before the cell content while navigating.

  • Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)

cee-chen added 2 commits May 13, 2021 07:11
- We'll specifically be using aria-labelledby in this PR, but theoretically any aria prop should be fine.
@cee-chen cee-chen added release_note:skip Skip the PR/issue when compiling release notes accessibility best practice v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels May 13, 2021
@cee-chen cee-chen requested review from a team May 13, 2021 14:12
@cee-chen
Copy link
Copy Markdown
Contributor Author

Side note: the only other use of <SchemaFieldTypeSelect /> is within the <SchemaAddFieldModal />, where it's totally fine/correct because it's wrapped in a standard EuiFormRow with a label.

@kibanamachine
Copy link
Copy Markdown
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.1MB 2.1MB +408.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Copy Markdown
Contributor

@scottybollinger scottybollinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@cee-chen
Copy link
Copy Markdown
Contributor Author

Thanks y'all!

@cee-chen cee-chen merged commit 609fed3 into elastic:master May 13, 2021
@cee-chen cee-chen deleted the schema-type-select-axe branch May 13, 2021 19:11
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 13, 2021
)

* Update SchemaFieldTypeSelect to allow passing any aria props

- We'll specifically be using aria-labelledby in this PR, but theoretically any aria prop should be fine.

* Update AS & WS schema tables to use the type table column heading as an aria-labelledby ID
@kibanamachine
Copy link
Copy Markdown
Contributor

💚 Backport successful

Status Branch Result
7.x

This backport PR will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request May 13, 2021
…100069)

* Update SchemaFieldTypeSelect to allow passing any aria props

- We'll specifically be using aria-labelledby in this PR, but theoretically any aria prop should be fine.

* Update AS & WS schema tables to use the type table column heading as an aria-labelledby ID

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
gmmorris added a commit to chrisronline/kibana that referenced this pull request May 14, 2021
* master: (27 commits)
  Disable contextMenu when event is not event.kind=event (elastic#100027)
  Updates the monorepo-packages list (elastic#100096)
  Removes circular deps for lists in tooling and bumps down byte limit for lists (elastic#100082)
  [Security Solutions] Breaks down the io-ts packages to decrease plugin size (elastic#100058)
  fix-typo: Use of `than` instead of `then` (elastic#100030)
  [Fleet] Fix error when searching for keys whose names have spaces (elastic#100056)
  [Workplace Search] Fix bug when transitioning to personal dashboard (elastic#100061)
  [index pattern field editor] Update runtime field painless docs url (elastic#100014)
  [QA] Switch tests to use importExport - visualize (elastic#98063)
  [Canvas] Remove unused legacy autocomplete component (elastic#99215)
  Re-enable formerly flaky shareable test (elastic#98826)
  [Uptime] [Synthetics Integration] ensure that proxy url is not overwritten (elastic#99944)
  [Security Solutions][Lists] Trims down list plugin size by breaking out the exception builder into chunks by using react lazy loading (elastic#99989)
  [Uptime] Increase debounce and add immediate submit to `useQueryBar` (elastic#99675)
  chore(NA): moving @kbn/docs-utils into bazel (elastic#100051)
  [Enterprise Search] Fix SchemaFieldTypeSelect axe issues (elastic#100035)
  Remove outdated comment about schema validation not working (it does work now). (elastic#100055)
  Rename alert status OK to Recovered and fix some UX issues around disabling a rule while being in an error state (elastic#98135)
  [Fleet] Do not use async method in plugin setup|start (elastic#100033)
  Skip flaky functional test suite
  ...
yctercero pushed a commit to yctercero/kibana that referenced this pull request May 25, 2021
)

* Update SchemaFieldTypeSelect to allow passing any aria props

- We'll specifically be using aria-labelledby in this PR, but theoretically any aria prop should be fine.

* Update AS & WS schema tables to use the type table column heading as an aria-labelledby ID
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility best practice auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes v7.14.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants