Skip to content

Commit

Permalink
some a11y changes and fixing style lint issues
Browse files Browse the repository at this point in the history
  • Loading branch information
laveshv committed Oct 26, 2024
1 parent d3c1998 commit 0bb9381
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 17 deletions.
32 changes: 22 additions & 10 deletions pages/bluedialog/bluedialog.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
import styles from './styles.scss';

export default function Bluedialogbox() {
const [showDialog, setShowDialog] = React.useState(true);
// Inputs
const [dateValue, setDateValue] = React.useState('');
const [amountValue, setAmountValue] = React.useState('0');
Expand All @@ -30,16 +29,22 @@ export default function Bluedialogbox() {
console.log({ dateValue, amountValue, descriptionValue, selectedService });
}
function skipDialog() {
setShowDialog(false);
console.log('skip dialog');
}

return showDialog ? (
<div className={styles['blue-dialog-box']}>
return (
<div
className={styles['blue-dialog-box']}
role={'dialog'}
aria-labelledby="dialog-box"
aria-modal="true"
tabIndex={-1}
>
<Form
header={
<div className={styles['blue-dialog-box__header']}>
<div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
<Header variant="h1">Dialog header</Header>
<Button iconName="close" variant="icon" onClick={skipDialog} />
<Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
</div>
}
>
Expand All @@ -53,10 +58,15 @@ export default function Bluedialogbox() {
'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
}
placeholder="YYYY/MM/DD"
ariaLabel="Select date of increase"
/>
</FormField>
<FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
<Input value={amountValue} onChange={({ detail }) => setAmountValue(detail.value)} />
<Input
value={amountValue}
onChange={({ detail }) => setAmountValue(detail.value)}
ariaLabel="Enter increase amount in USD"
/>
</FormField>

<ExpandableSection
Expand All @@ -66,6 +76,7 @@ export default function Bluedialogbox() {
Provide more details to enhance troubleshooting
</Box>
}
aria-expanded={true}
>
<SpaceBetween size={'l'}>
<FormField label="Which service is this related to ? - optional">
Expand All @@ -78,6 +89,7 @@ export default function Bluedialogbox() {
{ label: 'Route 53', value: 'Route 53' },
{ label: 'S3', value: 'S3' },
]}
ariaLabel="Select related service"
/>
</FormField>
<FormField label="Describe the issue in few words. - optional">
Expand All @@ -88,11 +100,11 @@ export default function Bluedialogbox() {
</SpaceBetween>
</div>
<div className={styles['blue-dialog-box__footer']}>
<Button onClick={submitData}>Submit</Button>
<Button onClick={submitData} ariaLabel="Submit form">
Submit
</Button>
</div>
</Form>
</div>
) : (
<></>
);
}
23 changes: 16 additions & 7 deletions pages/bluedialog/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,35 @@
*/
@use '~design-tokens' as awsui;


.blue-dialog-box {
margin: 20px;
border: 1px solid awsui.$color-border-status-info;
margin-block: 20px;
margin-inline: 20px;
border-block: 1px solid awsui.$color-border-status-info;
border-inline: 1px solid awsui.$color-border-status-info;
background-color: awsui.$color-background-status-info;
border-radius: 16px;
border-start-start-radius: 16px;
border-start-end-radius: 16px;
border-end-start-radius: 16px;
border-end-end-radius: 16px;
}
.blue-dialog-box__header {
display: flex;
justify-content: space-between;
padding: 10px 20px 0 20px;
padding-block-start: 10px;
padding-block-end: 0;
padding-inline: 20px;
}

.blue-dialog-box__content {
padding: 0 20px 20px 20px;
padding-block-start: 0;
padding-block-end: 20px;
padding-inline: 20px;
}

.blue-dialog-box__footer {
border-block-start: 1px solid awsui.$color-border-divider-default;
padding: 10px;
padding-block: 10px;
padding-inline: 10px;
display: flex;
flex-direction: row-reverse;
gap: 20px;
Expand Down

0 comments on commit 0bb9381

Please sign in to comment.