Skip to content

Commit 2053da0

Browse files
katiekleinkatiegoineshbuchel
authored
a11y- Callouts should use descriptive text for icons (#7882)
* add alt-text for info icon * updatesnapshot * address pr comments * updated snapshot for protected message * updated with warning icon * update snapshot * Update src/components/Callout/Callout.tsx Co-authored-by: Heather Buchel <[email protected]> * Update src/components/Callout/Callout.tsx Co-authored-by: Heather Buchel <[email protected]> * Update src/components/Callout/Callout.tsx Co-authored-by: Heather Buchel <[email protected]> * update snapshot --------- Co-authored-by: katiegoines <[email protected]> Co-authored-by: Heather Buchel <[email protected]>
1 parent 0ec7e62 commit 2053da0

File tree

5 files changed

+149
-113
lines changed

5 files changed

+149
-113
lines changed

‎src/components/Callout/Callout.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Message, View } from '@aws-amplify/ui-react';
1+
import { Flex, Message } from '@aws-amplify/ui-react';
2+
import { IconWarning, IconInfo } from '../Icons';
23

34
interface CalloutProps {
45
info?: boolean;
@@ -17,8 +18,18 @@ export const Callout = ({
1718
variation="filled"
1819
colorTheme={warning ? 'warning' : 'info'}
1920
backgroundColor={backgroundColor}
21+
hasIcon={false}
2022
>
21-
<View>{children}</View>
23+
<Flex>
24+
<div className="amplify-message__icon">
25+
{warning ? (
26+
<IconWarning aria-hidden={false} aria-label="Warning" />
27+
) : (
28+
<IconInfo aria-hidden={false} aria-label="Important information" />
29+
)}
30+
</div>
31+
<div className="amplify-message__content">{children}</div>
32+
</Flex>
2233
</Message>
2334
);
2435
};

‎src/components/Callout/__tests__/Callout.test.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Callout', () => {
2929
);
3030

3131
const styles = getComputedStyle(ele.container.children[0]);
32-
console.log(styles);
3332
expect(styles.backgroundColor).toBe('red');
3433
});
3534
});

‎src/components/Icons/IconWarning.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Icon } from '@aws-amplify/ui-react';
2+
3+
export const IconWarning = ({ ...rest }) => {
4+
return (
5+
<Icon
6+
aria-hidden="true"
7+
{...rest}
8+
viewBox={{
9+
minX: 0,
10+
minY: 0,
11+
width: 24,
12+
height: 24
13+
}}
14+
>
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
19+
fill="currentColor"
20+
/>
21+
</Icon>
22+
);
23+
};

‎src/components/Icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,4 @@ export { IconThumbsDown } from './IconThumbsDown';
3434
export { IconPencil } from './IconPencil';
3535
export { IconX } from './IconX';
3636
export { IconTSBoxed } from './IconTSBoxed';
37+
export { IconWarning } from './IconWarning';

‎src/protected/ProtectedRedactionMessage/__tests__/__snapshots__/ProtectedRedactionMessage.test.tsx.snap‎

