diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
index b5fb7e31542682..ef3bee2d66ad68 100644
--- a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
+++ b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
@@ -63,41 +63,41 @@ export const Size = () =>
export const SizeRTL = getStoryVariant(Size, RTL);
export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
-export const ExpandIconPositionEnd = () =>
+export const MarkerPositionEnd = () =>
parse(`
<fluent-accordion openItems={[0]}>
- <fluent-accordion-item expanded expand-icon-position="end">
+ <fluent-accordion-item expanded marker-position="end">
<span slot="heading">Opened</span>
Visible Panel
</fluent-accordion-item>
- <fluent-accordion-item expand-icon-position="end">
+ <fluent-accordion-item marker-position="end">
<span slot="heading">Closed</span>
Hidden Panel
</fluent-accordion-item>
</fluent-accordion>
`);
-export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
-export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE);
+export const MarkerPositionEndRTL = getStoryVariant(MarkerPositionEnd, RTL);
+export const MarkerPositionEndDarkMode = getStoryVariant(MarkerPositionEnd, DARK_MODE);
export const AccordionWithCustomIcons = () =>
parse(`
<fluent-accordion>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 1</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 2</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 3</span>
Accordion Panel 1
</fluent-accordion-item>
diff --git a/change/@fluentui-web-components-bfd68275-8db7-4591-a7d9-3adfcc8ba806.json b/change/@fluentui-web-components-bfd68275-8db7-4591-a7d9-3adfcc8ba806.json
new file mode 100644
index 00000000000000..40dbf87b134135
--- /dev/null
+++ b/change/@fluentui-web-components-bfd68275-8db7-4591-a7d9-3adfcc8ba806.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "refactor(web-components): cleanup accordion and convert to element internals for states",
+ "packageName": "@fluentui/web-components",
+ "email": "rupertdavid@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index bbe424b8d6d572..d8801d8259b508 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -23,12 +23,12 @@ import { ViewTemplate } from '@microsoft/fast-element';
// @public
export class Accordion extends FASTElement {
- // (undocumented)
+ // @internal (undocumented)
protected accordionItems: Element[];
expandmode: AccordionExpandMode;
// (undocumented)
expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
- // @internal (undocumented)
+ // @internal
handleChange(source: any, propertyName: string): void;
// @internal (undocumented)
slottedAccordionItems: HTMLElement[];
@@ -56,16 +56,21 @@ export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
// @public (undocumented)
export class AccordionItem extends FASTElement {
block: boolean;
- // @internal (undocumented)
- clickHandler: (e: MouseEvent) => void;
+ blockChanged(prev: boolean, next: boolean): void;
disabled: boolean;
+ disabledChanged(prev: boolean, next: boolean): void;
+ // @internal
+ elementInternals: ElementInternals;
// @internal (undocumented)
expandbutton: HTMLElement;
expanded: boolean;
- expandIconPosition?: AccordionItemExpandIconPosition;
+ expandedChanged(prev: boolean, next: boolean): void;
headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
id: string;
+ markerPosition?: AccordionItemMarkerPosition;
+ markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
size?: AccordionItemSize;
+ sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
}
// Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts
@@ -77,16 +82,16 @@ export interface AccordionItem extends StartEnd {
// @public (undocumented)
export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
-// Warning: (ae-missing-release-tag) "AccordionItemExpandIconPosition" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "AccordionItemMarkerPosition" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
-export const AccordionItemExpandIconPosition: {
+export const AccordionItemMarkerPosition: {
readonly start: "start";
readonly end: "end";
};
// @public
-export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
// Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts
//
diff --git a/packages/web-components/src/accordion-item/README.md b/packages/web-components/src/accordion-item/README.md
index 946769567defe5..489ddf34805baf 100644
--- a/packages/web-components/src/accordion-item/README.md
+++ b/packages/web-components/src/accordion-item/README.md
@@ -30,24 +30,24 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
### **Variables**
-| Name | Description | Type |
-| --------------------------------- | -------------------------- | --------------------------------------------------------------------------------- |
-| `AccordionItemSize` | Expand modes for Accordion | `{ small: "small", medium: "medium", large: "large", extraLarge: "extra-large" }` |
-| `AccordionItemExpandIconPosition` | Expand icon position | `{ start: "start", end: "end" }` |
+| Name | Description | Type |
+| ----------------------------- | -------------------------- | --------------------------------------------------------------------------------- |
+| `AccordionItemSize` | Expand modes for Accordion | `{ small: "small", medium: "medium", large: "large", extraLarge: "extra-large" }` |
+| `AccordionItemMarkerPosition` | Expand icon position | `{ start: "start", end: "end" }` |
<br />
### **Fields**
-| Name | Privacy | Type | Default | Description | Inherited From |
-| -------------------- | ------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- |
-| `headinglevel` | public | `1 or 2 or 3 or 4 or 5 or 6` | `2` | Configures the [level](https://www.w3.org/TR/wai-aria-1.1/#aria-level) of the heading element. | |
-| `expanded` | public | `boolean` | `false` | Expands or collapses the item. | |
-| `disabled` | public | `boolean` | `false` | Disables an accordion item | |
-| `id` | public | `string` | | The item ID | |
-| `size` | public | `AccordionItemSize` | `medium` | The font size of the AccordionItem header. |
-| `block` | public | `boolean` | `true` | Sets the width of the focus state. |
-| `expandIconPosition` | public | `AccordionItemExpandIconPosition` | `start` | Sets the position of the expand icon |
+| Name | Privacy | Type | Default | Description | Inherited From |
+| ---------------- | ------- | ----------------------------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- |
+| `headinglevel` | public | `1 or 2 or 3 or 4 or 5 or 6` | `2` | Configures the [level](https://www.w3.org/TR/wai-aria-1.1/#aria-level) of the heading element. | |
+| `expanded` | public | `boolean` | `false` | Expands or collapses the item. | |
+| `disabled` | public | `boolean` | `false` | Disables an accordion item | |
+| `id` | public | `string` | | The item ID | |
+| `size` | public | `AccordionItemSize` | `medium` | The font size of the AccordionItem header. |
+| `block` | public | `boolean` | `true` | Sets the width of the focus state. |
+| `markerPosition` | public | `AccordionItemMarkerPosition` | `start` | Sets the position of the expand icon |
<br />
@@ -61,15 +61,15 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
### **Attributes**
-| Name | Field |
-| -------------------- | ------------------ |
-| `heading-level` | headinglevel |
-| | expanded |
-| | disabled |
-| | block |
-| `id` | id |
-| `expandIconPosition` | expandIconPosition |
-| `size` | size |
+| Name | Field |
+| ---------------- | -------------- |
+| `heading-level` | headinglevel |
+| | expanded |
+| | disabled |
+| | block |
+| `id` | id |
+| `markerPosition` | markerPosition |
+| `size` | size |
<br />
@@ -136,6 +136,6 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
| `size` | `size` | |
| `as: 'h1'` | `'h2'` | `'h3'` | `'h4'` | `'h5'` | `'h6'` | `headinglevel: 1` | `2` | `3` | `4` | `5` | `6` | `as` property sets a wrapper around the `AccordionItem` header with the corresponding header tag ( `h1`, `h2`, etc. ) <hr /> `headinglevel` sets the `aria-level` attribute to the corresponding heading level.
| `disabled` | `disabled` |
-| `expandIconPosition` | `expand-icon-position` |
+| `markerPosition` | `marker-position` |
| `expandIcon` | `named slot: collapsed-icon` + `expanded-icon` | `expandIcon` is a prop that is passed a ternary to render the appropriate icon. <hr /> `collapsed-icon` and `expanded-icon` are named slots to supply the appropriate icons.
| `icon` | `named slot: start` + `end` | `icon` is a property set on the `AccordionHeader` through which an icon is passed <hr /> `start` and `end` are named slots through which to supply a presentation icon.
diff --git a/packages/web-components/src/accordion-item/accordion-item.options.ts b/packages/web-components/src/accordion-item/accordion-item.options.ts
index 79ea47d2e9cd1f..9995b71cdfeab2 100644
--- a/packages/web-components/src/accordion-item/accordion-item.options.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.options.ts
@@ -19,7 +19,7 @@ export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
/**
* An Accordion Item expand/collapse icon can appear at the start or end of the accordion
*/
-export const AccordionItemExpandIconPosition = {
+export const AccordionItemMarkerPosition = {
start: 'start',
end: 'end',
} as const;
@@ -28,4 +28,4 @@ export const AccordionItemExpandIconPosition = {
* Applies expand/collapse icon position
* @public
*/
-export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
diff --git a/packages/web-components/src/accordion-item/accordion-item.spec.ts b/packages/web-components/src/accordion-item/accordion-item.spec.ts
index c0b1ed47a17a37..83bcdfa766a188 100644
--- a/packages/web-components/src/accordion-item/accordion-item.spec.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.spec.ts
@@ -191,23 +191,23 @@ test.describe('Accordion item', () => {
await expect(element).toHaveJSProperty('block', false);
});
- test('should set the expand-icon-position attribute to the provided value', async () => {
+ test('should set the marker-position attribute to the provided value', async () => {
await root.evaluate(node => {
node.innerHTML = /* html */ `
<fluent-accordion>
- <fluent-accordion-item expand-icon-position="end"></fluent-accordion-item>
+ <fluent-accordion-item marker-position="end"></fluent-accordion-item>
</fluent-accordion>
`;
});
- await expect(element).toHaveAttribute('expand-icon-position', 'end');
- await expect(element).toHaveJSProperty('expandIconPosition', 'end');
+ await expect(element).toHaveAttribute('marker-position', 'end');
+ await expect(element).toHaveJSProperty('markerPosition', 'end');
await element.evaluate<void, AccordionItem>(node => {
- node.expandIconPosition = 'start';
+ node.markerPosition = 'start';
});
- await expect(element).toHaveAttribute('expand-icon-position', 'start');
- await expect(element).toHaveJSProperty('expandIconPosition', 'start');
+ await expect(element).toHaveAttribute('marker-position', 'start');
+ await expect(element).toHaveJSProperty('markerPosition', 'start');
});
});
diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index d686a73903c318..bcad9630d9e551 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -1,5 +1,14 @@
import { css } from '@microsoft/fast-element';
import { display } from '../utils/index.js';
+import {
+ alignEndState,
+ blockState,
+ disabledState,
+ expandedState,
+ extraLargeState,
+ largeState,
+ smallState,
+} from '../styles/states/index.js';
import {
borderRadiusMedium,
borderRadiusSmall,
@@ -35,7 +44,6 @@ export const styles = css`
height: 44px;
display: grid;
position: relative;
- vertical-align: middle;
padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
border-radius: ${borderRadiusMedium};
font-family: ${fontFamilyBase};
@@ -45,29 +53,20 @@ export const styles = css`
grid-template-columns: auto auto 1fr auto;
}
- .heading-content {
- height: 100%;
- display: flex;
- align-items: center;
- }
-
.button {
- box-sizing: border-box;
appearance: none;
+ background: ${colorTransparentBackground};
border: none;
- outline: none;
- text-align: start;
- cursor: pointer;
- font-family: inherit;
- height: 44px;
+ box-sizing: border-box;
color: ${colorNeutralForeground1};
- background: ${colorTransparentBackground};
- line-height: ${lineHeightBase300};
- height: auto;
- padding: 0;
- font-size: inherit;
+ cursor: pointer;
+ font: inherit;
grid-column: auto / span 2;
grid-row: 1;
+ height: 44px;
+ outline: none;
+ padding: 0;
+ text-align: start;
}
.button::before {
@@ -78,29 +77,30 @@ export const styles = css`
border-radius: ${borderRadiusSmall};
}
- .icon {
+ :where(.default-marker-collapsed, .default-marker-expanded),
+ ::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
position: relative;
height: 100%;
- padding-right: ${spacingHorizontalS};
+ padding-inline-end: ${spacingHorizontalS};
grid-column: 1 / span 1;
grid-row: 1;
}
- .region {
+ .content {
margin: 0 ${spacingHorizontalM};
}
- ::slotted([slot='start']),
- ::slotted([slot='end']) {
+ ::slotted([slot='start']) {
+ display: flex;
justify-content: center;
align-items: center;
padding-right: ${spacingHorizontalS};
grid-column: 2 / span 1;
- grid-row: 1 / span 1;
+ grid-row: 1;
}
button:focus-visible::after {
@@ -116,33 +116,29 @@ export const styles = css`
/* --- Disabled attr styles --- */
- :host([disabled]) .button {
+ :host(${disabledState}) .button {
color: ${colorNeutralForegroundDisabled};
}
- :host([disabled]) svg {
+
+ :host(${disabledState}) svg {
filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
}
/* --- Expanded attr styles --- */
- :host([expanded]) .region {
+ :host(${expandedState}) .content {
display: block;
}
- :host([expanded]) .default-collapsed-icon,
- :host([expanded]) ::slotted([slot='collapsed-icon']),
- :host(:not([expanded])) .default-expanded-icon,
- :host(:not([expanded])) ::slotted([slot='expanded-icon']),
- :host([expanded]) ::slotted([slot='end']),
- ::slotted([slot='start']),
- .region {
+ :host(${expandedState}) .default-marker-collapsed,
+ :host(${expandedState}) ::slotted([slot='marker-collapsed']),
+ :host(:not(${expandedState})) :is(.default-marker-expanded, .content),
+ :host(:not(${expandedState})) ::slotted([slot='marker-expanded']) {
display: none;
}
- :host([expanded]) ::slotted([slot='start']),
- :host([expanded]) ::slotted([slot='expanded-icon']),
- :host(:not([expanded])) ::slotted([slot='collapsed-icon']),
- ::slotted([slot='end']) {
+ :host(${expandedState}) ::slotted([slot='marker-expanded']),
+ :host(:not(${expandedState})) ::slotted([slot='marker-collapsed']) {
display: flex;
}
@@ -153,46 +149,35 @@ export const styles = css`
line-height: ${lineHeightBase300};
}
- :host([size='small']) .heading {
+ :host(${smallState}) .heading {
font-size: ${fontSizeBase200};
line-height: ${lineHeightBase200};
}
- :host([size='large']) .heading {
+ :host(${largeState}) .heading {
font-size: ${fontSizeBase400};
line-height: ${lineHeightBase400};
}
- :host([size='extra-large']) .heading {
+ :host(${extraLargeState}) .heading {
font-size: ${fontSizeBase500};
line-height: ${lineHeightBase500};
}
- /* --- expand-icon-position attr styles --- */
+ /* --- marker-position attr styles --- */
- :host([expand-icon-position='end']) :slotted(span[slot='start']),
- :host([expand-icon-position='end']) ::slotted(span[slot='end']) {
+ :host(${alignEndState}) :slotted([slot='start']) {
grid-column: 1 / span 1;
- grid-row: 1;
}
- :host([expand-icon-position='end']) ::slotted(span[slot='start']),
- :host([expand-icon-position='end']) ::slotted(span[slot='end']) {
- grid-column: 1 / span 1;
- grid-row: 1;
- }
-
- :host([expand-icon-position='end']) .icon {
+ :host(${alignEndState}) :is(.default-marker-collapsed, .default-marker-expanded) {
grid-column: 4 / span 1;
- grid-row: 1;
- display: flex;
- padding-left: 10px;
- padding-right: 0;
+ padding-inline-start: ${spacingHorizontalS};
+ padding-inline-end: 0;
}
- :host([expand-icon-position='end']) .button {
+ :host(${alignEndState}) .button {
grid-column: 2 / span 3;
- grid-row: 1;
}
/* --- Block attr styles --- */
@@ -201,19 +186,20 @@ export const styles = css`
max-width: 100%;
}
- :host([expand-icon-position='end']) .heading {
+ :host(${alignEndState}) .heading {
grid-template-columns: auto auto 28px;
+ padding-inline: ${spacingHorizontalM};
}
- :host([expand-icon-position='end']) .icon {
- grid-column: 5 / span 1;
+ :host(${alignEndState}:has([slot='start'])) .heading {
+ padding-inline: ${spacingHorizontalMNudge} ${spacingHorizontalM};
}
- :host([block][expand-icon-position='end']) .heading {
+ :host(${blockState}${alignEndState}) .heading {
grid-template-columns: auto 1fr;
}
- :host([block][expand-icon-position='end']) .icon {
+ :host(${alignEndState}) :is(.default-marker-collapsed, .default-marker-expanded) {
grid-column: 5 / span 1;
}
`;
diff --git a/packages/web-components/src/accordion-item/accordion-item.template.ts b/packages/web-components/src/accordion-item/accordion-item.template.ts
index ba4748b59b003e..285f119bb58f4f 100644
--- a/packages/web-components/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.template.ts
@@ -9,7 +9,8 @@ const chevronRight20Filled = html.partial(`<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
- class="default-collapsed-icon"
+ class="default-marker-collapsed"
+ aria-hidden="true"
>
<path
d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
@@ -23,7 +24,8 @@ const chevronDown20Filled = html.partial(`<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
- class="default-expanded-icon"
+ class="default-marker-expanded"
+ aria-hidden="true"
>
<path
d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
@@ -35,47 +37,26 @@ export function accordionItemTemplate<T extends AccordionItem>(
options: AccordionItemOptions = {},
): ElementViewTemplate<T> {
return html<T>`
- <div
- class="heading"
- part="heading"
- role="heading"
- aria-level="${x => x.headinglevel}"
+ <div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}">
+ <button
+ class="button"
+ part="button"
+ ${ref('expandbutton')}
+ ?disabled="${x => (x.disabled ? 'true' : void 0)}"
+ aria-expanded="${x => x.expanded}"
+ aria-controls="${x => x.id}-panel"
+ id="${x => x.id}"
>
- <button
- class="button"
- part="button"
- ${ref('expandbutton')}
- ?disabled="${x => (x.disabled ? 'true' : void 0)}"
- aria-expanded="${x => x.expanded}"
- aria-controls="${x => x.id}-panel"
- id="${x => x.id}"
- @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
- >
- <span class="heading-content" part="heading-content">
- <slot name="heading"></slot>
- </span>
- </button>
- ${startSlotTemplate(options)}
- ${endSlotTemplate(options)}
- <span class="icon" part="icon" aria-hidden="true">
- <slot name="expanded-icon">
- ${staticallyCompose(options.expandedIcon)}
- </slot>
- <slot name="collapsed-icon">
- ${staticallyCompose(options.collapsedIcon)}
- </slot>
- <span>
- </div>
- <div
- class="region"
- part="region"
- id="${x => x.id}-panel"
- role="region"
- aria-labelledby="${x => x.id}"
- >
- <slot></slot>
- </div>
-`;
+ <slot name="heading"></slot>
+ </button>
+ ${startSlotTemplate(options)}
+ <slot name="marker-expanded"> ${staticallyCompose(options.expandedIcon)} </slot>
+ <slot name="marker-collapsed"> ${staticallyCompose(options.collapsedIcon)} </slot>
+ </div>
+ <div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}">
+ <slot></slot>
+ </div>
+ `;
}
/**
diff --git a/packages/web-components/src/accordion-item/accordion-item.ts b/packages/web-components/src/accordion-item/accordion-item.ts
index 522093008f3085..8213f7f5f6a84e 100644
--- a/packages/web-components/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.ts
@@ -4,7 +4,8 @@ import type { StaticallyComposableHTML } from '../utils/index.js';
import { StartEnd } from '../patterns/index.js';
import type { StartEndOptions } from '../patterns/index.js';
import { applyMixins } from '../utils/apply-mixins.js';
-import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
+import { toggleState } from '../utils/element-internals.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
/**
* Accordion Item configuration options
@@ -17,22 +18,25 @@ export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
/**
*
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
+ * @slot start - Content positioned before heading in the collapsed state
* @slot heading - Content which serves as the accordion item heading and text of the expand button
* @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
+ * @slot marker-expanded - The expanded icon
+ * @slot marker-collapsed - The collapsed icon
* @csspart heading - Wraps the button
* @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * @csspart content - The wrapper for the accordion item content
*
* @public
*/
export class AccordionItem extends FASTElement {
+ /**
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+ *
+ * @internal
+ */
+ public elementInternals: ElementInternals = this.attachInternals();
+
/**
* Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
* heading element.
@@ -58,6 +62,15 @@ export class AccordionItem extends FASTElement {
@attr({ mode: 'boolean' })
public expanded: boolean = false;
+ /**
+ * Handles expanded changes
+ * @param prev - previous value
+ * @param next - next value
+ */
+ public expandedChanged(prev: boolean, next: boolean): void {
+ toggleState(this.elementInternals, 'expanded', next);
+ }
+
/**
* Disables an accordion item
*
@@ -68,6 +81,15 @@ export class AccordionItem extends FASTElement {
@attr({ mode: 'boolean' })
public disabled: boolean = false;
+ /**
+ * Handles disabled changes
+ * @param prev - previous value
+ * @param next - next value
+ */
+ public disabledChanged(prev: boolean, next: boolean): void {
+ toggleState(this.elementInternals, 'disabled', next);
+ }
+
/**
* The item ID
*
@@ -88,6 +110,20 @@ export class AccordionItem extends FASTElement {
@attr
public size?: AccordionItemSize;
+ /**
+ * Handles changes to size attribute
+ * @param prev - previous value
+ * @param next - next value
+ */
+ public sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void {
+ if (prev) {
+ toggleState(this.elementInternals, prev, false);
+ }
+ if (next) {
+ toggleState(this.elementInternals, next, true);
+ }
+ }
+
/**
* Sets the width of the focus state.
*
@@ -98,31 +134,43 @@ export class AccordionItem extends FASTElement {
@attr({ mode: 'boolean' })
public block: boolean = false;
+ /**
+ * Handles changes to block attribute
+ * @param prev - previous value
+ * @param next - next value
+ */
+ public blockChanged(prev: boolean, next: boolean): void {
+ toggleState(this.elementInternals, 'block', next);
+ }
+
/**
* Sets expand and collapsed icon position.
*
* @public
* @remarks
- * HTML Attribute: expand-icon-position
+ * HTML Attribute: marker-position
*/
- @attr({ attribute: 'expand-icon-position' })
- public expandIconPosition?: AccordionItemExpandIconPosition;
+ @attr({ attribute: 'marker-position' })
+ public markerPosition?: AccordionItemMarkerPosition;
/**
- * @internal
+ * Handles changes to marker-position attribute
+ * @param prev - previous value
+ * @param next - next value
*/
- public expandbutton!: HTMLElement;
+ public markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void {
+ if (prev) {
+ toggleState(this.elementInternals, `align-${prev}`, false);
+ }
+ if (next) {
+ toggleState(this.elementInternals, `align-${next}`, true);
+ }
+ }
/**
* @internal
*/
- public clickHandler = (e: MouseEvent) => {
- if (this.disabled) {
- return;
- }
-
- this.$emit('click', e);
- };
+ public expandbutton!: HTMLElement;
}
/**
diff --git a/packages/web-components/src/accordion-item/index.ts b/packages/web-components/src/accordion-item/index.ts
index 4f09cf8192472a..633c0a7773583a 100644
--- a/packages/web-components/src/accordion-item/index.ts
+++ b/packages/web-components/src/accordion-item/index.ts
@@ -1,6 +1,6 @@
export { AccordionItem } from './accordion-item.js';
export type { AccordionItemOptions } from './accordion-item.js';
-export { AccordionItemSize, AccordionItemExpandIconPosition } from './accordion-item.options.js';
+export { AccordionItemSize, AccordionItemMarkerPosition } from './accordion-item.options.js';
export { styles as accordionItemStyles } from './accordion-item.styles.js';
export { definition as accordionItemDefinition } from './accordion-item.definition.js';
export { template as accordionItemTemplate } from './accordion-item.template.js';
diff --git a/packages/web-components/src/accordion/accordion.spec.ts b/packages/web-components/src/accordion/accordion.spec.ts
index cc99e0adf04225..f0008c32b53227 100644
--- a/packages/web-components/src/accordion/accordion.spec.ts
+++ b/packages/web-components/src/accordion/accordion.spec.ts
@@ -39,52 +39,6 @@ test.describe('Accordion', () => {
await expect(element).toHaveAttribute('expand-mode', 'multi');
});
- test('should navigate the accordion on arrow up/down keys', async () => {
- await root.evaluate(node => {
- node.innerHTML = /* html */ `
- <fluent-accordion>
- <fluent-accordion-item id="accordion-1" tabindex="0">
- <span slot="heading">Heading 1</span>
- <div>Content 1</div>
- </fluent-accordion-item>
- <fluent-accordion-item id="accordion-2">
- <span slot="heading">Heading 2</span>
- <div>Content 2</div>
- </fluent-accordion-item>
- <fluent-accordion-item id="accordion-3">
- <span slot="heading">Heading 3</span>
- <div>Content 3</div>
- </fluent-accordion-item>
- </fluent-accordion>
- `;
- });
-
- const accordionItems = page.locator('fluent-accordion-item') as Locator;
-
- await expect(accordionItems).toHaveCount(3);
-
- const firstItem = accordionItems.nth(0);
- const secondItem = accordionItems.nth(1);
- const thirdItem = accordionItems.nth(2);
-
- await firstItem.evaluate(node => {
- node.focus();
- });
-
- await expect(firstItem).toBeFocused();
-
- await firstItem.press('ArrowDown');
- await expect(secondItem).toBeFocused();
-
- await secondItem.press('ArrowDown');
- await expect(thirdItem).toBeFocused();
-
- await thirdItem.press('ArrowUp');
- await expect(secondItem).toBeFocused();
-
- await secondItem.press('ArrowUp');
- await expect(firstItem).toBeFocused();
- });
test('should open/close appropriate accordion items on Enter key in multiple expand mode', async () => {
await root.evaluate(node => {
@@ -117,11 +71,7 @@ test.describe('Accordion', () => {
await expect(firstItem).toBeFocused();
- await firstItem.press('ArrowDown');
-
- await expect(secondItem).toBeFocused();
-
- await secondItem.press('Enter');
+ await secondItem.locator('button').press('Enter');
await expect(firstItem).not.toHaveAttribute('expanded', '');
await expect(firstItem).toHaveJSProperty('expanded', false);
@@ -161,11 +111,7 @@ test.describe('Accordion', () => {
await expect(firstItem).toBeFocused();
- await firstItem.press('ArrowDown');
-
- await expect(secondItem).toBeFocused();
-
- await secondItem.press('Enter');
+ await secondItem.locator('button').press('Enter');
await expect(secondItem).toHaveAttribute('expanded', '');
await expect(secondItem).toHaveJSProperty('expanded', true);
diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts
index ced506eb5078d1..4712753451fb8e 100644
--- a/packages/web-components/src/accordion/accordion.stories.ts
+++ b/packages/web-components/src/accordion/accordion.stories.ts
@@ -1,7 +1,7 @@
import { html } from '@microsoft/fast-element';
import type { Args, Meta } from '@storybook/html';
import { renderComponent } from '../helpers.stories.js';
-import { AccordionItemExpandIconPosition, AccordionItemSize } from '../accordion-item/accordion-item.options.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from '../accordion-item/accordion-item.options.js';
import type { Accordion as FluentAccordion } from './accordion.js';
type AccordionStoryArgs = Args & FluentAccordion;
@@ -24,6 +24,7 @@ const subtract20Filled = html`<svg
</svg>`;
const eye20Regular = html`<svg
+ id="eye"
width="20"
height="20"
viewBox="0 0 20 20"
@@ -36,6 +37,7 @@ const eye20Regular = html`<svg
/>
</svg>`;
const eyeOff20Regular = html`<svg
+ id="eye-off"
width="20"
height="20"
viewBox="0 0 20 20"
@@ -53,7 +55,7 @@ const storyTemplate = html<AccordionStoryArgs>`
<fluent-accordion-item
size=${x => x.size}
heading-level=${x => x.headingLevel}
- expand-icon-position=${x => x.expandIconPosition}
+ marker-position=${x => x.markerPosition}
block=${x => x.block}
?disabled=${x => x.disabled}
>
@@ -63,7 +65,7 @@ const storyTemplate = html<AccordionStoryArgs>`
<fluent-accordion-item
size=${x => x.size}
heading-level=${x => x.headingLevel}
- expand-icon-position=${x => x.expandIconPosition}
+ marker-position=${x => x.markerPosition}
block=${x => x.block}
?disabled=${x => x.disabled}
>
@@ -73,7 +75,7 @@ const storyTemplate = html<AccordionStoryArgs>`
<fluent-accordion-item
size=${x => x.size}
heading-level=${x => x.headingLevel}
- expand-icon-position=${x => x.expandIconPosition}
+ marker-position=${x => x.markerPosition}
block=${x => x.block}
?disabled=${x => x.disabled}
>
@@ -87,7 +89,7 @@ export default {
title: 'Components/Accordion',
args: {
size: 'medium',
- expandIconPosition: 'start',
+ markerPosition: 'start',
expandMode: 'multiple',
block: false,
disabled: false,
@@ -105,14 +107,14 @@ export default {
},
defaultValue: 'medium',
},
- expandIconPosition: {
+ markerPosition: {
description: 'Sets position of expand and collapse icon',
table: {
defaultValue: { summary: 'start' },
},
control: {
type: 'select',
- options: Object.values(AccordionItemExpandIconPosition),
+ options: Object.values(AccordionItemMarkerPosition),
},
defaultValue: 'start',
},
@@ -162,20 +164,20 @@ export const Accordion = renderComponent(storyTemplate).bind({});
export const AccordionWithCustomIcons = renderComponent(html<AccordionStoryArgs>`
<fluent-accordion>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 1</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 2</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="collapsed-icon">${add20Filled}</span>
- <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="marker-collapsed">${add20Filled}</span>
+ <span slot="marker-expanded">${subtract20Filled}</span>
<span slot="heading">Accordion Header 3</span>
Accordion Panel 1
</fluent-accordion-item>
@@ -183,22 +185,27 @@ export const AccordionWithCustomIcons = renderComponent(html<AccordionStoryArgs>
`);
export const AccordionWithPresentationIcons = renderComponent(html<AccordionStoryArgs>`
- <fluent-accordion>
+ <style>
+ #with-icon fluent-accordion-item:not([expanded]) #eye {
+ display: none;
+ }
+ #with-icon fluent-accordion-item[expanded] #eye-off {
+ display: none;
+ }
+ </style>
+ <fluent-accordion id="with-icon">
<fluent-accordion-item>
- <span slot="start">${eye20Regular}</span>
- <span slot="end">${eyeOff20Regular}</span>
+ <span slot="start">${eye20Regular}${eyeOff20Regular}</span>
<span slot="heading">Accordion Header 1</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="start">${eye20Regular}</span>
- <span slot="end">${eyeOff20Regular}</span>
+ <span slot="start"> ${eye20Regular} ${eyeOff20Regular} </span>
<span slot="heading">Accordion Header 2</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
- <span slot="start">${eye20Regular}</span>
- <span slot="end">${eyeOff20Regular}</span>
+ <span slot="start">${eye20Regular}${eyeOff20Regular}</span>
<span slot="heading">Accordion Header 3</span>
Accordion Panel 1
</fluent-accordion-item>
diff --git a/packages/web-components/src/accordion/accordion.ts b/packages/web-components/src/accordion/accordion.ts
index 9de8a8c59cad7a..ad9973e67810d0 100644
--- a/packages/web-components/src/accordion/accordion.ts
+++ b/packages/web-components/src/accordion/accordion.ts
@@ -1,6 +1,5 @@
import { Observable } from '@microsoft/fast-element';
import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from '@microsoft/fast-web-utilities';
import { AccordionItem } from '../accordion-item/accordion-item.js';
import { AccordionExpandMode } from './accordion.options.js';
@@ -8,8 +7,9 @@ import { AccordionExpandMode } from './accordion.options.js';
* An Accordion Custom HTML Element
* Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
*
+ * @slot - The default slot for the accordion items
* @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
+ *
* @public
*/
export class Accordion extends FASTElement {
@@ -34,11 +34,13 @@ export class Accordion extends FASTElement {
return;
}
- if (next !== AccordionExpandMode.single) {
- (expandedItem as AccordionItem)?.expandbutton.removeAttribute('aria-disabled');
- } else {
+ if (next === AccordionExpandMode.single) {
this.setSingleExpandMode(expandedItem);
+ return;
}
+
+ // Clean up single expand mode behavior
+ (expandedItem as AccordionItem)?.expandbutton.removeAttribute('aria-disabled');
}
/**
@@ -47,6 +49,9 @@ export class Accordion extends FASTElement {
@observable
public slottedAccordionItems!: HTMLElement[];
+ /**
+ * @internal
+ */
protected accordionItems!: Element[];
/**
@@ -59,6 +64,7 @@ export class Accordion extends FASTElement {
}
/**
+ * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
* @internal
*/
public handleChange(source: any, propertyName: string) {
@@ -73,14 +79,12 @@ export class Accordion extends FASTElement {
}
}
- private activeid!: string | null;
private activeItemIndex: number = 0;
- private accordionIds!: Array<string | null>;
-
- private change = (): void => {
- this.$emit('change', this.activeid);
- };
+ /**
+ * Find the first expanded item in the accordion
+ * @returns {void}
+ */
private findExpandedItem(): AccordionItem | Element | null {
if (this.accordionItems.length === 0) {
return null;
@@ -92,32 +96,31 @@ export class Accordion extends FASTElement {
);
}
+ /**
+ * Resets event listeners and sets the `accordionItems` property
+ * then rebinds event listeners to each non-disabled item
+ * @returns {void}
+ */
private setItems = (): void => {
if (this.slottedAccordionItems.length === 0) {
return;
}
+ // Get all existing children and remove event listeners
const children: Element[] = Array.from(this.children);
-
this.removeItemListeners(children);
+ // Resubscribe to the `disabled` attribute of all children
children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
+ // Add event listeners to each non-disabled AccordionItem
this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
-
- this.accordionIds = this.getItemIds();
-
this.accordionItems.forEach((item: Element, index: number) => {
if (item instanceof AccordionItem) {
- item.addEventListener('click', this.activeItemChange);
- item.addEventListener('keydown', this.handleItemKeyDown);
- item.addEventListener('focus', this.handleItemFocus);
+ item.addEventListener('click', this.expandedChangedHandler);
+ // Subscribe to the expanded attribute of the item
Observable.getNotifier(item).subscribe(this, 'expanded');
}
-
- const itemId: string | null = this.accordionIds[index];
- item.setAttribute('id', typeof itemId !== 'string' ? `accordion-${index + 1}` : itemId);
- this.activeid = this.accordionIds[this.activeItemIndex] as string;
});
if (this.isSingleExpandMode()) {
@@ -126,6 +129,19 @@ export class Accordion extends FASTElement {
}
};
+ /**
+ * Checks if the accordion is in single expand mode
+ * @returns {boolean}
+ */
+ private isSingleExpandMode(): boolean {
+ return this.expandmode === AccordionExpandMode.single;
+ }
+
+ /**
+ * Controls the behavior of the accordion in single expand mode
+ * @param expandedItem The item to expand in single expand mode
+ * @returns {void}
+ */
private setSingleExpandMode(expandedItem: Element): void {
if (this.accordionItems.length === 0) {
return;
@@ -149,30 +165,27 @@ export class Accordion extends FASTElement {
});
}
+ /**
+ * Removes event listeners from the previous accordion items
+ * @param oldValue An array of the previous accordion items
+ */
private removeItemListeners = (oldValue: any): void => {
oldValue.forEach((item: HTMLElement, index: number) => {
Observable.getNotifier(item).unsubscribe(this, 'disabled');
Observable.getNotifier(item).unsubscribe(this, 'expanded');
- item.removeEventListener('click', this.activeItemChange);
- item.removeEventListener('keydown', this.handleItemKeyDown);
- item.removeEventListener('focus', this.handleItemFocus);
+ item.removeEventListener('click', this.expandedChangedHandler);
});
};
- private activeItemChange = (event: Event): void => {
- if (event.defaultPrevented || event.target !== event.currentTarget) {
- return;
- }
-
- event.preventDefault();
-
- this.handleExpandedChange(event.target as HTMLElement);
- };
+ /**
+ * Changes the expanded state of the accordion item
+ * @param evt Click event
+ * @returns
+ */
+ private expandedChangedHandler: EventListener = (evt: Event): void => {
+ const item = evt.target as HTMLElement;
- private handleExpandedChange = (item: HTMLElement) => {
if (item instanceof AccordionItem) {
- this.activeid = item.getAttribute('id');
-
if (!this.isSingleExpandMode()) {
item.expanded = !item.expanded;
// setSingleExpandMode sets activeItemIndex on its own
@@ -181,69 +194,7 @@ export class Accordion extends FASTElement {
this.setSingleExpandMode(item);
}
- this.change();
+ this.$emit('change');
}
};
-
- private getItemIds(): Array<string | null> {
- return this.slottedAccordionItems.map((accordionItem: HTMLElement) => {
- return accordionItem.id;
- });
- }
-
- private isSingleExpandMode(): boolean {
- return this.expandmode === AccordionExpandMode.single;
- }
-
- private handleItemKeyDown = (event: KeyboardEvent): void => {
- // only handle the keydown if the event target is the accordion item
- // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
- if (event.target !== event.currentTarget) {
- return;
- }
- this.accordionIds = this.getItemIds();
- switch (event.key) {
- case keyArrowUp:
- event.preventDefault();
- this.adjust(-1);
- break;
- case keyArrowDown:
- event.preventDefault();
- this.adjust(1);
- break;
- case keyHome:
- this.activeItemIndex = 0;
- this.focusItem();
- break;
- case keyEnd:
- this.activeItemIndex = this.accordionItems.length - 1;
- this.focusItem();
- break;
- }
- };
-
- private handleItemFocus = (event: FocusEvent): void => {
- // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
- // only do so if the focus is actually on the accordion item and not on any of its children
- if (event.target === event.currentTarget) {
- const focusedItem = event.target as HTMLElement;
- const focusedIndex: number = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
- if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
- this.activeItemIndex = focusedIndex;
- this.activeid = this.accordionIds[this.activeItemIndex] as string;
- }
- }
- };
-
- private adjust(adjustment: number): void {
- this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
- this.focusItem();
- }
-
- private focusItem(): void {
- const element: Element = this.accordionItems[this.activeItemIndex];
- if (element instanceof AccordionItem) {
- element.expandbutton.focus();
- }
- }
}
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 9c90b144da616c..87ece39fb6e392 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -1,7 +1,7 @@
export {
AccordionItem,
accordionItemDefinition,
- AccordionItemExpandIconPosition,
+ AccordionItemMarkerPosition,
AccordionItemSize,
accordionItemStyles,
accordionItemTemplate,
diff --git a/packages/web-components/src/styles/states/index.ts b/packages/web-components/src/styles/states/index.ts
index 5abf24b1c35bd9..db9226195159ac 100644
--- a/packages/web-components/src/styles/states/index.ts
+++ b/packages/web-components/src/styles/states/index.ts
@@ -245,3 +245,15 @@ export const singleLineState = css.partial`:is([state--singleline], :state(singl
* @public
*/
export const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;
+
+/**
+ * Selector for the `expanded` state.
+ * @public
+ */
+export const expandedState = css.partial`:is([state--expanded], :state(expanded))`;
+
+/**
+ * Selector for the `block` state.
+ * @public
+ */
+export const blockState = css.partial`:is([state--block], :state(block))`;