fix: accessibility fixes

awslabs · Dec 5, 2023 · 4caa534 · 4caa534
1 parent c30d68b
commit 4caa534
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/packages/dashboard/src/components/widgets/tile/tile.tsx b/packages/dashboard/src/components/widgets/tile/tile.tsx
@@ -81,7 +81,6 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
 
   return (
     <div
-      role='widget'
       aria-description='widget tile'
       className='widget-tile'
       style={{

diff --git a/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx b/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx
@@ -257,11 +257,16 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
       </Tooltip>
       <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <Tooltip content={onMouseOver && isPropertyVisible ? 'hide' : 'unhide'} position='top'>
-          <Button onClick={onToggleAssetQuery} variant='icon' iconSvg={propertyVisibilityIcon} />
+          <Button
+            ariaLabel='hide un-hide property'
+            onClick={onToggleAssetQuery}
+            variant='icon'
+            iconSvg={propertyVisibilityIcon}
+          />
         </Tooltip>
       </div>
 
-      <Button onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />
+      <Button ariaLabel='delete property' onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />
     </SpaceBetween>
   );
 

diff --git a/packages/dashboard/src/customization/propertiesSections/shared/colorPicker.tsx b/packages/dashboard/src/customization/propertiesSections/shared/colorPicker.tsx
@@ -10,6 +10,7 @@ const ColorPicker: FC<{ color: string; updateColor: (newColor: string) => void }
   return (
     <div className='color-picker-container' style={{ backgroundColor: color }} {...other}>
       <input
+        aria-label='color picker'
         type='color'
         value={color}
         onChange={(e) => {

diff --git a/packages/dashboard/src/customization/widgets/components/no-chart-data.tsx b/packages/dashboard/src/customization/widgets/components/no-chart-data.tsx
@@ -13,7 +13,6 @@ interface NoChartDataProps {
 const NoChartData = ({ icon, emptyStateText }: NoChartDataProps) => {
   return (
     <div
-      role='empty widget'
       aria-description='empty widget tile'
       className='no-chart-data-empty-state'
       style={{