Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/@react-aria/menu/src/useMenuItem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export interface MenuItemAria {
/** Props for the keyboard shortcut text element inside the item, if any. */
keyboardShortcutProps: DOMAttributes,

// TODO: this is quite specific, but description and keyboardShortcut above are also very specific
/** Props for the descriptive element in the end slot inside the menu item (e.g. info icon, chevron). */
endSlotProps: DOMAttributes,

Comment on lines +36 to +39
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm quite iffy about this, as stated above it is very specific. I think ideally we'd give the user a way to make arbitrary child elements in a MenuItem part of that MenuItem's aria-describedby. I could've opted to just allow the user to provide a generic aria-describedBy to the menu item and then apply ids to various other elements but we already have description and keyboard shortcut handled so figured we may be able to make end slot a thing too

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also note that due to how collection items work in RAC (aka UnavailableMenuItemTrigger in RAC is a collection branch that only renders the popover child as is), I believe that RAC level change is unavoidable since there isn't a good way to generate a id at the S2 UnavailableMenuItemTrigger level and propagate it down via context

/** Whether the item is currently focused. */
isFocused: boolean,
/** Whether the item is keyboard focused. */
Expand Down Expand Up @@ -170,14 +174,15 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
let labelId = useSlotId();
let descriptionId = useSlotId();
let keyboardId = useSlotId();
let endSlotId = useSlotId();

let ariaProps = {
id,
'aria-disabled': isDisabled || undefined,
role,
'aria-label': props['aria-label'],
'aria-labelledby': labelId,
'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,
'aria-describedby': [descriptionId, keyboardId, endSlotId].filter(Boolean).join(' ') || undefined,
'aria-controls': props['aria-controls'],
'aria-haspopup': hasPopup,
'aria-expanded': props['aria-expanded']
Expand Down Expand Up @@ -342,6 +347,9 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
keyboardShortcutProps: {
id: keyboardId
},
endSlotProps: {
id: endSlotId
},
isFocused,
isFocusVisible: isFocused && selectionManager.isFocused && isFocusVisible() && !isTriggerExpanded,
isSelected,
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-aria/menu/src/useSubmenuTrigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface AriaSubmenuTriggerProps {
shouldUseVirtualFocus?: boolean
}

interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key' | 'onAction'> {
/** Whether the submenu trigger is in an expanded state. */
isOpen: boolean
}
Expand Down
18 changes: 17 additions & 1 deletion packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
* governing permissions and limitations under the License.
*/

import {BlendModes, DynamicExample, Example, KeyboardShortcuts, PublishAndExport} from '../stories/Menu.stories';
import {BlendModes, DynamicExample, Example, KeyboardShortcuts, PublishAndExport, UnavailableMenuItem} from '../stories/Menu.stories';
import {expect} from '@storybook/jest';
import {Menu} from '../src';
import type {Meta, StoryObj} from '@storybook/react';
import {userEvent, within} from '@storybook/test';
Expand Down Expand Up @@ -56,3 +57,18 @@ export const Dynamic: Story = {
...DynamicExample,
play: async (context) => await Default.play!(context)
};

export const WithUnavailableItem: Story = {
...UnavailableMenuItem,
play: async ({canvasElement}) => {
await userEvent.tab();
await userEvent.keyboard('{ArrowDown}');
let body = canvasElement.ownerDocument.body;
await within(body).findByRole('menu');
await userEvent.keyboard('{ArrowDown}');
await userEvent.keyboard('{ArrowDown}');
await userEvent.keyboard('{ArrowRight}');
let menus = await within(body).findAllByRole('dialog');
expect(menus).toHaveLength(2);
}
};
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/ar-AE.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(اختياري)",
"label.(required)": "(مطلوب)",
"menu.moreActions": "المزيد من الإجراءات",
"menu.unavailable": "غير مُتوفر، قُم بالتوسيع للحصول على التفاصيل",
"notificationbadge.indicatorOnly": "نشاط جديد",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "تحديد…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/bg-BG.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(незадължително)",
"label.(required)": "(задължително)",
"menu.moreActions": "Повече действия",
"menu.unavailable": "Недостъпно, разгънете за подробности",
"notificationbadge.indicatorOnly": "Нова дейност",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Изберете…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/cs-CZ.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(volitelně)",
"label.(required)": "(požadováno)",
"menu.moreActions": "Další akce",
"menu.unavailable": "Není k dispozici, rozbalením zobrazíte podrobnosti",
"notificationbadge.indicatorOnly": "Nová aktivita",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Vybrat…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/da-DK.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(valgfrit)",
"label.(required)": "(obligatorisk)",
"menu.moreActions": "Flere handlinger",
"menu.unavailable": "Ikke tilgængelig, udvid for detaljer",
"notificationbadge.indicatorOnly": "Ny aktivitet",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Vælg…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/de-DE.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(optional)",
"label.(required)": "(erforderlich)",
"menu.moreActions": "Mehr Aktionen",
"menu.unavailable": "Nicht verfügbar, für Details erweitern",
"notificationbadge.indicatorOnly": "Neue Aktivität",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Auswählen…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/el-GR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(προαιρετικό)",
"label.(required)": "(απαιτείται)",
"menu.moreActions": "Περισσότερες ενέργειες",
"menu.unavailable": "Μη διαθέσιμο, ανάπτυξη για λεπτομέρειες",
"notificationbadge.indicatorOnly": "Νέα δραστηριότητα",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Επιλογή…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(optional)",
"label.(required)": "(required)",
"menu.moreActions": "More actions",
"menu.unavailable": "Unavailable, expand for details",
"notificationbadge.indicatorOnly": "New activity",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Select…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/es-ES.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcional)",
"label.(required)": "(obligatorio)",
"menu.moreActions": "Más acciones",
"menu.unavailable": "No disponible, ampliar para más detalles",
"notificationbadge.indicatorOnly": "Nueva actividad",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Seleccione…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/et-EE.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(valikuline)",
"label.(required)": "(nõutav)",
"menu.moreActions": "Veel toiminguid",
"menu.unavailable": "Pole kättesaadav, üksikasjade vaatamiseks laiendage",
"notificationbadge.indicatorOnly": "Uus tegevus",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Valige…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/fi-FI.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(valinnainen)",
"label.(required)": "(pakollinen)",
"menu.moreActions": "Lisää toimintoja",
"menu.unavailable": "Ei saatavilla, laajenna saadaksesi lisätietoja",
"notificationbadge.indicatorOnly": "Uusi toiminta",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Valitse…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(facultatif)",
"label.(required)": "(requis)",
"menu.moreActions": "Autres actions",
"menu.unavailable": "Indisponible, développer pour plus de détails",
"notificationbadge.indicatorOnly": "Nouvelle activité",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Sélectionner…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/he-IL.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(אופציונלי)",
"label.(required)": "(נדרש)",
"menu.moreActions": "פעולות נוספות",
"menu.unavailable": "לא זמין, הרחב לפרטים",
"notificationbadge.indicatorOnly": "פעילות חדשה",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "בחר…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/hr-HR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcionalno)",
"label.(required)": "(obvezno)",
"menu.moreActions": "Dodatne radnje",
"menu.unavailable": "Nije dostupno, proširi za detalje",
"notificationbadge.indicatorOnly": "Nova aktivnost",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Odaberite…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/hu-HU.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcionális)",
"label.(required)": "(kötelező)",
"menu.moreActions": "További lehetőségek",
"menu.unavailable": "Nem érhető el, a részletekért bontsa ki",
"notificationbadge.indicatorOnly": "Új tevékenység",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Kiválasztás…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/it-IT.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(facoltativo)",
"label.(required)": "(obbligatorio)",
"menu.moreActions": "Altre azioni",
"menu.unavailable": "Non disponibile, espandi per i dettagli",
"notificationbadge.indicatorOnly": "Nuova attività",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Seleziona…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(オプション)",
"label.(required)": "(必須)",
"menu.moreActions": "その他のアクション",
"menu.unavailable": "利用できません。詳しくは、展開して確認してください",
"notificationbadge.indicatorOnly": "新規アクティビティ",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "選択…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/ko-KR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(선택 사항)",
"label.(required)": "(필수 사항)",
"menu.moreActions": "기타 액션",
"menu.unavailable": "사용할 수 없음, 자세히 보려면 펼치기",
"notificationbadge.indicatorOnly": "새로운 활동",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "선택…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/lt-LT.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(pasirenkama)",
"label.(required)": "(privaloma)",
"menu.moreActions": "Daugiau veiksmų",
"menu.unavailable": "Nepasiekiama, norėdami gauti daugiau informacijos, išskleiskite",
"notificationbadge.indicatorOnly": "Nauja veikla",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Pasirinkite…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/lv-LV.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(neobligāti)",
"label.(required)": "(obligāti)",
"menu.moreActions": "Citas darbības",
"menu.unavailable": "Nav pieejams, izvērsiet, lai skatītu sīkāku informāciju",
"notificationbadge.indicatorOnly": "Jauna aktivitāte",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Izvēlēties…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/nb-NO.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(valgfritt)",
"label.(required)": "(obligatorisk)",
"menu.moreActions": "Flere handlinger",
"menu.unavailable": "Utilgjengelig, utvid for detaljer",
"notificationbadge.indicatorOnly": "Ny aktivitet",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Velg …",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/nl-NL.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(optioneel)",
"label.(required)": "(vereist)",
"menu.moreActions": "Meer handelingen",
"menu.unavailable": "Niet beschikbaar, uitvouwen voor meer informatie",
"notificationbadge.indicatorOnly": "Nieuwe activiteit",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Selecteren…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/pl-PL.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcjonalne)",
"label.(required)": "(wymagane)",
"menu.moreActions": "Więcej akcji",
"menu.unavailable": "Niedostępne, rozwiń, aby zobaczyć szczegóły",
"notificationbadge.indicatorOnly": "Nowa aktywność",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Zaznacz…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/pt-BR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcional)",
"label.(required)": "(obrigatório)",
"menu.moreActions": "Mais ações",
"menu.unavailable": "Indisponível. Expanda para ver os detalhes",
"notificationbadge.indicatorOnly": "Nova atividade",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Selecionar…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/pt-PT.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcional)",
"label.(required)": "(obrigatório)",
"menu.moreActions": "Mais ações",
"menu.unavailable": "Indisponível, expandir para mais detalhes",
"notificationbadge.indicatorOnly": "Nova atividade",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Selecionar…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/ro-RO.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opţional)",
"label.(required)": "(obligatoriu)",
"menu.moreActions": "Mai multe acțiuni",
"menu.unavailable": "Indisponibil, extindeți pentru detalii",
"notificationbadge.indicatorOnly": "Activitate nouă",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Selectați…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/ru-RU.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(дополнительно)",
"label.(required)": "(обязательно)",
"menu.moreActions": "Дополнительные действия",
"menu.unavailable": "Недоступно, разверните для подробностей",
"notificationbadge.indicatorOnly": "Новая активность",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Выбрать…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/sk-SK.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(nepovinné)",
"label.(required)": "(povinné)",
"menu.moreActions": "Ďalšie akcie",
"menu.unavailable": "Nedostupné, rozbaľte podrobnosti",
"notificationbadge.indicatorOnly": "Nová aktivita",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Vybrať…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/sl-SI.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opcijsko)",
"label.(required)": "(obvezno)",
"menu.moreActions": "Več možnosti",
"menu.unavailable": "Ni na voljo, razširite za podrobnosti",
"notificationbadge.indicatorOnly": "Nova dejavnost",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Izberite…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/sr-SP.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(opciono)",
"label.(required)": "(obavezno)",
"menu.moreActions": "Dodatne radnje",
"menu.unavailable": "Nije dostupno, proširite za detalje",
"notificationbadge.indicatorOnly": "Nova aktivnost",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Izaberite...",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/sv-SE.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(valfritt)",
"label.(required)": "(krävs)",
"menu.moreActions": "Fler åtgärder",
"menu.unavailable": "Ej tillgänglig, expandera för mer information",
"notificationbadge.indicatorOnly": "Ny aktivitet",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Välj…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/tr-TR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(isteğe bağlı)",
"label.(required)": "(gerekli)",
"menu.moreActions": "Daha fazla eylem",
"menu.unavailable": "Kullanılamıyor, ayrıntıları görmek için genişletin",
"notificationbadge.indicatorOnly": "Yeni etkinlik",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Seçin…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/uk-UA.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(необов’язково)",
"label.(required)": "(обов’язково)",
"menu.moreActions": "Більше дій",
"menu.unavailable": "Недоступно, розгорніть для докладнішої інформації",
"notificationbadge.indicatorOnly": "Нова активність",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "Вибрати…",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(可选)",
"label.(required)": "(必填)",
"menu.moreActions": "更多操作",
"menu.unavailable": "不可用,展开以查看详细信息",
"notificationbadge.indicatorOnly": "新活动",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "选择...",
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/intl/zh-TW.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"label.(optional)": "(選填)",
"label.(required)": "(必填)",
"menu.moreActions": "更多動作",
"menu.unavailable": "無法使用,展開以取得詳細資料",
"notificationbadge.indicatorOnly": "新活動",
"notificationbadge.plus": "{notifications}+",
"picker.placeholder": "選取…",
Expand Down
Loading