fix(my-pages): documents a11y issues

apps/portals/my-pages/src/components/Header/Header.tsx

@@ -154,6 +154,7 @@ export const Header = ({ position, includeSearchInHeader = false }: Props) => {
                             size="small"
                             type="span"
                             variant="utility"
+                            aria-label={formatMessage(m.openDocuments)}
                             unfocusable
                           />
                           <span className={helperStyles.srOnly}>
@@ -183,6 +184,7 @@ export const Header = ({ position, includeSearchInHeader = false }: Props) => {
                             ? setMenuOpen(undefined)
                             : setMenuOpen('side')
                         }}
+                        aria-label={formatMessage(m.overview)}
                         ref={ref}
                       >
                         <Hidden below="sm">{formatMessage(m.overview)}</Hidden>

apps/portals/my-pages/src/components/SearchInput/SearchInput.tsx

@@ -130,6 +130,7 @@ export const SearchInput = ({
         <AsyncSearch
           ref={ref}
           id="my-pages-async-search"
+          ariaLabel={buttonAriaLabel}
           placeholder={placeholder}
           size={size === 'large' ? 'semi-large' : 'medium'}
           colored={!whiteMenuBackground}

libs/island-ui/core/src/lib/AsyncSearch/AsyncSearch.tsx

@@ -44,6 +44,7 @@ export type AsyncSearchOption = {
 export interface AsyncSearchProps {
   id?: string
   label?: string
+  ariaLabel?: string
   placeholder?: string
   options: AsyncSearchOption[]
   colored?: boolean
@@ -72,6 +73,7 @@ export const AsyncSearch = forwardRef<HTMLInputElement, AsyncSearchProps>(
     {
       id = 'asyncsearch-id',
       label,
+      ariaLabel,
       placeholder,
       size = 'medium',
       colored,
@@ -225,6 +227,7 @@ export const AsyncSearch = forwardRef<HTMLInputElement, AsyncSearchProps>(
               buttonProps={{
                 onFocus,
                 onBlur,
+                'aria-label': ariaLabel,
                 ...(onSubmit
                   ? {
                       onClick: () => {

libs/island-ui/core/src/lib/Button/Button.tsx

@@ -45,6 +45,7 @@ export const Button = forwardRef<
       <Box
         component={ReaButton}
         as={as ? (as as string) : variant === 'text' ? 'span' : 'button'}
+        role={as ? undefined : 'button'}
         ref={ref}
         value={value}
         name={name}

libs/island-ui/core/src/lib/Checkbox/Checkbox.tsx

@@ -12,6 +12,7 @@ export interface CheckboxProps {
   name?: string
   id?: string
   label?: React.ReactNode
+  ariaLabel?: string
   checked?: boolean
   disabled?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -38,6 +39,7 @@ interface AriaError {
 export const Checkbox = ({
   label,
   subLabel,
+  ariaLabel,
   labelVariant = 'default',
   name,
   id = name,
@@ -103,6 +105,7 @@ export const Checkbox = ({
         onChange={onChangeHandler}
         value={value}
         checked={checked}
+        aria-label={ariaLabel}
         {...(ariaError as AriaError)}
       />
       <label

libs/portals/my-pages/documents/src/components/DocumentRenderer/PdfDocument.tsx

@@ -53,6 +53,7 @@ export const PdfDocument: React.FC<PdfDocumentProps> = ({
             icon="remove"
             variant="ghost"
             size="small"
+            aria-label={formatMessage(messages.zoomIn)}
             onClick={() => setScalePDF(scalePDF - 0.1)}
             disabled={0.6 > scalePDF}
           />
@@ -61,6 +62,7 @@ export const PdfDocument: React.FC<PdfDocumentProps> = ({
             display="flex"
             justifyContent="center"
             alignItems="center"
+            aria-label={formatMessage(messages.zoomLevel)}
           >
             <Text variant="small">
               {((scalePDF / initScale) * 100).toFixed(0) + '%'}
@@ -71,6 +73,7 @@ export const PdfDocument: React.FC<PdfDocumentProps> = ({
             icon="add"
             variant="ghost"
             size="small"
+            aria-label={formatMessage(messages.zoomIn)}
             onClick={() => {
               setScalePDF(scalePDF + 0.1)
             }}
@@ -83,6 +86,7 @@ export const PdfDocument: React.FC<PdfDocumentProps> = ({
             icon="expand"
             variant="ghost"
             size="small"
+            aria-label={formatMessage(messages.expand)}
             onClick={() => expandCallback(true)}
           />
         ) : onClose ? (
@@ -91,6 +95,7 @@ export const PdfDocument: React.FC<PdfDocumentProps> = ({
             icon="close"
             variant="ghost"
             size="small"
+            aria-label={formatMessage(messages.close)}
             onClick={onClose}
           />
         ) : undefined}

libs/portals/my-pages/documents/src/screens/Overview/Overview.tsx

@@ -167,7 +167,7 @@ export const DocumentsOverview = () => {
                 <Box className={styles.checkboxWrap} marginRight={3}>
                   <Checkbox
                     name="checkbox-select-all"
-                    aria-label={formatMessage(messages.selectAll)}
+                    ariaLabel={formatMessage(messages.selectAll)}
                     checked={selectedLines.length > 0}
                     onChange={(e) => {
                       if (e.target.checked) {

libs/portals/my-pages/documents/src/utils/messages.ts

@@ -116,4 +116,24 @@ export const messages = defineMessages({
     id: 'sp.documents:search-label',
     defaultMessage: 'Leita',
   },
+  zoomIn: {
+    id: 'sp.documents:zoom-in',
+    defaultMessage: 'Þysja að',
+  },
+  zoomOut: {
+    id: 'sp.documents:zoom-out',
+    defaultMessage: 'Þysja frá',
+  },
+  zoomLevel: {
+    id: 'sp.documents:zoom-level',
+    defaultMessage: 'Þysjuhlutfall',
+  },
+  expand: {
+    id: 'sp.documents:expand',
+    defaultMessage: 'Stækka',
+  },
+  close: {
+    id: 'sp.documents:close',
+    defaultMessage: 'Loka',
+  },
 })