Lines changed: 112 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,79 @@ exports[`Protected Redaction Messages should render the protected redaction mess
55
class="amplify-flex amplify-message amplify-message--filled amplify-message--warning"
66
>
77
<div
8-
aria-hidden="true"
9-
class="amplify-message__icon"
8+
class="amplify-flex amplify-message__content"
109
>
11-
<span
12-
class="amplify-icon"
13-
style="width: 1em; height: 1em;"
10+
<div
11+
class="amplify-flex"
1412
>
15-
<svg
16-
fill="none"
17-
height="24"
18-
viewBox="0 0 24 24"
19-
width="24"
20-
xmlns="http://www.w3.org/2000/svg"
13+
<div
14+
class="amplify-message__icon"
2115
>
22-
<path
23-
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
24-
fill="currentColor"
25-
/>
26-
</svg>
27-
</span>
28-
</div>
29-
<div
30-
class="amplify-flex amplify-message__content"
31-
>
32-
<div>
33-
<p>
34-
With versions of Amplify CLI
35-
<code>
36-
@aws-amplify/[email protected]
37-
</code>
38-
and API Category
39-
<code>
40-
@aws-amplify/[email protected]
41-
</code>
42-
, an improvement was made to how relational field data is handled in subscriptions when different authorization rules apply to related models in a schema. The improvement redacts the values for the relational fields, displaying them as null or empty, to prevent unauthorized access to relational data. This redaction occurs whenever it cannot be determined that the child model will be protected by the same permissions as the parent model.
43-
</p>
44-
<p>
45-
Because subscriptions are tied to mutations and the selection set provided in the result of a mutation is then passed through to the subscription, relational fields in the result of mutations must be redacted.
46-
</p>
47-
<p>
48-
If an authorized end-user needs access to the redacted relational field they should perform a query to read the relational data.
49-
</p>
50-
<p>
51-
Additionally, subscriptions will inherit related authorization when relational fields are set as required. To better protect relational data, consider modifying the schema to use optional relational fields.
52-
</p>
53-
<p>
54-
Based on the security posture of your application, you can choose to revert to the subscription behavior before this improvement was made.
55-
</p>
56-
<p>
57-
To do so, use the
58-
<code>
59-
subscriptionsInheritPrimaryAuth
60-
</code>
61-
feature flag under
62-
<code>
63-
graphqltransformer
64-
</code>
65-
in the
66-
67-
<code>
68-
amplify/backend/cli.json
69-
</code>
70-
file.
71-
</p>
72-
<ul>
73-
<li>
74-
If enabled, subscriptions will inherit the primary model authorization rules for the relational fields.
75-
</li>
76-
<li>
77-
If disabled, relational fields will be redacted in mutation response when there is a difference between auth rules between primary and related models.
78-
</li>
79-
</ul>
16+
<svg
17+
aria-hidden="false"
18+
aria-label="Warning"
19+
class="amplify-icon"
20+
viewBox="0 0 24 24"
21+
>
22+
<path
23+
clip-rule="evenodd"
24+
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
25+
fill="currentColor"
26+
fill-rule="evenodd"
27+
/>
28+
</svg>
29+
</div>
30+
<div
31+
class="amplify-message__content"
32+
>
33+
<p>
34+
With versions of Amplify CLI
35+
<code>
36+
@aws-amplify/[email protected]
37+
</code>
38+
and API Category
39+
<code>
40+
@aws-amplify/[email protected]
41+
</code>
42+
, an improvement was made to how relational field data is handled in subscriptions when different authorization rules apply to related models in a schema. The improvement redacts the values for the relational fields, displaying them as null or empty, to prevent unauthorized access to relational data. This redaction occurs whenever it cannot be determined that the child model will be protected by the same permissions as the parent model.
43+
</p>
44+
<p>
45+
Because subscriptions are tied to mutations and the selection set provided in the result of a mutation is then passed through to the subscription, relational fields in the result of mutations must be redacted.
46+
</p>
47+
<p>
48+
If an authorized end-user needs access to the redacted relational field they should perform a query to read the relational data.
49+
</p>
50+
<p>
51+
Additionally, subscriptions will inherit related authorization when relational fields are set as required. To better protect relational data, consider modifying the schema to use optional relational fields.
52+
</p>
53+
<p>
54+
Based on the security posture of your application, you can choose to revert to the subscription behavior before this improvement was made.
55+
</p>
56+
<p>
57+
To do so, use the
58+
<code>
59+
subscriptionsInheritPrimaryAuth
60+
</code>
61+
feature flag under
62+
<code>
63+
graphqltransformer
64+
</code>
65+
in the
66+
67+
<code>
68+
amplify/backend/cli.json
69+
</code>
70+
file.
71+
</p>
72+
<ul>
73+
<li>
74+
If enabled, subscriptions will inherit the primary model authorization rules for the relational fields.
75+
</li>
76+
<li>
77+
If disabled, relational fields will be redacted in mutation response when there is a difference between auth rules between primary and related models.
78+
</li>
79+
</ul>
80+
</div>
8081
</div>
8182
</div>
8283
</div>
@@ -87,50 +88,51 @@ exports[`Protected Redaction Messages should render the protected redaction mess
8788
class="amplify-flex amplify-message amplify-message--filled amplify-message--warning"
8889
>
8990
<div
90-
aria-hidden="true"
91-
class="amplify-message__icon"
91+
class="amplify-flex amplify-message__content"
9292
>
93-
<span
94-
class="amplify-icon"
95-
style="width: 1em; height: 1em;"
93+
<div
94+
class="amplify-flex"
9695
>
97-
<svg
98-
fill="none"
99-
height="24"
100-
viewBox="0 0 24 24"
101-
width="24"
102-
xmlns="http://www.w3.org/2000/svg"
96+
<div
97+
class="amplify-message__icon"
10398
>
104-
<path
105-
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
106-
fill="currentColor"
107-
/>
108-
</svg>
109-
</span>
110-
</div>
111-
<div
112-
class="amplify-flex amplify-message__content"
113-
>
114-
<div>
115-
<p>
116-
With Amplify Data Construct
117-
<code>
118-
@aws-amplify/[email protected]
119-
</code>
120-
, an improvement was made to how relational field data is handled in subscriptions when different authorization rules apply to related models in a schema. The improvement redacts the values for the relational fields, displaying them as null or empty, to prevent unauthorized access to relational data.
121-
</p>
122-
<p>
123-
This redaction occurs whenever it cannot be determined that the child model will be protected by the same permissions as the parent model.
124-
</p>
125-
<p>
126-
Because subscriptions are tied to mutations and the selection set provided in the result of a mutation is then passed through to the subscription, relational fields in the result of mutations must be redacted.
127-
</p>
128-
<p>
129-
If an authorized end-user needs access to the redacted relational fields, they should perform a query to read the relational data.
130-
</p>
131-
<p>
132-
Additionally, subscriptions will inherit related authorization when relational fields are set as required. To better protect relational data, consider modifying the schema to use optional relational fields.
133-
</p>
99+
<svg
100+
aria-hidden="false"
101+
aria-label="Warning"
102+
class="amplify-icon"
103+
viewBox="0 0 24 24"
104+
>
105+
<path
106+
clip-rule="evenodd"
107+
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
108+
fill="currentColor"
109+
fill-rule="evenodd"
110+
/>
111+
</svg>
112+
</div>
113+
<div
114+
class="amplify-message__content"
115+
>
116+
<p>
117+
With Amplify Data Construct
118+
<code>
119+
@aws-amplify/[email protected]
120+
</code>
121+
, an improvement was made to how relational field data is handled in subscriptions when different authorization rules apply to related models in a schema. The improvement redacts the values for the relational fields, displaying them as null or empty, to prevent unauthorized access to relational data.
122+
</p>
123+
<p>
124+
This redaction occurs whenever it cannot be determined that the child model will be protected by the same permissions as the parent model.
125+
</p>
126+
<p>
127+
Because subscriptions are tied to mutations and the selection set provided in the result of a mutation is then passed through to the subscription, relational fields in the result of mutations must be redacted.
128+
</p>
129+
<p>
130+
If an authorized end-user needs access to the redacted relational fields, they should perform a query to read the relational data.
131+
</p>
132+
<p>
133+
Additionally, subscriptions will inherit related authorization when relational fields are set as required. To better protect relational data, consider modifying the schema to use optional relational fields.
134+
</p>
135+
</div>
134136
</div>
135137
</div>
136138
</div>

0 commit comments

Comments
 (0)