Skip to content

Card art accessibility improvements - #114

Merged
scarletcs merged 8 commits into
mainfrom
card-art-accessibility
Sep 23, 2025
Merged

scarletcs merged 8 commits into
mainfrom
card-art-accessibility

Conversation

@crookedneighbor

@crookedneighbor crookedneighbor commented May 10, 2025

Copy link
Copy Markdown
Collaborator
  • adds tests for CardArt.vue component
  • adds written text to error loading overlay to explicitly explain what's happening
  • adds a visually hidden text for pending overlay to tell screenreaders what's happening
Screenshot 2025-05-10 at 10 47 59 AM

type_line: "<type line>",
set: "<set code>",
image_uris: makeImageUris(),
image_uris: makeImageUris(overrides.name),

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

this is so that the image uri does change for the computed property, so the watch on the imageUri does trigger.

display: flex;
align-items: center;
justify-content: center;
text-align: center;

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

both the style changes here are to make the text and x in error overlay be centered.

:src="imageUri"
:onload="onLoad"
:onerror="onError"
data-testid="card-art-preload"

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

needed to add a data-testid here to target it in the test to trigger the load and error events.

Comment thread src/components/CardArt.vue Outdated
<div class="shape-x"></div>
<div>
<div class="shape-x"></div>
<p>There was an error loading the card art.</p>

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Thoughts on the wording here?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

this can also occur if we get a server error from the random endpoint, I think.

There was an error loading the next card. You should skip this one.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Screenshot 2025-05-10 at 2 54 13 PM Screenshot 2025-05-10 at 2 53 57 PM Screenshot 2025-05-10 at 2 53 30 PM

Comment thread src/components/CardArt.vue Outdated
Comment thread src/components/CardArt.vue Outdated
Comment thread src/components/CardArt.vue Outdated
@scarletcs
scarletcs merged commit fb7f7a0 into main Sep 23, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants