[Layout] Add suport for passing in aria attributes #7767

aveline · 2022-11-18T18:26:25Z

WHY are these changes introduced?

Supports #7354 which needs to be able to pass in aria attributes

WHAT is this pull request doing?

~~adds a utility getAriaAttributes which filters props for aria attributes~~
adds support for aria attributes to Box and AlphaStack

Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>

github-actions · 2022-11-18T18:30:44Z

size-limit report 📦

Path	Size
polaris-react-cjs	210.64 KB (+0.01% 🔺)
polaris-react-esm	136.01 KB (+0.02% 🔺)
polaris-react-esnext	191.51 KB (+0.01% 🔺)
polaris-react-css	41.8 KB (0%)

kyledurand

Do we really need getAriaAttributes? I'd prefer just passing ...rest because it's already type checked. People could break out of that with type casting but we shouldn't care about that IMO

kyledurand · 2022-11-18T18:30:57Z

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

@@ -16,7 +17,7 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';

 type Gap = ResponsiveProp<SpacingSpaceScale>;

-export interface AlphaStackProps {
+export interface AlphaStackProps extends React.AriaAttributes {


kyledurand · 2022-11-18T18:33:27Z

polaris-react/src/utilities/get-aria-attributes.ts

+export function getAriaAttributes<T extends React.AriaAttributes>(props: T) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([prop]) => prop.startsWith('aria-')),
+  );


Wouldn't all of these start with aria if they're matching the type? I feel like we could just pass in ...rest and skip this function. Could get expensive considering how often Box / Inline will get used

Totally 👍 However, that does open the flood gates:

<Box // @ts-ignore -- I have a special use case that requires overriding Polaris styles className="overrides" />

Was thinking about this as well. Why would the consumer even use Box in that case and not just a div?

We are talking about allowing this across all our layout components though, so that could be used on Columns or Card and then things can start getting unpredictable.

If a team needs to do this then it means there's a gap in our system and we might want to address it.

There will always be people breaking out of the system but I'm not concerned about them using this ts ignore 'weakness' as the way they'd do that.

We'll be thinking more about escape hatches in the new year and we should think about these things at that time, not now.

kyledurand · 2022-11-18T18:50:21Z

IMO we should also allow this across the board on all of our layout components

aveline · 2022-11-18T19:34:01Z

@kyledurand agreed, just wanted to get some discussion going on the approach first.

laurkim

💯

