Merge pull request #1389 from City-of-Helsinki/hds-2069-select-docs-2…

…51024

(Release-4.0.0) HDS-2069: Select docs

CHANGELOG.md

@@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [SideNavigation] ariaLabel prop changed to "aria-label"
 - [SkipLink] ariaLabel prop changed to "aria-label"
 - [CookieConsent] Rewritten CookieConsent component
+- [Dropdown/Combobox] replaced with Select
+- [Dropdown/Select] replaced with Select
 
 #### Added
 
@@ -64,6 +66,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Button] Added SCSS support and scss files are exported too. See documentation about usage.
 - [Table] Added SCSS support and scss files are exported too. See documentation about usage.
 - [Notification] Added SCSS support and scss files are exported too. See documentation about usage.
+- [Select] New Select component replaces the old one
 
 #### Changed
 

packages/react/src/components/cookieConsent/CookieConsent.stories.tsx

@@ -14,7 +14,6 @@ import {
 import { StoryComponent } from './components/StoryComponent';
 // importing the json because load won't work in e2e
 import siteSettings from '../cookieConsentCore/example/helfi_sitesettings.json';
-import { ToggleButton } from '../toggleButton/ToggleButton';
 import { cookieEventType } from '../cookieConsentCore/cookieConsentCore';
 
 export default {
@@ -81,36 +80,13 @@ const Actions = () => {
   );
 };
 
-const ThemeButton = (props: { current: 'bus' | 'black'; onChange: (selected: 'bus' | 'black') => void }) => {
-  const { current, onChange } = props;
-  const changedTheme = current === 'bus' ? 'black' : 'bus';
-  return (
-    <div>
-      <div>Current theme</div>
-      <div style={{ display: 'flex', gap: 'var(--spacing-s)', alignItems: 'center' }}>
-        <span>Black</span>
-        <ToggleButton
-          id="bus-theme"
-          aria-label={`change cookie consent label to ${changedTheme}`}
-          label=""
-          checked={current === 'bus'}
-          onChange={() => onChange(changedTheme)}
-        />
-        <span>Bus</span>
-      </div>
-      <div>Theme is only applied to the cookie consent banner and page</div>
-    </div>
-  );
-};
-
 export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {}) => {
   const languages: LanguageOption[] = [
     { label: 'Suomi', value: 'fi', isPrimary: true },
     { label: 'Svenska', value: 'sv', isPrimary: true },
     { label: 'English', value: 'en', isPrimary: true },
   ];
   const [language, updateLang] = useState<string>(languages[0].value);
-  const [theme, updateTheme] = useState<'bus' | 'black'>('bus');
   const onLangChange = (newLanguage: string) => {
     updateLang(newLanguage);
   };
@@ -123,7 +99,7 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
     <CookieConsentContextProvider
       onChange={onChange}
       // focusing the logo link, because the tab component loses focus on re-render.
-      options={{ language, focusTargetSelector: '#actionbar > a', theme }}
+      options={{ language, focusTargetSelector: '#actionbar > a' }}
       siteSettings={{ ...siteSettings, remove: false, monitorInterval: 0 }}
     >
       <Header languages={languages} onDidChangeLanguage={onLangChange} defaultLanguage={language}>
@@ -178,8 +154,6 @@ export const Example = ({ currentTabIndex }: { currentTabIndex?: number } = {})
           <p>Banner is never shown on this page unless shown previously.</p>
           <p>Current consents can also be changed my calling the window.hds.cookieConsent instance.</p>
           <Actions />
-          <p>Theme can also be changed like language.</p>
-          <ThemeButton current={theme} onChange={updateTheme} />
           <span data-testid="actions-tab" />
         </Tabs.TabPanel>
       </Tabs>

site/src/data/components.json

@@ -206,7 +206,7 @@
       "height": 180,
       "width": 280
     }
-  },  
+  },
   {
     "name": "Icon",
     "text": "Icons are used for providing visual cues and highlighting actions.",
@@ -389,6 +389,19 @@
       "width": 280
     }
   },
+  {
+    "name": "Select",
+    "text": "Select offers a user a list of options, of which one or multiple can be selected.",
+    "linkboxAriaLabel": "Select component",
+    "linkAriaLabel": "Go to the Select component page",
+    "href": "/components/select",
+    "imgProps": {
+      "src": "/images/components/overview/select@2x.png",
+      "alt": "An illustration of the Select component.",
+      "height": 180,
+      "width": 280
+    }
+  },
   {
     "name": "SelectionGroup",
     "text": "Selection group allows grouping form selection elements to each other.",

site/src/docs/components/select/accessibility.mdx

@@ -0,0 +1,22 @@
+---
+slug: '/components/select/accessibility'
+title: 'Select - Accessibility'
+---
+
+import TabsLayout from './tabs.mdx';
+
+export default ({ children, pageContext }) => <TabsLayout pageContext={pageContext}>{children}</TabsLayout>;
+
+## Accessibility
+
+### Pay attention to
+
+- Select should be only used as form controls or as value pickers. Do not use select for menus or navigation since they cannot contain links or buttons.
+- Consider carefully other options like selectionGroup before implementing complex select component. Especially multiselect with groups and filtering is a complex component, so always be considerate when using it.
+- Placeholder text can provide hints or examples for what the user should select. However, placeholders can sometimes appear as if the field is already filled, causing users to overlook them. It’s better to provide clear instructions through the label or assistive text to ensure users have the information they need.
+- In the case of an erroneous selection, aim to provide clear instructions to the user how to correct the mistake. Always provide text description of the error. In select it is usually possible to filter selectable options for the user to avoid errors completely.
+- If `texts.label` is not set, provide an alternative element that is used as a label. It must have a `for` attribute that points to the `id` of the main button.
+
+### Known issues
+
+- If the Select has groups and an input field, the main button is not accessible when using Talkback with Firefox. The button has `role="combobox"` that makes it invisible.