fix: updated the wcag compliance for dashboard resource explorer pane #…

…2173
awslabs · Nov 21, 2023 · 26bd618 · 26bd618
1 parent bbab890
commit 26bd618
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/packages/dashboard/src/components/actions/index.tsx b/packages/dashboard/src/components/actions/index.tsx
@@ -62,7 +62,12 @@ const Actions: React.FC<ActionsProps> = ({
         {onSave && <Button onClick={handleOnSave}>Save</Button>}
         {editable && <Button onClick={handleOnReadOnly}>{readOnly ? 'Edit' : 'Preview'}</Button>}
         {editable && !readOnly && (
-          <Button onClick={() => setDashboardSettingsVisible(true)} iconName='settings' variant='icon' />
+          <Button
+            onClick={() => setDashboardSettingsVisible(true)}
+            iconName='settings'
+            variant='icon'
+            ariaLabel='Settings'
+          />
         )}
         <DashboardSettings isVisible={dashboardSettingsVisible} onClose={handleOnClose} />
       </SpaceBetween>

diff --git a/packages/dashboard/src/components/internalDashboard/collapsiblePanel.tsx b/packages/dashboard/src/components/internalDashboard/collapsiblePanel.tsx
@@ -47,6 +47,7 @@ export function CollapsiblePanel(props: CollapsiblePanelProps) {
               variant='icon'
               onClick={props.onCollapsedPanelClick}
               data-testid={`expanded-${props.side}-panel-button`}
+              ariaLabel={`Collapse panel ${props.side}`}
             />
           </Box>
           <Box float={iconSide} padding={{ [iconSide]: 'xs', vertical: 'xs' }}>

diff --git a/...amQueryEditor/modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTable.tsx b/...amQueryEditor/modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTable.tsx
@@ -69,6 +69,16 @@ export function ModeledDataStreamTable({
     }
   );
 
+  const paginationPropsWithAriaLabels = {
+    ...paginationProps,
+    ariaLabels: {
+      nextPageLabel: 'Next page',
+      paginationLabel: 'Modeled DataStream Table pagination',
+      previousPageLabel: 'Previous page',
+      pageLabel: (pageNumber: number) => `Page ${pageNumber}`,
+    },
+  };
+
   return (
     <Table
       {...collectionProps}
@@ -110,13 +120,16 @@ export function ModeledDataStreamTable({
           </SpaceBetween>
         </Box>
       }
-      pagination={<ModeledDataStreamTablePagination {...paginationProps} />}
+      pagination={<ModeledDataStreamTablePagination {...paginationPropsWithAriaLabels} />}
       preferences={<ModeledDataStreamTablePreferences preferences={preferences} updatePreferences={setPreferences} />}
       ariaLabels={{
         itemSelectionLabel: (isNotSelected, modeledDataStream) =>
           isNotSelected
             ? `Select modeled data stream ${modeledDataStream.name}`
             : `Deselect modeled data stream ${modeledDataStream.name}`,
+
+        allItemsSelectionLabel: (isNotSelected) =>
+          isNotSelected ? `Select modeled data stream` : `Deselect modeled data stream`,
       }}
     />
   );

diff --git a/packages/react-components/src/components/time-sync/timeSelection.tsx b/packages/react-components/src/components/time-sync/timeSelection.tsx
@@ -112,7 +112,9 @@ export const TimeSelection = ({ isPaginationEnabled }: { isPaginationEnabled?: b
           <Tooltip
             content={`Move back ${viewport && 'duration' in viewport ? viewport.duration : 'selected range'}`}
             position='bottom'
-            children={<Button iconName='caret-left-filled' onClick={handlePaginateBackward} />}
+            children={
+              <Button iconName='caret-left-filled' onClick={handlePaginateBackward} ariaLabel='Move backward' />
+            }
           />
         )}
 
@@ -130,7 +132,7 @@ export const TimeSelection = ({ isPaginationEnabled }: { isPaginationEnabled?: b
           <Tooltip
             content={`Move forward ${viewport && 'duration' in viewport ? viewport.duration : 'selected range'}`}
             position='bottom'
-            children={<Button iconName='caret-right-filled' onClick={handlePaginateForward} />}
+            children={<Button iconName='caret-right-filled' onClick={handlePaginateForward} ariaLabel='Move forward' />}
           />
         )}
       </SpaceBetween>