@SereneChen-7

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@6.6.0 ### Minor Changes - [#7456](#7456) [`3bc63f7f9`](3bc63f7) Thanks [@SereneChen-7](https://github.com/SereneChen-7)! - Add attribution model icons - [#7724](#7724) [`d748c20ef`](d748c20) Thanks [@jaychashop](https://github.com/jaychashop)! - Added passkey major and minor icons - [#7686](#7686) [`6b989379e`](6b98937) Thanks [@matyikriszta](https://github.com/matyikriszta)! - Update FormMajor icon ## @shopify/polaris@10.13.0 ### Minor Changes - [#7803](#7803) [`23665dfd2`](23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [#7799](#7799) [`508e148f1`](508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [#7746](#7746) [`757aeebe3`](757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [#7775](#7775) [`300b6d4bc`](300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [#7788](#7788) [`0eb43a9fd`](0eb43a9) Thanks [@laurkim](https://github.com/laurkim)! - Added storybook example for `AlphaCard` with subdued section - [#7794](#7794) [`d43e3bc88`](d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [#7790](#7790) [`dc4540ca7`](dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [#7767](#7767) [`cb24dbb9e`](cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [#7697](#7697) [`b7b729235`](b7b7292) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive padding to `Box` - [#7754](#7754) [`aee0c5c4c`](aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` - [#7619](#7619) [`15570cc15`](15570cc) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Added `truncateText` prop to `Navigation.Item` to prevent text wrapping - [#7806](#7806) [`5f3b61d0a`](5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` ### Patch Changes - [#7768](#7768) [`4cb1c6a8b`](4cb1c6a) Thanks [@laurkim](https://github.com/laurkim)! - Renamed storybook example names for consistency - [#7808](#7808) [`ed3444d77`](ed3444d) Thanks [@laurkim](https://github.com/laurkim)! - Temporarily removed console warnings for deprecated typography components - [#7755](#7755) [`1e5a2b665`](1e5a2b6) Thanks [@kyledurand](https://github.com/kyledurand)! - Added position, opacity, top, left, right, bottom, z-index to `Box` - [#7761](#7761) [`81f379315`](81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [#7777](#7777) [`cb882f460`](cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [#7757](#7757) [`f9e1985c9`](f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [#7764](#7764) [`9ab44a69f`](9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [#7769](#7769) [`a9e018ec4`](a9e018e) Thanks [@nabihaalikhan](https://github.com/nabihaalikhan)! - Updated badge spacing to right align with secondary action icons - [#7748](#7748) [`ed3da747e`](ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [#7732](#7732) [`d08e1c30c`](d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [#7779](#7779) [`7c0a4b6a9`](7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [#7793](#7793) [`824aef031`](824aef0) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Extends Navigation Item highlight to full width to cover secondary actions - Updated dependencies \[[`3bc63f7f9`](3bc63f7), [`d748c20ef`](d748c20), [`6b989379e`](6b98937)]: - @shopify/polaris-icons@6.6.0 ## @shopify/plugin-polaris@0.0.18 ### Patch Changes - Updated dependencies \[[`28220456f`](2822045)]: - @shopify/polaris-migrator@0.9.1 ## @shopify/polaris-migrator@0.9.1 ### Patch Changes - [#7744](#7744) [`28220456f`](2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` ## polaris.shopify.com@0.26.0 ### Minor Changes - [#7746](#7746) [`757aeebe3`](757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [#7775](#7775) [`300b6d4bc`](300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [#7790](#7790) [`dc4540ca7`](dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [#7754](#7754) [`aee0c5c4c`](aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` ### Patch Changes - [#7745](#7745) [`70ed3137b`](70ed313) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box` - [#7803](#7803) [`23665dfd2`](23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [#7799](#7799) [`508e148f1`](508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [#7761](#7761) [`81f379315`](81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [#7777](#7777) [`cb882f460`](cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [#7747](#7747) [`0ec96f068`](0ec96f0) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed bleed examples - [#7794](#7794) [`d43e3bc88`](d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [#7757](#7757) [`f9e1985c9`](f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [#7764](#7764) [`9ab44a69f`](9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [#7767](#7767) [`cb24dbb9e`](cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [#7778](#7778) [`e0c64cd5b`](e0c64cd) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links - [#7748](#7748) [`ed3da747e`](ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [#7744](#7744) [`28220456f`](2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` - [#7732](#7732) [`d08e1c30c`](d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [#7779](#7779) [`7c0a4b6a9`](7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [#7806](#7806) [`5f3b61d0a`](5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` - Updated dependencies \[[`3bc63f7f9`](3bc63f7), [`4cb1c6a8b`](4cb1c6a), [`d748c20ef`](d748c20), [`6b989379e`](6b98937), [`ed3444d77`](ed3444d), [`1e5a2b665`](1e5a2b6), [`23665dfd2`](23665df), [`508e148f1`](508e148), [`757aeebe3`](757aeeb), [`300b6d4bc`](300b6d4), [`0eb43a9fd`](0eb43a9), [`81f379315`](81f3793), [`cb882f460`](cb882f4), [`d43e3bc88`](d43e3bc), [`f9e1985c9`](f9e1985), [`dc4540ca7`](dc4540c), [`9ab44a69f`](9ab44a6), [`cb24dbb9e`](cb24dbb), [`b7b729235`](b7b7292), [`aee0c5c4c`](aee0c5c), [`a9e018ec4`](a9e018e), [`ed3da747e`](ed3da74), [`15570cc15`](15570cc), [`d08e1c30c`](d08e1c3), [`7c0a4b6a9`](7c0a4b6), [`5f3b61d0a`](5f3b61d), [`824aef031`](824aef0)]: - @shopify/polaris-icons@6.6.0 - @shopify/polaris@10.13.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Follow up on #7767 (comment)

