Skip to content

Commit

Permalink
modal: improve aws help text aria labels
Browse files Browse the repository at this point in the history 
Aria labels are now of the format "[field label] help". They are also
now translated.
  • Loading branch information
@jkozol @jgiardino
jkozol authored and jgiardino committed May 6, 2020
1 parent 2cef8e5 commit 231b5b6
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 28 deletions.
83 changes: 62 additions & 21 deletions components/Modal/CreateImageUpload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,45 @@ const messages = defineMessages({
}
});

const ariaLabels = defineMessages({
uploadImage: {
id: "upload-image-help",
defaultMessage: "Upload image help"
},
processLength: {
id: "provess-length-help",
defaultMessage: "Process length help"
},
imageSize: {
id: "image-size-help",
defaultMessage: "Image size help"
},
accessKeyID: {
id: "access-key-id-help",
defaultMessage: "Access key ID help"
},
secretAccessKey: {
id: "secret-access-key-help",
defaultMessage: "Secret access key help"
},
imageName: {
id: "image-name-help",
defaultMessage: "Image name help"
},
bucket: {
id: "bucket-help",
defaultMessage: "S3 Bucket help"
},
region: {
id: "region-help",
defaultMessage: "AWS region help"
},
aws: {
id: "aws-help",
defaultMessage: "AWS help"
}
});

class CreateImageUpload extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -380,9 +419,9 @@ class CreateImageUploadModal extends React.Component {
</p>
</TextContent>
}
aria-label="Upload image help"
aria-label={formatMessage(ariaLabels.uploadImage)}
>
<Button variant="plain" aria-label="Upload image help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.uploadImage)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand All @@ -397,7 +436,6 @@ class CreateImageUploadModal extends React.Component {
defaultMessage: `Upload to AWS`
})}
id="aws-checkbox"
aria-labelledby="provider-checkbox"
/>
</div>
</div>
Expand Down Expand Up @@ -453,9 +491,9 @@ class CreateImageUploadModal extends React.Component {
<Popover
id="blueprint-name-popover"
bodyContent={formatMessage(messages.infotip)}
aria-label="process length help"
aria-label={formatMessage(ariaLabels.processLength)}
>
<Button variant="plain" aria-label="process length help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.processLength)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -484,9 +522,9 @@ class CreateImageUploadModal extends React.Component {
<Popover
id="size-popover"
bodyContent={formatMessage(messages.imageSizePopover)}
aria-label="image size help"
aria-label={formatMessage(ariaLabels.imageSize)}
>
<Button variant="plain" aria-label="image size help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.imageSize)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -564,9 +602,9 @@ class CreateImageUploadModal extends React.Component {
}}
/>
}
aria-label="access key id help"
aria-label={formatMessage(ariaLabels.accessKeyID)}
>
<Button variant="plain" aria-label="access key id help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.accessKeyID)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -600,9 +638,9 @@ class CreateImageUploadModal extends React.Component {
}}
/>
}
aria-label="secret access key help"
aria-label={formatMessage(ariaLabels.secretAccessKey)}
>
<Button variant="plain" aria-label="secret access key help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.secretAccessKey)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -646,9 +684,9 @@ class CreateImageUploadModal extends React.Component {
<FormattedMessage defaultMessage="Provide a file name to be used for the image file that will be uploaded." />
</React.Fragment>
}
aria-label="image name help"
aria-label={formatMessage(ariaLabels.imageName)}
>
<Button variant="plain" aria-label="image name help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.imageName)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -688,9 +726,9 @@ class CreateImageUploadModal extends React.Component {
/>
</React.Fragment>
}
aria-label="bucket help"
aria-label={formatMessage(ariaLabels.bucket)}
>
<Button variant="plain" aria-label="bucket help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.bucket)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -724,9 +762,9 @@ class CreateImageUploadModal extends React.Component {
}}
/>
}
aria-label="region help"
aria-label={formatMessage(ariaLabels.region)}
>
<Button variant="plain" aria-label="region help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.region)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -789,9 +827,9 @@ class CreateImageUploadModal extends React.Component {
</p>
</TextContent>
}
aria-label="aws help"
aria-label={formatMessage(ariaLabels.aws)}
>
<Button variant="plain" aria-label="aws help">
<Button variant="plain" aria-label={formatMessage(ariaLabels.aws)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down Expand Up @@ -965,8 +1003,11 @@ class CreateImageUploadModal extends React.Component {
<TextContent>
<Title className="cc-c-popover__horizontal-group" headingLevel="h3" size="2xl">
<FormattedMessage defaultMessage="Create and upload image" />
<Popover bodyContent={formatMessage(messages.infotip)} aria-label="process length help">
<Button variant="plain" aria-label="process length help">
<Popover
bodyContent={formatMessage(messages.infotip)}
aria-label={formatMessage(ariaLabels.processLength)}
>
<Button variant="plain" aria-label={formatMessage(ariaLabels.processLength)}>
<OutlinedQuestionCircleIcon id="popover-icon" />
</Button>
</Popover>
Expand Down
14 changes: 7 additions & 7 deletions test/verify/check-image
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,22 @@ class TestImage(composerlib.ComposerCase):
# create image wizard (no upload support)
b.click("li[data-blueprint=httpd-server] #create-image-button")
b.wait_text("#create-image-upload-wizard #blueprint-name", "httpd-server")
# check ? (process length help) button
b.click("button[aria-label='process length help']")
b.wait_attr("button[aria-label='process length help']", "aria-expanded", "true")
# check ? (Process length help) button
b.click("button[aria-label='Process length help']")
b.wait_attr("button[aria-label='Process length help']", "aria-expanded", "true")
b.wait_text(".pf-c-popover__body", "This process can take a while. "
"Images are built in the order they are started.")
b.click(".pf-c-popover__content button")
b.wait_attr("button[aria-label='process length help']", "aria-expanded", "false")
b.wait_attr("button[aria-label='Process length help']", "aria-expanded", "false")
# check ? (image size help) button
b.click("button[aria-label='image size help']")
b.wait_attr("button[aria-label='image size help']", "aria-expanded", "true")
b.click("button[aria-label='Image size help']")
b.wait_attr("button[aria-label='Image size help']", "aria-expanded", "true")
b.wait_text(".pf-c-popover__body",
"Set the size that you want the image to be when instantiated. The total "
"package size and target destination of your image should be considered when "
"setting the image size.")
b.click(".pf-c-popover__content button")
b.wait_attr("button[aria-label='image size help']", "aria-expanded", "false")
b.wait_attr("button[aria-label='Image size help']", "aria-expanded", "false")
# check non upload image action (Create only)
# group actions for select from dropdown menu
b.wait_visible("#image-type")
Expand Down

0 comments on commit 231b5b6

Please sign in to comment.