Accessibility updates

wri · Dec 12, 2024 · f953605 · f953605
1 parent 2305fce
commit f953605
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -122,5 +122,6 @@ function App() {
 - [LayerSidebar](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerSidebar)
 
 ### Legend
+
 - [LayerParameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LayerParameters)
 - [Qualitative](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/Qualitative)
diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx
@@ -38,11 +38,12 @@ const LayerItem = ({
             <LayerCaption aria-label={caption}>{caption}</LayerCaption>
           </SwitchContent>
           <Switch
-            aria-label={label}
+            aria-label={`${label}, ${caption}`}
             name={name}
             disabled={disabled}
             defaultChecked={isDefaultSelected}
             onChange={onChange}
+            role='switch'
           />
         </SwitchContainer>
       ) : (

diff --git a/src/components/Layer/LayerPanel/index.tsx b/src/components/Layer/LayerPanel/index.tsx
@@ -20,9 +20,11 @@ const LayerPanel = ({
   children,
 }: LayerPanelProps) => (
   <LayerPanelContainer>
-    <LayerPanelHeader>
-      <LayerPanelTitle>{title}</LayerPanelTitle>
-      <LayerPanelDescription>{description}</LayerPanelDescription>
+    <LayerPanelHeader role='complementary'>
+      <LayerPanelTitle aria-label={title}>{title}</LayerPanelTitle>
+      <LayerPanelDescription aria-label={description}>
+        {description}
+      </LayerPanelDescription>
     </LayerPanelHeader>
     {buttonTabs && buttonTabs.length > 0 ? (
       <TabBar

diff --git a/src/components/Layer/LayerPanel/styled.ts b/src/components/Layer/LayerPanel/styled.ts
@@ -6,12 +6,12 @@ export const LayerPanelContainer = styled.div`
   background-color: ${getThemedColor('neutral', 100)};
 `
 
-export const LayerPanelHeader = styled.div`
+export const LayerPanelHeader = styled.aside`
   padding: 16px 16px 20px 16px;
   border-bottom: 1px solid ${getThemedColor('neutral', 300)};
 `
 
-export const LayerPanelTitle = styled.p`
+export const LayerPanelTitle = styled.h2`
   color: ${getThemedColor('neutral', 700)};
   font-weight: 700;
   font-size: 20px;

diff --git a/src/components/NavigationRail/index.tsx b/src/components/NavigationRail/index.tsx
@@ -20,8 +20,10 @@ const NavigationRail = ({
   onOpenChange,
 }: NavigationRailProps) => {
   const [hideSidebar, setHideSidebar] = useState(false)
+  const [seletedTab, setSeletedTab] = useState(defaultValue || tabs?.[0]?.value)
 
   const handleOnTabClick = (selectedValue: string) => {
+    setSeletedTab(selectedValue)
     if (onTabClick) {
       onTabClick(selectedValue)
     }
@@ -40,11 +42,16 @@ const NavigationRail = ({
       <NavigationRailContainer>
         <Tabs.Root
           defaultValue={defaultValue || tabs?.[0]?.value}
-          orientation='vertical'
+          orientation='horizontal'
           width='full'
           onFocusChange={({ focusedValue }) => handleOnTabClick(focusedValue)}
+          role='tablist'
         >
-          <Tabs.List alignItems='center' border='none'>
+          <Tabs.List
+            alignItems='center'
+            border='none'
+            style={{ flexDirection: 'column' }}
+          >
             {tabs.map((tab) => (
               <NavigationRailTab
                 key={tab.label}
@@ -85,7 +92,10 @@ const NavigationRail = ({
       {children ? (
         <Collapsible.Root defaultOpen open={!hideSidebar}>
           <Collapsible.Content>
-            <NavigationRailChildrenContainer>
+            <NavigationRailChildrenContainer
+              role='tabpanel'
+              aria-labelledby={seletedTab}
+            >
               {children}
             </NavigationRailChildrenContainer>
           </Collapsible.Content>

diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
@@ -35,7 +35,7 @@ const Switch = ({
         {isLabelOnLeft && children != null ? (
           <ChakraSwitch.Label>{children}</ChakraSwitch.Label>
         ) : null}
-        <ChakraSwitch.HiddenInput />
+        <ChakraSwitch.HiddenInput style={{ width: '42px', height: '26px' }} />
         <div className='chakra-switch__control-container'>
           <ChakraSwitch.Control>
             <ChakraSwitch.Thumb>