### WHY are these changes introduced? Supports Shopify#7354 which needs to be able to pass in aria attributes ### WHAT is this pull request doing? - adds support for aria attributes to `Box` and `AlphaStack` Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>

@SereneChen-7

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@6.6.0 ### Minor Changes - [Shopify#7456](Shopify#7456) [`3bc63f7f9`](Shopify@3bc63f7) Thanks [@SereneChen-7](https://github.com/SereneChen-7)! - Add attribution model icons - [Shopify#7724](Shopify#7724) [`d748c20ef`](Shopify@d748c20) Thanks [@jaychashop](https://github.com/jaychashop)! - Added passkey major and minor icons - [Shopify#7686](Shopify#7686) [`6b989379e`](Shopify@6b98937) Thanks [@matyikriszta](https://github.com/matyikriszta)! - Update FormMajor icon ## @shopify/polaris@10.13.0 ### Minor Changes - [Shopify#7803](Shopify#7803) [`23665dfd2`](Shopify@23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [Shopify#7799](Shopify#7799) [`508e148f1`](Shopify@508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [Shopify#7746](Shopify#7746) [`757aeebe3`](Shopify@757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [Shopify#7775](Shopify#7775) [`300b6d4bc`](Shopify@300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [Shopify#7788](Shopify#7788) [`0eb43a9fd`](Shopify@0eb43a9) Thanks [@laurkim](https://github.com/laurkim)! - Added storybook example for `AlphaCard` with subdued section - [Shopify#7794](Shopify#7794) [`d43e3bc88`](Shopify@d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [Shopify#7790](Shopify#7790) [`dc4540ca7`](Shopify@dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [Shopify#7767](Shopify#7767) [`cb24dbb9e`](Shopify@cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [Shopify#7697](Shopify#7697) [`b7b729235`](Shopify@b7b7292) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive padding to `Box` - [Shopify#7754](Shopify#7754) [`aee0c5c4c`](Shopify@aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` - [Shopify#7619](Shopify#7619) [`15570cc15`](Shopify@15570cc) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Added `truncateText` prop to `Navigation.Item` to prevent text wrapping - [Shopify#7806](Shopify#7806) [`5f3b61d0a`](Shopify@5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` ### Patch Changes - [Shopify#7768](Shopify#7768) [`4cb1c6a8b`](Shopify@4cb1c6a) Thanks [@laurkim](https://github.com/laurkim)! - Renamed storybook example names for consistency - [Shopify#7808](Shopify#7808) [`ed3444d77`](Shopify@ed3444d) Thanks [@laurkim](https://github.com/laurkim)! - Temporarily removed console warnings for deprecated typography components - [Shopify#7755](Shopify#7755) [`1e5a2b665`](Shopify@1e5a2b6) Thanks [@kyledurand](https://github.com/kyledurand)! - Added position, opacity, top, left, right, bottom, z-index to `Box` - [Shopify#7761](Shopify#7761) [`81f379315`](Shopify@81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [Shopify#7777](Shopify#7777) [`cb882f460`](Shopify@cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [Shopify#7757](Shopify#7757) [`f9e1985c9`](Shopify@f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [Shopify#7764](Shopify#7764) [`9ab44a69f`](Shopify@9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [Shopify#7769](Shopify#7769) [`a9e018ec4`](Shopify@a9e018e) Thanks [@nabihaalikhan](https://github.com/nabihaalikhan)! - Updated badge spacing to right align with secondary action icons - [Shopify#7748](Shopify#7748) [`ed3da747e`](Shopify@ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [Shopify#7732](Shopify#7732) [`d08e1c30c`](Shopify@d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [Shopify#7779](Shopify#7779) [`7c0a4b6a9`](Shopify@7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [Shopify#7793](Shopify#7793) [`824aef031`](Shopify@824aef0) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Extends Navigation Item highlight to full width to cover secondary actions - Updated dependencies \[[`3bc63f7f9`](Shopify@3bc63f7), [`d748c20ef`](Shopify@d748c20), [`6b989379e`](Shopify@6b98937)]: - @shopify/polaris-icons@6.6.0 ## @shopify/plugin-polaris@0.0.18 ### Patch Changes - Updated dependencies \[[`28220456f`](Shopify@2822045)]: - @shopify/polaris-migrator@0.9.1 ## @shopify/polaris-migrator@0.9.1 ### Patch Changes - [Shopify#7744](Shopify#7744) [`28220456f`](Shopify@2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` ## polaris.shopify.com@0.26.0 ### Minor Changes - [Shopify#7746](Shopify#7746) [`757aeebe3`](Shopify@757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [Shopify#7775](Shopify#7775) [`300b6d4bc`](Shopify@300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [Shopify#7790](Shopify#7790) [`dc4540ca7`](Shopify@dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [Shopify#7754](Shopify#7754) [`aee0c5c4c`](Shopify@aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` ### Patch Changes - [Shopify#7745](Shopify#7745) [`70ed3137b`](Shopify@70ed313) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box` - [Shopify#7803](Shopify#7803) [`23665dfd2`](Shopify@23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [Shopify#7799](Shopify#7799) [`508e148f1`](Shopify@508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [Shopify#7761](Shopify#7761) [`81f379315`](Shopify@81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [Shopify#7777](Shopify#7777) [`cb882f460`](Shopify@cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [Shopify#7747](Shopify#7747) [`0ec96f068`](Shopify@0ec96f0) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed bleed examples - [Shopify#7794](Shopify#7794) [`d43e3bc88`](Shopify@d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [Shopify#7757](Shopify#7757) [`f9e1985c9`](Shopify@f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [Shopify#7764](Shopify#7764) [`9ab44a69f`](Shopify@9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [Shopify#7767](Shopify#7767) [`cb24dbb9e`](Shopify@cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [Shopify#7778](Shopify#7778) [`e0c64cd5b`](Shopify@e0c64cd) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links - [Shopify#7748](Shopify#7748) [`ed3da747e`](Shopify@ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [Shopify#7744](Shopify#7744) [`28220456f`](Shopify@2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` - [Shopify#7732](Shopify#7732) [`d08e1c30c`](Shopify@d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [Shopify#7779](Shopify#7779) [`7c0a4b6a9`](Shopify@7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [Shopify#7806](Shopify#7806) [`5f3b61d0a`](Shopify@5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` - Updated dependencies \[[`3bc63f7f9`](Shopify@3bc63f7), [`4cb1c6a8b`](Shopify@4cb1c6a), [`d748c20ef`](Shopify@d748c20), [`6b989379e`](Shopify@6b98937), [`ed3444d77`](Shopify@ed3444d), [`1e5a2b665`](Shopify@1e5a2b6), [`23665dfd2`](Shopify@23665df), [`508e148f1`](Shopify@508e148), [`757aeebe3`](Shopify@757aeeb), [`300b6d4bc`](Shopify@300b6d4), [`0eb43a9fd`](Shopify@0eb43a9), [`81f379315`](Shopify@81f3793), [`cb882f460`](Shopify@cb882f4), [`d43e3bc88`](Shopify@d43e3bc), [`f9e1985c9`](Shopify@f9e1985), [`dc4540ca7`](Shopify@dc4540c), [`9ab44a69f`](Shopify@9ab44a6), [`cb24dbb9e`](Shopify@cb24dbb), [`b7b729235`](Shopify@b7b7292), [`aee0c5c4c`](Shopify@aee0c5c), [`a9e018ec4`](Shopify@a9e018e), [`ed3da747e`](Shopify@ed3da74), [`15570cc15`](Shopify@15570cc), [`d08e1c30c`](Shopify@d08e1c3), [`7c0a4b6a9`](Shopify@7c0a4b6), [`5f3b61d0a`](Shopify@5f3b61d), [`824aef031`](Shopify@824aef0)]: - @shopify/polaris-icons@6.6.0 - @shopify/polaris@10.13.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Follow up on Shopify#7767 (comment)

