feat: accessibility improvements

Unleash · Sep 20, 2024 · ae2f35e · ae2f35e
1 parent bdfa806
commit ae2f35e
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/frontend/src/component/personalDashboard/WelcomeDialog.tsx b/frontend/src/component/personalDashboard/WelcomeDialog.tsx
@@ -4,6 +4,7 @@ import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
 import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
 import { ThemeMode } from '../common/ThemeMode/ThemeMode';
 import onboardingConcepts from 'assets/img/onboardingConcepts.png';
+import { ScreenReaderOnly } from '../common/ScreenReaderOnly/ScreenReaderOnly';
 
 const StyledDialog = styled(Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
@@ -69,6 +70,37 @@ export const WelcomeDialog: FC<IWelcomeDialogProps> = ({ open, onClose }) => {
                     in order to work effectively with Unleash
                 </Box>
                 <StyledImg src={onboardingConcepts} />
+                <ScreenReaderOnly>
+                    <h2>Environments</h2>
+                    <p>
+                        Unleash comes with two global environments. Once you
+                        create a feature flag it will exist in all environments,
+                        but it will hold different configuration per
+                        environment.
+                    </p>
+                    <h2>Projects</h2>
+                    <p>
+                        Feature flags live in projects. When SDKs connect to
+                        Unleash they use an environment /project combination in
+                        order to retrieve the correct configuration. You can
+                        also use projects to control access level for feature
+                        flags.
+                    </p>
+                    <h2>Feature flags</h2>
+                    <p>
+                        Flags live in projects and across all configured
+                        environments. Each flag will have separate configuration
+                        in each environment enabled for the project that they
+                        live in.
+                    </p>
+                    <h2>Activation strategy</h2>
+                    <p>
+                        Activation strategies are rulesets that decide whether
+                        or not a feature flag should be enabled in a specific
+                        environment. You can configure as many rulesets as you
+                        want per environment.
+                    </p>
+                </ScreenReaderOnly>
                 <Button variant='contained' onClick={onClose}>
                     Got it, let's get started
                 </Button>