lightning-base-components 1.20.2-alpha → 1.21.1-alpha

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -16,7 +16,7 @@ To specify the pills, set the `items` attribute to an array of values in your co
 By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line.
 For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
-This example creates three pills: a text-only pill, a pill with an avatar, and
+This example creates three pills: a text-only pill, a pill with a link and an avatar, and
 a pill with an icon.
 
 ```html
@@ -37,6 +37,7 @@ export default class PillContainerExample extends LightningElement {
         {
             type: 'avatar',
             label: 'Avatar Pill',
+            href: 'https://www.example.com',
             name: 'avatarpill',
             src: '/my/path/avatar.jpg',
             fallbackIconName: 'standard:user',
@@ -60,11 +61,15 @@ be used to create a pill with an avatar or icon.
 -   `label`: Required. The text label that displays in the pill.
 -   `name`: The name for the pill. This value is optional and can be used to identify the pill in a callback.
 
+To create a pill with a link, use the following attribute.
+
+-  `href`: Required. The URL for the link.
+
 To create a pill with an avatar, use the following attributes.
 
 -   `type`: The media type. Use `avatar`.
 -   `src`: Required. The URL of the avatar.
--   `fallbackIconName`: The Lightning Design System name of the icon used as a fallback when the image fails to load. The initials fallback relies on this icon for its background color. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
+-   `fallbackIconName`: The Lightning Design System name of the icon to use as a fallback when the image fails to load. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
 -   `variant`: Changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.
 -   `alternativeText`: The alternative text used to describe the avatar, which is displayed as hover text on the image.
 
@@ -74,7 +79,7 @@ To create a pill with an icon, use the following attributes.
 -   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
 -   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
-`lightning-pill-container` provides two variants: `bare` and `standard` (default). They are visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
+`lightning-pill-container` provides two variants: `bare` and `standard` (default). They’re visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
 
 #### Removing Pills
 
@@ -133,7 +138,7 @@ set to false by default, which makes all pills display and wrap to multiple line
 
 - `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value.
 - `is-expanded`: Determines whether the full list of pills is shown. Set `is-collapsible` to true if you want to set `is-expanded` to expand and collapse the list. If you set `is-expanded` to false and don't set `is-collapsible` to true, the list is expanded.
-- `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
+- `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they’re wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
 If all pills aren't displayed, the component shows a text button indicating how many more pills there are.
 For example, if there are five more pills that aren’t displayed, the text button shows `+5 more`. The text button fires the `focus` event when you click it.
@@ -255,13 +260,16 @@ To understand how we implemented SLDS in `lightning-pill-container`, see the **S
 
 #### Accessibility
 
-By default, `lightning-pill-container` renders pills using the `standard` variant, which uses an unordered list element to display pills. Press the Tab key to focus on the first pill and use the Left Arrow and Right Arrow keys to navigate through the pills. Tabbing and navigating with arrow keys puts focus only on the pill borders, not on the remove buttons. The `standard` variant renders `aria` and `role` attributes in the list elements.
+By default, `lightning-pill-container` renders pills using the `standard` variant, which uses an unordered list element to display pills. Press the Tab key to focus on the first pill and use the Left Arrow and Right Arrow keys to navigate through the pills. Use the Tab key to navigate to the remove button in a pill with a link. Use arrow keys to navigate between pills.
+The focus goes to a link if present, otherwise focus goes to the remove button.
+
+The `bare` variant only supports the Tab key for navigating between focusable elements in the container's pills. The arrow keys aren't supported.
 
-The `bare` variant provides a focusable remove button. Tab to focus on the pill and tab again to focus on the remove button. The `bare` variant doesn't render `aria` and `role` attributes.
+On mobile devices, both container variants display pills with the close button as a focusable element for accessibility.
 
-On mobile devices, both variants display the close button as a focusable element for accessibility.
+To remove a pill, press Enter or the space bar when the pill's remove button receives focus. On mobile devices, you can tap the remove button to remove a pill.
 
-To remove a pill, press the Delete or Backspace key when the pill receives focus. On mobile devices, you can tap the remove button to remove a pill.
+For pills with links, use the Tab key or arrow keys to focus on the pill's link, then press Enter to navigate to the link target. If you don't navigate away from the pill, tabbing again puts focus on the remove button.
 
 #### Custom Events