From 5711aeb9d7c8af3c095aed7ff25a46f63d3768ef Mon Sep 17 00:00:00 2001 From: Charles Date: Wed, 4 May 2022 17:26:56 -0300 Subject: [PATCH 1/7] fix: pill behavior --- .../accessibility/src/behaviors/Pill/pillBehavior.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts index 1f5a3dc54fa8b4..aa502afb6b4a5c 100644 --- a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts @@ -6,8 +6,8 @@ export const pillBehavior: Accessibility = p => ({ attributes: { root: { role: p.actionable ? 'button' : 'none', - tabIndex: p.actionable ? 0 : -1, - [IS_FOCUSABLE_ATTRIBUTE]: p.actionable || p.role === 'option', + tabIndex: p.actionable || p.selectable ? 0 : -1, + [IS_FOCUSABLE_ATTRIBUTE]: p.actionable || p.selectable || p.role === 'option', ...(p.selectable && { 'aria-selected': p.selected, }), @@ -19,6 +19,8 @@ export const pillBehavior: Accessibility = p => ({ performDismiss: { keyCombinations: [{ keyCode: keyboardKey.Delete }, { keyCode: keyboardKey.Backspace }], }, + }), + ...(p.selectable && { performClick: { keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: SpacebarKey }], }, From ed03f57bc360af265528a087a8853601a4019f5a Mon Sep 17 00:00:00 2001 From: Charles Date: Wed, 4 May 2022 17:27:58 -0300 Subject: [PATCH 2/7] fix: Pill by adding default accessibility and considering selectable to add onclick --- packages/fluentui/react-northstar/src/components/Pill/Pill.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx index a61b7cfc4dd2a8..55d59a0f58fedd 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx @@ -212,7 +212,7 @@ export const Pill = (React.forwardRef((props, ref) = {...getA11yProps('root', { className: classes.root, ref, - ...(actionable && { onClick: handleClick }), + ...((actionable || selectable) && { onClick: handleClick }), ...unhandledProps, })} > @@ -255,6 +255,7 @@ export const Pill = (React.forwardRef((props, ref) = Pill.defaultProps = { as: 'span' as const, + accessibility: pillBehavior, }; Pill.propTypes = { From 467551a817ac43ac191235c655d099ed2a23e403 Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 5 May 2022 08:43:50 -0300 Subject: [PATCH 3/7] chore: remove unstable comment --- packages/fluentui/react-northstar/src/components/Pill/Pill.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx index 55d59a0f58fedd..c02a9386134ff0 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx @@ -112,7 +112,6 @@ export type PillStylesProps = Required< export const pillClassName = 'ui-pill'; /** - * THIS COMPONENT IS UNSTABLE * Pills should be used when representing an input, as a way to filter content, or to represent an attribute. */ export const Pill = (React.forwardRef((props, ref) => { From 42e0c277182faa073af9ea694741324abe92208f Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 5 May 2022 08:52:28 -0300 Subject: [PATCH 4/7] chore: add missing role prop --- .../react-northstar/src/components/Pill/Pill.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx index c02a9386134ff0..efffaa6b587429 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx @@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; import * as customPropTypes from '@fluentui/react-proptypes'; import * as _ from 'lodash'; -import { Accessibility, pillBehavior, PillBehaviorProps } from '@fluentui/accessibility'; +import { Accessibility, AriaRole, pillBehavior, PillBehaviorProps } from '@fluentui/accessibility'; import { UIComponentProps, ContentComponentProps, commonPropTypes, SizeValue, createShorthand } from '../../utils'; import { ShorthandValue, FluentComponentStaticProps, ComponentEventHandler } from '../../types'; import { BoxProps } from '../Box/Box'; @@ -103,6 +103,11 @@ export interface PillProps extends UIComponentProps, ContentComponentProps; + + /** + * Role to be set in the pill root element + */ + role?: AriaRole; } export type PillStylesProps = Required< @@ -138,6 +143,7 @@ export const Pill = (React.forwardRef((props, ref) = icon, selectable, selectedIndicator, + role, } = props; const [selected, setSelected] = useAutoControlled({ @@ -171,6 +177,7 @@ export const Pill = (React.forwardRef((props, ref) = actionable, selectable, selected, + role, }), rtl: context.rtl, }); From a08c6bfb97e95e40b6ee76fa85cf473e5307c8bc Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 5 May 2022 09:02:39 -0300 Subject: [PATCH 5/7] chore: handle dismiss and actionable --- .../accessibility/src/behaviors/Pill/pillBehavior.ts | 5 +++-- .../fluentui/react-northstar/src/components/Pill/Pill.tsx | 7 +++++-- .../src/themes/teams/components/Pill/pillStyles.ts | 4 ++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts index aa502afb6b4a5c..042a83349cf47c 100644 --- a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts @@ -15,12 +15,12 @@ export const pillBehavior: Accessibility = p => ({ }, keyActions: { root: { - ...(p.actionable && { + ...(p.dismissible && { performDismiss: { keyCombinations: [{ keyCode: keyboardKey.Delete }, { keyCode: keyboardKey.Backspace }], }, }), - ...(p.selectable && { + ...((p.selectable || p.actionable) && { performClick: { keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: SpacebarKey }], }, @@ -34,4 +34,5 @@ export type PillBehaviorProps = { selectable: boolean; selected: boolean; role: AriaRole; + dismissible: boolean; }; diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx index efffaa6b587429..179b0c0f0a7d08 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx @@ -111,7 +111,7 @@ export interface PillProps extends UIComponentProps, ContentComponentProps + Pick >; export const pillClassName = 'ui-pill'; @@ -144,6 +144,7 @@ export const Pill = (React.forwardRef((props, ref) = selectable, selectedIndicator, role, + onDismiss, } = props; const [selected, setSelected] = useAutoControlled({ @@ -178,6 +179,7 @@ export const Pill = (React.forwardRef((props, ref) = selectable, selected, role, + dismissible: Boolean(onDismiss), }), rtl: context.rtl, }); @@ -191,6 +193,7 @@ export const Pill = (React.forwardRef((props, ref) = disabled, selectable, selected, + actionable, }), mapPropsToInlineStyles: () => ({ className, @@ -242,7 +245,7 @@ export const Pill = (React.forwardRef((props, ref) = actionable, }), })} - {actionable && + {Boolean(onDismiss) && createShorthand(PillAction, action || {}, { overrideProps: (prevProps: PillActionProps & { onClick: (e: React.MouseEvent) => void }) => ({ onClick: e => { diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts index 6fca9cc0adc0ae..b3fbab955e8f35 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts @@ -82,6 +82,10 @@ export const pillStyles: ComponentSlotStylesPrepared Date: Thu, 5 May 2022 09:32:26 -0300 Subject: [PATCH 6/7] chore: add role button when selectable --- .../fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts index 042a83349cf47c..1b9c4a4aa6c112 100644 --- a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts @@ -5,7 +5,7 @@ import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'; export const pillBehavior: Accessibility = p => ({ attributes: { root: { - role: p.actionable ? 'button' : 'none', + role: p.actionable || p.selectable ? 'button' : 'none', tabIndex: p.actionable || p.selectable ? 0 : -1, [IS_FOCUSABLE_ATTRIBUTE]: p.actionable || p.selectable || p.role === 'option', ...(p.selectable && { From e5f3ddba193953618e08b2c486c5fb29f29c2bce Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 5 May 2022 12:52:42 -0300 Subject: [PATCH 7/7] chore: add changelog --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index e2f34094e8515c..f30739a2dac60b 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - fix `Tooltip` constrast style for pointing and subtle=false @yuanboxue-amber ([#22696](https://github.com/microsoft/fluentui/pull/22696)) - Vertical menu background color should not change on focus in dark theme @yuanboxue-amber ([#22707](https://github.com/microsoft/fluentui/pull/22707)) - Align `default` scheme colors between v0 and v9 @jurokapsiar ([#22699](https://github.com/microsoft/fluentui/pull/22699)) +- Fix `Pill` to be selectable by keyboard @chpalac ([#22839](https://github.com/microsoft/fluentui/pull/22839)) ### Documentation - Use https for Embed and Video examples @Hirse ([#22738](https://github.com/microsoft/fluentui/pull/22738))