aveline and others added 5 commits November 18, 2022 10:01

Allow aria attributes to be passed in to Box

c51b659

Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>

Add aria test to Box

be08d54

Allow aria attributes to be passed in to AlphaStack

e06dff2

Update props.json

71cfe42

changeset

9e9a7f0

aveline requested review from yurm04, chazdean, kyledurand and laurkim November 18, 2022 18:27

kyledurand reviewed Nov 18, 2022

View reviewed changes

aveline added the #gsd:30116 label Nov 18, 2022

aveline self-assigned this Nov 18, 2022

laurkim approved these changes Nov 21, 2022

View reviewed changes

aveline added 5 commits November 21, 2022 08:28

Remove filtering for aria props

1636a69

Merge branch 'main' into layout-aria-attrs

cbb1798

Update props.json

854a924

Merge branch 'main' into layout-aria-attrs

8510c6d

Update props.json

e3fa1c2

aveline merged commit cb24dbb into main Nov 21, 2022

aveline deleted the layout-aria-attrs branch November 21, 2022 20:09

github-actions bot mentioned this pull request Nov 21, 2022

Version Packages #7727

Merged

kyledurand mentioned this pull request Mar 6, 2023

[Layout foundations] Allow aria attributes #8569

Merged

kyledurand added a commit that referenced this pull request Mar 7, 2023

