Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Popover] Add ariaHaspopup #2248

Merged
merged 3 commits into from
Nov 19, 2019
Merged

[Popover] Add ariaHaspopup #2248

merged 3 commits into from
Nov 19, 2019

Conversation

AndrewMusgrave
Copy link
Member

WHY are these changes introduced?

Fixes #2187

WHAT is this pull request doing?

  • Add prop
  • Consume prop
  • Use prop were it's needed in doc examples
  • Add accessibility docs

How to 🎩

Copy-paste this code in playground/Playground.tsx:
function PopoverWithActionListExample() {
  const [popoverActive, setPopoverActive] = useState(true);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    [],
  );

  const activator = (
    <Button onClick={togglePopoverActive} disclosure>
      More actions
    </Button>
  );

  return (
    <div style={{height: '250px'}}>
      <Popover
        active={popoverActive}
        activator={activator}
        onClose={togglePopoverActive}
        ariaHaspopop
      >
        <ActionList items={[{content: 'Import'}, {content: 'Export'}]} />
      </Popover>
    </div>
  );
}

🎩 checklist

@github-actions
Copy link
Contributor

github-actions bot commented Oct 7, 2019

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified6
Files potentially affected24

Details

All files potentially affected (total: 24)
📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Popover/Popover.tsx (total: 23)

Files potentially affected (total: 23)

📄 src/components/Popover/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Popover/set-activator-attributes.ts (total: 24)

Files potentially affected (total: 24)

🧩 src/components/Popover/tests/Popover.test.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Popover/tests/set-activator-attributes.test.ts (total: 0)

Files potentially affected (total: 0)


This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

@AndrewMusgrave AndrewMusgrave force-pushed the popover-haspopup branch 2 times, most recently from 4f0a743 to b969dcc Compare October 7, 2019 18:43
@@ -0,0 +1,23 @@
import {AriaAttributes} from 'react';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this chunk of code was never tested. When I was trying to add a few tests I kept getting stale dom nodes. I broke this utility into its own module so we can easily mock it in Popover.

@@ -1,9 +1,33 @@
import React from 'react';
import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
import {Popover} from '../Popover';
import * as SetActivatorAttributes from '../set-activator-attributes';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Importing like this to spyon the module

@AndrewMusgrave AndrewMusgrave force-pushed the popover-haspopup branch 2 times, most recently from de8e142 to e217898 Compare October 7, 2019 18:50
@AndrewMusgrave AndrewMusgrave marked this pull request as ready for review October 7, 2019 21:05
@dpersing dpersing requested a review from sadiesaurus October 7, 2019 21:48
@@ -415,6 +417,8 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili

Popovers usually contain an [option list](https://polaris.shopify.com/components/lists-and-tables/option-list) or an [action list](https://polaris.shopify.com/components/actions/action-list), but can also contain other controls or content.

A popover can contain many numerous types of content. Whether it's a menu, grid or something entirely different! When `aria-expanded` is applied to an element, `aria-haspopup` will default to `menu`. To assist screen readers you'll need to pass `ariaHaspopup` to `Popover`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few thoughts here:

  • I'd like to remove the "Whether it's..." fragment, since it doesn't reference other patterns or components.
  • In reference to aria-expanded and aria-haspopup, it's a bit more complicated. I think we could simplify this by saying something like, "The ariaHaspopup prop addsaria-haspopup="true" to the button. This should only be used when the popover contains a complex feature like an ARIA menu, grid, listbox, or similar features."
  • We typically want to use people-centered language, so we'd want to say "to assist people who use screen readers" instead of "to assist screen readers".

Let's chat about this one on Tuesday, and involve @sadiesaurus if she's available.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @sadiesaurus , what are your thoughts on this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heya Andrew! I agree with Devon's points. I'll make a suggestion for this paragraph which you can feel free to edit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's my stab at a rewrite! Though, I'm not certain if I've accurately captured the context, so let me know if something is wrong or missing.

Suggested change
A popover can contain many numerous types of content. Whether it's a menu, grid or something entirely different! When `aria-expanded` is applied to an element, `aria-haspopup` will default to `menu`. To assist screen readers you'll need to pass `ariaHaspopup` to `Popover`.
Popovers can contain many types of content. If a popover contains a complex feature such as an ARIA menu, grid, listbox, or similar feature, then use the `ariaHaspopup` prop. This adds `aria-haspopup="true"` to the button, which is helpful information for people who use screen readers.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks great! I made one small adjustment since you can provide more values than "true" to ariaHasPopup (boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog')

@AndrewMusgrave
Copy link
Member Author

cc/ @dpersing

Copy link
Contributor

@sadiesaurus sadiesaurus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One comment but otherwise looks good to me

@@ -415,6 +417,10 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili

Popovers usually contain an [option list](https://polaris.shopify.com/components/lists-and-tables/option-list) or an [action list](https://polaris.shopify.com/components/actions/action-list), but can also contain other controls or content.

A popover can contain many numerous types of content. Whether it's a menu, grid or something entirely different! When `aria-expanded` is applied to an element, `aria-haspopup` will default to `menu`. To assist screen readers you'll need to pass `ariaHaspopup` to `Popover`.

Popovers can contain many types of content. If a popover contains a complex feature such as an ARIA menu, grid, listbox, or similar feature, then use the `ariaHaspopup` prop. This adds `aria-haspopup` to the button, which is helpful information for people who use screen readers.
Copy link
Contributor

@sadiesaurus sadiesaurus Nov 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this section at line 422 meant to be removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a bad rebase, thanks for catching this 🙏

@AndrewMusgrave AndrewMusgrave force-pushed the popover-haspopup branch 2 times, most recently from 9cf6d12 to 8366d57 Compare November 19, 2019 17:33
@AndrewMusgrave AndrewMusgrave merged commit c271c4e into master Nov 19, 2019
@AndrewMusgrave AndrewMusgrave deleted the popover-haspopup branch November 19, 2019 17:57
@dleroux dleroux temporarily deployed to production December 4, 2019 14:42 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Popover] Action list accessibility enhancements
4 participants