Merge pull request #264 from creative-commoners/pulls/4/a-aria

ENH Better use of ARIA attributes

client/src/components/LinkField/tests/LinkField-test.js

@@ -99,10 +99,27 @@ test('LinkField will render disabled state if disabled is true', async () => {
   }) });
   await screen.findByText('Page title');
   const linkPicker = container.querySelectorAll('#link-picker__link-123');
-  expect(linkPicker[0]).toHaveAttribute('aria-disabled');
+  expect(linkPicker[0].getAttribute('aria-disabled')).toBe('true');
   expect(linkPicker[0]).toHaveClass('link-picker__link--disabled');
 });
 
+test('LinkField will have aria-disabled true if readonly is true', async () => {
+  const { container } = render(<LinkField {...makeProps({
+    ownerID: 1,
+    readonly: true
+  })}
+  />);
+  await doResolve({ json: () => ({
+    123: {
+      title: 'Page title',
+      typeKey: 'mylink',
+    }
+  }) });
+  await screen.findByText('Page title');
+  const linkPicker = container.querySelectorAll('#link-picker__link-123');
+  expect(linkPicker[0].getAttribute('aria-disabled')).toBe('true');
+});
+
 test('Empty disabled LinkField will display cannot edit message', async () => {
   const { container } = render(<LinkField {...makeProps({
     ownerID: 1,

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -79,15 +79,6 @@ const LinkPickerTitle = ({
     event.preventDefault();
   };
 
-  const handleIconKeyDown = (event) => {
-    if (!['Enter', 'Space'].includes(event.code)) {
-      return;
-    }
-    const el = event.target;
-    const newVal = el.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
-    el.setAttribute('aria-pressed', newVal);
-  };
-
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -112,18 +103,22 @@ const LinkPickerTitle = ({
   if ([versionStates.draft, versionStates.modified].includes(versionState)) {
     onUnpublishedVersionedState();
   }
-  // Remove the default tabindex="0" attribute from the sortable element because we're going to manually
-  // add this to the drag handle instead
-  delete attributes.tabIndex;
+
+  // dndkit will not set aria-pressed to undefined by default meaning it won't be an
+  // html attribute. it's a little weird so set it to default to false if it's not set
+  if (!attributes.hasOwnProperty('aria-pressed')) {
+    attributes['aria-pressed'] = false;
+  }
+
   const idAttr = `link-picker__link-${id}`;
   const Tag = isMulti ? 'li' : 'div';
   return <Tag
     className={className}
     ref={setNodeRef}
     style={style}
-    {...attributes}
     {...listeners}
     id={idAttr}
+    aria-disabled={readonly || disabled}
   >
     <Button
       aria-label={ariaLabel}
@@ -160,12 +155,11 @@ const LinkPickerTitle = ({
       }
     </Button>
     { (isMulti && !readonly && !disabled) && <div className="link-picker__drag-handle"
+        {...attributes}
         tabIndex="0"
         role="button"
-        aria-pressed="false"
         aria-controls={idAttr}
         aria-label="Sort Links"
-        onKeyDown={handleIconKeyDown}
     >
       <i
         className="font-icon-drag-handle"

client/src/components/LinkPicker/tests/LinkPickerTitle-test.js

@@ -1,7 +1,7 @@
 /* global jest, test */
 
 import React, { createRef } from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { LinkFieldContext } from 'components/LinkField/LinkField';
@@ -182,14 +182,3 @@ test('dnd handler is not displayed if link field is not MultiLinkField', () => {
   </LinkFieldContext.Provider>);
   expect(container.querySelectorAll('.link-picker__drag-handle')).toHaveLength(0);
 });
-
-test('keydown on dnd handler', async () => {
-  const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
-    <LinkPickerTitle {...makeProps({ isMulti: true })}/>
-  </LinkFieldContext.Provider>);
-  expect(container.querySelectorAll('.link-picker__drag-handle')).toHaveLength(1);
-  container.querySelector('.link-picker__drag-handle').focus();
-  fireEvent.keyDown(document.activeElement || document.body, { key: 'Enter', code: 'Enter', charCode: 13 });
-  expect(container.querySelector('.link-picker__drag-handle').getAttribute('aria-pressed')).toBe('true');
-  expect(container.querySelector('.link-picker__drag-handle').getAttribute('aria-label')).toBe('Sort Links');
-});