[Layout foundations] Allow aria attributes (#8569)

646fba2

Follow up on #7767 (comment)

juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023

[Layout foundations] Allow aria attributes (Shopify#8569)

a87c279

Follow up on Shopify#7767 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Layout] Add suport for passing in aria attributes #7767

[Layout] Add suport for passing in aria attributes #7767

aveline commented Nov 18, 2022 •

edited

github-actions bot commented Nov 18, 2022 •

edited

kyledurand left a comment

kyledurand Nov 18, 2022

kyledurand Nov 18, 2022

aaronccasanova Nov 18, 2022 •

edited

kyledurand Nov 18, 2022

aveline Nov 18, 2022

kyledurand Nov 18, 2022

kyledurand commented Nov 18, 2022

aveline commented Nov 18, 2022

laurkim left a comment

[Layout] Add suport for passing in aria attributes #7767

[Layout] Add suport for passing in aria attributes #7767

Conversation

aveline commented Nov 18, 2022 • edited

WHY are these changes introduced?

WHAT is this pull request doing?

github-actions bot commented Nov 18, 2022 • edited

size-limit report 📦

kyledurand left a comment

Choose a reason for hiding this comment

kyledurand Nov 18, 2022

Choose a reason for hiding this comment

kyledurand Nov 18, 2022

Choose a reason for hiding this comment

aaronccasanova Nov 18, 2022 • edited

Choose a reason for hiding this comment

kyledurand Nov 18, 2022

Choose a reason for hiding this comment

aveline Nov 18, 2022

Choose a reason for hiding this comment

kyledurand Nov 18, 2022

Choose a reason for hiding this comment

kyledurand commented Nov 18, 2022

aveline commented Nov 18, 2022

laurkim left a comment

Choose a reason for hiding this comment

aveline commented Nov 18, 2022 •

edited

github-actions bot commented Nov 18, 2022 •

edited

aaronccasanova Nov 18, 2022 •

edited