updates/fixes from the day

examples/unit-testing/dropdown.test.js

@@ -12,10 +12,28 @@ describe(`Dropdown`, () => {
 
     expect(text).toBeInTheDocument()
   })
-  it(`renders a focusable activator element`, () => {
+  it(`renders a focusable button that activates the dropdown`, () => {
+    const activatorText = `Dogs`
+    const items = [{
+      text: 'item 1',
+      url: '#'
+    }, {
+      text: 'item 2',
+      url: '#'
+    }]
+    const dropdown = render(<Dropdown activatorText={activatorText} items={items} />)
 
-  })
-  it(`sends focus to dropdown content when active`, () => {
+    const activator = dropdown.getByTestId('dropdown-activator')
+    activator.focus()
+
+    expect(activator).toHaveFocus()
+
+    fireEvent.click(activator)
+
+    const dropdownList = dropdown.getByTestId('dropdown-itemList')
 
+    const firstAnchor = dropdownList.querySelector('a')
+    expect(firstAnchor).toHaveFocus()
+
   })
 })

src/components/site-chrome/layout.scss

@@ -21,7 +21,7 @@ body {
 a, a:link, a:visited {
   color: #333;
 }
-.js-focus-visible :focus {
+.js-focus-visible :focus:not(.focus-visible) {
   outline: none;
 }
 .js-focus-visible :focus-visible {

src/slides/index.mdx

@@ -79,6 +79,7 @@ http://bit.ly/microsoft-inclusive-toolkit
 - Accessibility debugging
 - Accessibility in JavaScript apps
     - Focus management
+    - Client-side routing
     - Announcements
     - Semantic HTML
     - Unobtrusive motion