ByRole doesn't find SVG's graphics-document role #1131
Comments
|
This will land when A11yance/aria-query#181 is resolved. |
|
It looks like the update to aria-query did not resolve this. Here is an updated version of the sandbox above: https://codesandbox.io/s/react-testing-library-demo-forked-221xzs?file=/src/__tests__/hello.js |
it-vegard
added a commit
to navikt/aksel
that referenced
this issue
Jan 17, 2024
…st search for it by the accessible name.
Should have been able to use findByRole("graphics-document", { name: "Søker..." }), but that is currently broken:
testing-library/dom-testing-library#1131
it-vegard
added a commit
to navikt/aksel
that referenced
this issue
Jan 26, 2024
) * yarn lock * setting up maxSelectedOptions * added correct margin * Update tsconfig.build.json * Make border of "max selected"-item in FilteredOptions overlap the list border * Hide "add new value"-button if "max selected"-limit is reached * Make MaxSelected example a bit more interactive * wip styling max-selected option * Disable filteredOptions that are not selected when maxSelectedOptions is reached * Fix scrolling/clipping content in FilteredOptions * Remove hover-effects from non-selectable options * add prop so user can customize message shown when max num of choices reached * Operate directly on the DOM nodes when moving virtual focus, instead of relying on index state. The index state became stale/non-synced when replacing elements in the list. * make maxSelectedMessage static * Remove max-selected:hover Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> * yarn lock update * 'cursor: not allowed' only hits disabled options * remove li-margins, add ul-gap with negative margin on max-selected-option * remove 'a' from initialstate maxSelectedOptions Story * Update @navikt/core/css/form/combobox.css * Update @navikt/core/css/form/combobox.css * Update @navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx * Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts * Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts * Update @navikt/core/react/src/form/combobox/combobox.stories.tsx * type assertion * remove tab-index on wrapper div * prototype for sticky non-selectable options * "yarn lock" * Fix feil med at focus-indikator for input-feltet ikke ble vist * Forenkle og fikse "scroll til element" i FilteredOptions * Sørg for at disabled FilteredOptions ikke vises under "max antall"-meldingen * Focused option should not be covered by "max selected" message * yarn lock * Fix "scrollIntoView is not a function" error. Possibly needs to be checked for when it occurs, but I haven't figured it out yet * Loading indicator is no longer exposed as an option, so we have to just search for it by the accessible name. Should have been able to use findByRole("graphics-document", { name: "Søker..." }), but that is currently broken: testing-library/dom-testing-library#1131 * Aria-selected should not be placed on elements that are no longer role="option" * Combine all "max selected options"-related props in one object * Proper BEM syntax should use -- instead of __ for state-like classes, like --loading, --max-selected and --new-option * Always show selected options in FilteredOptions, even if they don't match the search text * Only to the getElementsAbleToReceiveFocus() call once per function, to reduce DOM lookups. Also changed isFocusOnThe[Top | Bottom] to functions, because it was needed for isFocusOnTheBottom to follow the same rule (and not store the value on the top level in the hook. * Pressing "End" should not only move focus to the end of the list, but also open the list if it is closed. To mirror this, we close the list if moving focus back to the Input with "Home". * Legg til Aksel-eksempel * yarn changeset * Update @navikt/core/css/form/combobox.css * change 'maxSelectedOptions' prop to 'maxSelected' * Mark disabled options with aria-disabled * Add max selected text to aria-describedby, so it is announced when the user enters the input field * Add role="status" to the wrapper for "no hits", "loading" and "max selected" info messages, so they are announced when they appear * Remove aria-selected (again) * fix: form error not showing correctly * fix: rm left hover-border on add-new-option item * Bare åpne listen som default, men la intern logikk styre etter første render * Sticky trenger ikke ligger på hver enkelt av disse, da parent wrapperen også er sticky * Combobox eksempler var ikke tilgjengelig i `yarn storybook:aksel` på grunn av manglende Demo-eksport * Fjern ubrukt klasse som er i konflikt med navds-combobox__wrapper * Trengs ikke etter at max selected ble flyttet ut av listen * Denne koden gjør ingenting * Trenger ikke bruke :not, fordi vi tok vekk data-no-focus i en commit tidligere i dag * Bruk dynamiske selectedOptions for å kunne endre de * Update @navikt/core/css/form/combobox.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update aksel.nav.no/website/pages/eksempler/combobox/with-max-selected-limit.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/css/form/combobox.css * Do not render an empty ul for FilteredOptions, as it add a gap at the bottom of the container * Do not render an empty non-selectables container, as it adds a gap at the top of the container * Non-selectables should not have navds-combobox__list-item class, as it introduces a few issues with hovering, etc. * Copy-pasted in an extra class that broke styling for max selected --------- Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
|
its May 1st 2024 and I am still seeing the same issue, was this ever resolved or did anyone find another way? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@testing-library/domversion: 8.13.0Relevant code or config:
What you did:
I have an SVG element in the page which I'm trying to select by its role.
What happened:
In the W3 role documentation linked from the ByRole docs, it lists the implicit role for an SVG tag as
graphics-document. This value isn't included in the TypeScript definitions, but more importantly it isn't supported at runtime either.Reproduction:
https://codesandbox.io/s/react-testing-library-demo-forked-rd79zt?file=/src/__tests__/hello.js
Problem description:
The only way to query for an SVG is via querySelector which goes against the recommendations of the library.
Suggested solution:
Support the aria-role as a selector as the documentation would suggest is possible.
The text was updated successfully, but these errors were encountered: