fix: Remove screen reader specific navigation grid (#307)

cloudscape-design · Jul 2, 2024 · bd7f894 · bd7f894
1 parent f76c386
commit bd7f894
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 237 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "trailingComma": "all"
 }
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -62,11 +62,6 @@ Live announcements:
 * \`liveAnnouncementDndDiscarded(BoardProps.DndOperationType): string\` - the function to create a live announcement string to indicate commit of DnD ("reorder", "resize" or "insert").
 * \`liveAnnouncementDndCommitted(BoardProps.DndOperationType): string\` - the function to create a live announcement string to indicate discard of DnD ("reorder", "resize" or "insert").
 * \`liveAnnouncementItemRemoved(BoardProps.OperationStateRemove<D>): string\` - the function to create a live announcement string to indicate when item is removed.
-
-Navigation labels:
-* \`navigationAriaLabel\` (string) - the ARIA label for the accessible board navigation element.
-* \`navigationAriaDescription\` (string, optional) - the ARIA description for the accessible board navigation element.
-* \`navigationItemAriaLabel(null | BoardProps.Item<D>): string\` - the function to create the ARIA label for a navigation board item or an empty slot.
 ",
       "inlineType": {
         "name": "BoardProps.I18nStrings",
@@ -258,11 +253,6 @@ exports[`definition for items-palette matches the snapshot > items-palette 1`] =
 Live announcements:
 * \`liveAnnouncementDndStarted\` (string) - live announcement string to indicate start of DnD.
 * \`liveAnnouncementDndDiscarded\` (string) - live announcement string to indicate discard of DnD.
-
-Navigation labels:
-* \`navigationAriaLabel\` (string) - the ARIA label for the accessible board navigation element.
-* \`navigationAriaDescription\` (string, optional) - the ARIA description for the accessible board navigation element.
-* \`navigationItemAriaLabel(null | BoardProps.Item<D>): string\` - the function to create the ARIA label for a navigation board item.
 ",
       "inlineType": {
         "name": "ItemsPaletteProps.I18nStrings",

diff --git a/src/board/interfaces.ts b/src/board/interfaces.ts
@@ -61,11 +61,6 @@ export interface BoardProps<D = DataFallbackType> {
    * * `liveAnnouncementDndDiscarded(BoardProps.DndOperationType): string` - the function to create a live announcement string to indicate commit of DnD ("reorder", "resize" or "insert").
    * * `liveAnnouncementDndCommitted(BoardProps.DndOperationType): string` - the function to create a live announcement string to indicate discard of DnD ("reorder", "resize" or "insert").
    * * `liveAnnouncementItemRemoved(BoardProps.OperationStateRemove<D>): string` - the function to create a live announcement string to indicate when item is removed.
-   *
-   * Navigation labels:
-   * * `navigationAriaLabel` (string) - the ARIA label for the accessible board navigation element.
-   * * `navigationAriaDescription` (string, optional) - the ARIA description for the accessible board navigation element.
-   * * `navigationItemAriaLabel(null | BoardProps.Item<D>): string` - the function to create the ARIA label for a navigation board item or an empty slot.
    */
   i18nStrings: BoardProps.I18nStrings<D>;
 
@@ -113,8 +108,12 @@ export namespace BoardProps {
     liveAnnouncementDndCommitted: (operationType: DndOperationType) => string;
     liveAnnouncementDndDiscarded: (operationType: DndOperationType) => string;
     liveAnnouncementItemRemoved: (operation: ItemRemovedState<D>) => string;
+
+    /** @deprecated Has no effect. */
     navigationAriaLabel: string;
+    /** @deprecated Has no effect. */
     navigationAriaDescription?: string;
+    /** @deprecated Has no effect. */
     navigationItemAriaLabel: (item: null | BoardProps.Item<D>) => string;
   }
 

diff --git a/src/board/internal.tsx b/src/board/internal.tsx
@@ -13,7 +13,6 @@ import Grid from "../internal/grid";
 import { BoardItemDefinition, BoardItemDefinitionBase, Direction, ItemId, Rect } from "../internal/interfaces";
 import { ItemContainer, ItemContainerRef } from "../internal/item-container";
 import LiveRegion from "../internal/live-region";
-import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
 import {
   createPlaceholdersLayout,
   getDefaultColumnSpan,
@@ -206,10 +205,6 @@ export function InternalBoard<D>({
     dispatch({ type: "init-remove", items, itemsLayout, removedItem });
   };
 
-  function focusItem(itemId: ItemId) {
-    itemContainerRef.current[itemId].focusDragHandle();
-  }
-
   function onItemMove(direction: Direction) {
     if (transition) {
       dispatch({ type: "update-with-keyboard", direction });
@@ -223,15 +218,6 @@ export function InternalBoard<D>({
 
   return (
     <div ref={__internalRootRef} {...getDataAttributes(rest)}>
-      <ScreenReaderGridNavigation
-        items={items}
-        itemsLayout={itemsLayout}
-        ariaLabel={i18nStrings.navigationAriaLabel}
-        ariaDescription={i18nStrings.navigationAriaDescription}
-        itemAriaLabel={i18nStrings.navigationItemAriaLabel}
-        onActivateItem={focusItem}
-      />
-
       <div ref={containerRef} className={clsx(styles.root, { [styles.empty]: rows === 0 })}>
         {rows > 0 ? (
           <Grid

diff --git a/src/internal/screenreader-grid-navigation/__tests__/screenreader-grid-navigation.test.tsx b/src/internal/screenreader-grid-navigation/__tests__/screenreader-grid-navigation.test.tsx
diff --git a/src/internal/screenreader-grid-navigation/index.tsx b/src/internal/screenreader-grid-navigation/index.tsx
diff --git a/src/internal/screenreader-grid-navigation/styles.scss b/src/internal/screenreader-grid-navigation/styles.scss
diff --git a/src/items-palette/interfaces.ts b/src/items-palette/interfaces.ts
@@ -38,11 +38,6 @@ export interface ItemsPaletteProps<D = DataFallbackType> {
    * Live announcements:
    * * `liveAnnouncementDndStarted` (string) - live announcement string to indicate start of DnD.
    * * `liveAnnouncementDndDiscarded` (string) - live announcement string to indicate discard of DnD.
-   *
-   * Navigation labels:
-   * * `navigationAriaLabel` (string) - the ARIA label for the accessible board navigation element.
-   * * `navigationAriaDescription` (string, optional) - the ARIA description for the accessible board navigation element.
-   * * `navigationItemAriaLabel(null | BoardProps.Item<D>): string` - the function to create the ARIA label for a navigation board item.
    */
   i18nStrings: ItemsPaletteProps.I18nStrings<D>;
 }
@@ -57,8 +52,11 @@ export namespace ItemsPaletteProps {
   export interface I18nStrings<D> {
     liveAnnouncementDndStarted: string;
     liveAnnouncementDndDiscarded: string;
+    /** @deprecated Has no effect. */
     navigationAriaLabel: string;
+    /** @deprecated Has no effect. */
     navigationAriaDescription?: string;
+    /** @deprecated Has no effect. */
     navigationItemAriaLabel: (item: ItemsPaletteProps.Item<D>) => string;
   }
 }
diff --git a/src/items-palette/internal.tsx b/src/items-palette/internal.tsx
@@ -9,7 +9,6 @@ import { useDragSubscription } from "../internal/dnd-controller/controller";
 import { ItemId } from "../internal/interfaces";
 import { ItemContainer, ItemContainerRef } from "../internal/item-container";
 import LiveRegion from "../internal/live-region";
-import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
 import { ItemsPaletteProps } from "./interfaces";
 import styles from "./styles.css.js";
 
@@ -27,10 +26,6 @@ export function InternalItemsPalette<D>({
 
   const isRtl = () => getIsRtl(paletteRef.current);
 
-  function focusItem(itemId: ItemId) {
-    itemContainerRef.current[itemId].focusDragHandle();
-  }
-
   useDragSubscription("start", ({ draggableItem: { id } }) => {
     setDropState({ id });
 
@@ -71,23 +66,8 @@ export function InternalItemsPalette<D>({
     }
   });
 
-  const itemsLayout = {
-    items: items.map((it, index) => ({ id: it.id, x: 0, y: index, width: 1, height: 1 })),
-    columns: 1,
-    rows: items.length,
-  };
-
   return (
     <div ref={__internalRootRef} {...getDataAttributes(rest)}>
-      <ScreenReaderGridNavigation
-        items={items}
-        itemsLayout={itemsLayout}
-        ariaLabel={i18nStrings.navigationAriaLabel}
-        ariaDescription={i18nStrings.navigationAriaDescription}
-        itemAriaLabel={(item) => i18nStrings.navigationItemAriaLabel(item!)}
-        onActivateItem={focusItem}
-      />
-
       <div ref={paletteRef} className={styles.root}>
         <SpaceBetween size="l">
           {items.map((item) => (

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,7 @@
     "types": [],
     "lib": ["es2019", "dom", "dom.iterable"],
     "module": "ESNext",
-    "moduleResolution": "nodenext",
+    "moduleResolution": "Node",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,