Add semantics to all input fields

docs/changelog/README.md

@@ -2,6 +2,7 @@
 
 # Unreleased
 
+- :gem: Add semantics to all input fields.
 - :gem: Normalize styling across browsers.
 - :gem: Replace the (hamburger) menu button with a custom Button component.
 

src/styles/_base.scss

@@ -50,15 +50,15 @@ button,
 }
 
 [type="search"] {
-  /* Correct the odd appearance in Chrome and Safari */
-  -webkit-appearance: textfield;
-
   /* Correct the outline style in Safari */
   outline-offset: -2px;
 }
 
-[type="search"]::-webkit-search-decoration {
-  /* Remove the inner padding in Chrome and Safari on macOS */
+[type="search"]::-webkit-search-decoration,
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-results-button,
+[type="search"]::-webkit-search-results-decoration {
+  /* Remove the default clear button, as a custom clear button exists */
   -webkit-appearance: none;
 }
 

src/widgets/counter/configuration.tsx

@@ -13,6 +13,7 @@ const Configuration = ({ id, options, setOptions }: ConfigurationProps) => {
         value={options.headline}
         label={t("common.headline")}
         className="mb-6"
+        type="text"
       />
     </>
   );

src/widgets/image/configuration.tsx

@@ -12,6 +12,8 @@ const Configuration = ({ id, options, setOptions }: ConfigurationProps) => {
         setValue={value => setOptions({ url: value })}
         value={options.url}
         label={t("widget.image.configuration.url")}
+        type="url"
+        autoComplete="url"
       />
     </>
   );

src/widgets/qr-code/configuration.tsx

@@ -14,11 +14,13 @@ const Configuration = ({ id, options, setOptions }: ConfigurationProps) => {
         value={options.headline}
         label={t("common.headline")}
         className="mb-6"
+        type="text"
       />
       <TextArea
         setValue={value => setOptions({ content: value })}
         value={options.content}
         label={t("widget.qr-code.configuration.content")}
+        rows={5}
       />
     </>
   );

src/widgets/search/configuration.tsx

@@ -16,12 +16,14 @@ const Configuration = ({ id, options, setOptions }: ConfigurationProps) => {
         value={options.title}
         label={t("widget.search.configuration.title")}
         className="mb-6"
+        type="text"
       />
       <Input
         setValue={value => setOptions({ pattern: value })}
         value={options.pattern}
         label={t("widget.search.configuration.pattern")}
         className="mb-6"
+        type="text"
       />
       <div>
         {providers.map(provider => (

src/widgets/search/index.tsx

@@ -34,6 +34,7 @@ const Search: React.FC<Props> = memo(({ id, setData, name, pattern }) => {
           setValue={setValue}
           onEnter={value => openSearchUrl(pattern, value, setValue)}
           clearOnEscape
+          type="search"
           aria-labelledby={`widget-${id}-headline`}
         />
         <Button

src/widgets/website/configuration.tsx

@@ -16,6 +16,8 @@ const Configuration = ({ id, options, setOptions }: ConfigurationProps) => {
         value={options.url}
         label={t("widget.website.configuration.url")}
         className="mb-6"
+        type="url"
+        autoComplete="url"
       />
       <div>
         {providers.map(provider => (