Skip to content

Commit 508e148

Browse files
chazdeankyledurand
andauthored
[Layout Foundation][Box] Add support for passing in role attribute (#7799)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Supports #7797 which needs access to role attribute <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Adds role attribute support to `Box` <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> Co-authored-by: Kyle Durand <[email protected]>
1 parent 41db33b commit 508e148

File tree

3 files changed

+709
-691
lines changed

3 files changed

+709
-691
lines changed

.changeset/hip-grapes-build.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': minor
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Updated `Box` to accept role attribute

polaris-react/src/components/Box/Box.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,8 @@ export interface BoxProps extends React.AriaAttributes {
150150
* paddingInlineEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
151151
*/
152152
paddingInlineEnd?: Spacing;
153+
/** Aria role */
154+
role?: Extract<React.AriaRole, 'status'>;
153155
/** Shadow on box */
154156
shadow?: DepthShadowAlias;
155157
/** Width of container */
@@ -206,6 +208,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
206208
paddingBlockEnd,
207209
paddingInlineStart,
208210
paddingInlineEnd,
211+
role,
209212
shadow,
210213
width,
211214
visuallyHidden,
@@ -327,6 +330,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
327330
id,
328331
ref,
329332
style: sanitizeCustomProperties(style),
333+
role,
330334
...restProps,
331335
},
332336
children,

0 commit comments

Comments
 (0)