feat: added accessible labels to different toolbar container #2510

awslabs · Feb 28, 2024 · ce5af6f · ce5af6f
1 parent 06b5ee5
commit ce5af6f
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 75 deletions.
diff --git a/packages/dashboard/src/components/actions/index.tsx b/packages/dashboard/src/components/actions/index.tsx
@@ -88,27 +88,33 @@ const Actions: React.FC<ActionsProps> = ({
 
   return (
     <Box padding={{ top: 'xxs' }} data-testid='dashboard-actions'>
-      <SpaceBetween size='s' direction='horizontal'>
-        {onSave && <Button onClick={handleOnSave}>Save</Button>}
-        {editable && (
-          <CustomOrangeButton
-            title={readOnly ? 'Edit' : 'Preview'}
-            handleClick={handleOnReadOnly}
+      <div
+        aria-label='dashboard actions'
+        //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <SpaceBetween size='s' direction='horizontal'>
+          {onSave && <Button onClick={handleOnSave}>Save</Button>}
+          {editable && (
+            <CustomOrangeButton
+              title={readOnly ? 'Edit' : 'Preview'}
+              handleClick={handleOnReadOnly}
+            />
+          )}
+          {editable && !readOnly && (
+            <Button
+              onClick={() => setSettingVisibility(true)}
+              iconName='settings'
+              variant='icon'
+              ariaLabel='Dashboard settings'
+            />
+          )}
+          <DashboardSettings
+            isVisible={dashboardSettingsVisible}
+            onClose={() => setSettingVisibility(false)}
           />
-        )}
-        {editable && !readOnly && (
-          <Button
-            onClick={() => setSettingVisibility(true)}
-            iconName='settings'
-            variant='icon'
-            ariaLabel='Dashboard settings'
-          />
-        )}
-        <DashboardSettings
-          isVisible={dashboardSettingsVisible}
-          onClose={() => setSettingVisibility(false)}
-        />
-      </SpaceBetween>
+        </SpaceBetween>
+      </div>
     </Box>
   );
 };

diff --git a/packages/dashboard/src/components/assetModelSelection/assetModelSelection.tsx b/packages/dashboard/src/components/assetModelSelection/assetModelSelection.tsx
@@ -33,7 +33,11 @@ export const AssetModelSelection = ({ client }: AssetModelSelectionOptions) => {
   if (!hasModelBasedQuery || !assetModelId) return null;
 
   return (
-    <div className='asset-model-selection'>
+    <div
+      className='asset-model-selection'
+      //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+    >
       <h4 style={{ color: colorTextBodyDefault }}>
         <label htmlFor={assetModelSelectionControlId}>Assets</label>
       </h4>

diff --git a/packages/dashboard/src/components/internalDashboard/index.tsx b/packages/dashboard/src/components/internalDashboard/index.tsx
@@ -280,7 +280,13 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
             setUserSelect(isDragging ? disabledUserSelect : defaultUserSelect)
           }
         />
-        <div style={dashboardToolbarBottomBorder} className='dashboard-toolbar'>
+        <div
+          style={dashboardToolbarBottomBorder}
+          className='dashboard-toolbar'
+          aria-label='edit mode dashboard toolbar'
+          //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+        >
           <Box float='left' padding='s'>
             <ComponentPalette />
           </Box>
@@ -334,6 +340,9 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
           <div
             style={dashboardToolbarBottomBorder}
             className='dashboard-toolbar-read-only'
+            aria-label='preview mode dashboard toolbar'
+            //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
           >
             <Box float='left' padding='s'>
               <AssetModelSelection client={iotSiteWiseClient} />

diff --git a/packages/dashboard/src/components/palette/component.tsx b/packages/dashboard/src/components/palette/component.tsx
@@ -35,7 +35,11 @@ const PaletteComponent: React.FC<PaletteComponentProps> = ({
   );
 
   return (
-    <li ref={node}>
+    <li
+      ref={node}
+      //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+    >
       <div aria-label={`add ${name} widget`} role='button' ref={dragRef}>
         <PaletteComponentIcon widgetName={name} Icon={IconComponent} />
       </div>

diff --git a/packages/dashboard/src/components/palette/index.tsx b/packages/dashboard/src/components/palette/index.tsx
@@ -27,10 +27,14 @@ const Divider = () => <div style={divider} />;
 
 const Palette = () => {
   return (
-    <div className='widget-panel'>
+    <div
+      className='widget-panel'
+      //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+    >
       <h4 style={widgetFont}>Widgets</h4>
       <Divider />
-      <ul className='component-palette-widgets'>
+      <ul className='component-palette-widgets' aria-label='widget panel'>
         {ComponentLibraryComponentOrdering.map((widgetType) => {
           const [name, iconComponent] =
             ComponentLibraryComponentMap[widgetType];

diff --git a/packages/react-components/src/components/time-sync/timeSelection.tsx b/packages/react-components/src/components/time-sync/timeSelection.tsx
@@ -150,57 +150,63 @@ export const TimeSelection = ({
   } = messages;
 
   return (
-    <FormField label={!hideTitle ? title : ''} data-testid='time-selection'>
-      <SpaceBetween direction='horizontal' size='xxs'>
-        {isPaginationEnabled && (
-          <Tooltip
-            content={`Move back ${
-              viewport && 'duration' in viewport
-                ? viewport.duration
-                : 'selected range'
-            }`}
-            position='bottom'
-            children={
-              <Button
-                iconName='caret-left-filled'
-                onClick={handlePaginateBackward}
-                ariaLabel='Move backward'
-              />
-            }
-          />
-        )}
+    <div
+      aria-label='viewport picker'
+      //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+    >
+      <FormField label={!hideTitle ? title : ''} data-testid='time-selection'>
+        <SpaceBetween direction='horizontal' size='xxs'>
+          {isPaginationEnabled && (
+            <Tooltip
+              content={`Move back ${
+                viewport && 'duration' in viewport
+                  ? viewport.duration
+                  : 'selected range'
+              }`}
+              position='bottom'
+              children={
+                <Button
+                  iconName='caret-left-filled'
+                  onClick={handlePaginateBackward}
+                  ariaLabel='Move backward'
+                />
+              }
+            />
+          )}
 
-        <DateRangePicker
-          expandToViewport={true}
-          onChange={handleChangeDateRange}
-          value={viewportToDateRange(viewport)}
-          showClearButton={false}
-          relativeOptions={relativeOptions}
-          isValidRange={rangeValidator({
-            dateRangeIncompleteError,
-            dateRangeInvalidError,
-          })}
-          i18nStrings={i18nStrings}
-          placeholder={placeholder}
-        />
-        {isPaginationEnabled && (
-          <Tooltip
-            content={`Move forward ${
-              viewport && 'duration' in viewport
-                ? viewport.duration
-                : 'selected range'
-            }`}
-            position='bottom'
-            children={
-              <Button
-                iconName='caret-right-filled'
-                onClick={handlePaginateForward}
-                ariaLabel='Move forward'
-              />
-            }
+          <DateRangePicker
+            expandToViewport={true}
+            onChange={handleChangeDateRange}
+            value={viewportToDateRange(viewport)}
+            showClearButton={false}
+            relativeOptions={relativeOptions}
+            isValidRange={rangeValidator({
+              dateRangeIncompleteError,
+              dateRangeInvalidError,
+            })}
+            i18nStrings={i18nStrings}
+            placeholder={placeholder}
           />
-        )}
-      </SpaceBetween>
-    </FormField>
+          {isPaginationEnabled && (
+            <Tooltip
+              content={`Move forward ${
+                viewport && 'duration' in viewport
+                  ? viewport.duration
+                  : 'selected range'
+              }`}
+              position='bottom'
+              children={
+                <Button
+                  iconName='caret-right-filled'
+                  onClick={handlePaginateForward}
+                  ariaLabel='Move forward'
+                />
+              }
+            />
+          )}
+        </SpaceBetween>
+      </FormField>
+    </div>
   );
 };