ENH Better use of ARIA attributes

[emteknetnz]

Issue #245

The fixes a few of things noted in the issue:

• The Div containing the LinkField button has a role of button. The button inside there also has a the role of button.
• Disabled LinkFIeld have aria-disabled="false" applied to them.
• A DOM manipulation being done in react

Core issue was that that the dndkit attributes were mistakenly on a div instead of child drag handle which is specifically there for accessibility

Regarding aria-describedby is empty. It should point to the label. - The drag handle should now have something like aria-describedby="DndDescribedBy-0" which points to a hidden div that dndkit underneath the sortable links which will look like this

<div id="DndDescribedBy-0" style="display: none;">
  To pick up a draggable item, press the space bar.
  While dragging, use the arrow keys to move the item.
  Press space again to drop the item in its new position, or press escape to cancel.
</div>

[emteknetnz]

Removing this test because the aria-pressed attribute is now controlled by dndkit's attributes, not with custom code. In a jest context this fails though real-life it works fine

[emteknetnz]

dndkit will set a value of undefined for aria-pressed when its not being sorted which is kind of odd and the attribute won't show at all, so I've given it a default value of false instead.

[GuySartorelli]

The Div containing the LinkField button has a role of button. The button inside there also has a the role of button.

While that has been resolved, we now have the situation where there's nothing indicating for screen readers that pressing enter/space on the link element itself will open the edit modal. That's what the aria-role="button" was there for.

[GuySartorelli]

Seems to work well locally but I do have one concern below and one above.

[emteknetnz]

While that has been resolved, we now have the situation where there's nothing indicating for screen readers that pressing enter/space on the link element itself will open the edit modal. That's what the aria-role="button" was there for.

We don't to define role="button" because for the link itself there's an html <button> which is bound to the onclick handler

[GuySartorelli]

While that has been resolved, we now have the situation where there's nothing indicating for screen readers that pressing enter/space on the link element itself will open the edit modal. That's what the aria-role="button" was there for.

We don't to define role="button" because for the link itself there's an html <button> which is bound to the onclick handler

Ahhh yup my bad I missed that button somehow 😅

[GuySartorelli]

LGTM but has a merge conflict

[emteknetnz]

Done

[GuySartorelli]

Last lot of conflicts.

[GuySartorelli]

LGTM, still works well in combination with the other merged PRs.