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

feat(DeleteModal): first version #3

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

adamviktora
Copy link
Collaborator

@adamviktora adamviktora commented Sep 23, 2024

Closes #2

}
>
<TextInput
aria-label="Delete modal input"
Copy link
Contributor

Choose a reason for hiding this comment

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

Aria labels need to be configurable for internationalization purposes

Choose a reason for hiding this comment

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

I'd recommend using the text that displays above the text input as the aria-label for this text input. This text visibly functions as the text input label, and it would be better to reference the visible text, rather than require consumers to specify this text in 2 places.

You can do this by providing an id on the div that wraps this text, and an aria-labelledby attribute on the <TextInput> component that references the id value for the text.

image

But I do agree with @nicolethoen's comment above that this text needs to be configurable:

Type RedHatAwesome to confirm deletion:

{error && (
<Alert
data-testid="delete-model-error-message-alert"
title={`Error deleting ${itemToDelete}`}
Copy link
Contributor

Choose a reason for hiding this comment

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

same with titles

@jgiardino
Copy link

These examples look great! Something I'd like for us to consider as we build out components is to make sure we aren't inadvertently promoting microcopy patterns that we don't want.

For example, for the extra destructive variant includes the following message in the original content design document:

The item-name [item] and all of its resources will be deleted.

But this content pattern isn't reflected in the example.
image

We can and should reference our design/content patterns as part of these examples under the design guidelines tab, but I'd also like to consider how content patterns are reflected in the UI component examples. Consumers are likely to assume that UI component examples embody recommended patterns and will not refer to design guidelines to confirm otherwise.

One option is to use contents that are clearly placeholder text (i.e. text that describes what type of contents are recommended). Another option is to use contents that demonstrate the pattern. Or we could do a mix of both, for example:

The item-name [item] will be deleted. [Brief sentence describing consequence of action].

@nicolethoen @simrandhaliw - Do you have any preferences on this?

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.

Modals - Delete modals
4 participants