swup / a11y-plugin Goto Github PK

Description of the issue

I just installed a11y-plugin in a fresh typescript project and got this error:

Could not find a declaration file for module '@swup/a11y-plugin'.

How to reproduce the issue

• Start a new ts project
• Install @swup/a11y-plugin

...seems like it's due to the missing toplevel "types" property. I thought it wasn't necessary anymore due to us providing it in the "exports" field anyways, but adding it made the error go away in VSCode.

Describe the problem

Intuitively, I would have thought that this CSS should hide any outline on the <main> element:

main:focus {
  outline: none;
}

But in the docs it recommends this approach:

main[tabindex="-1"] {
  outline: none;
}

In my tests, it works well with the simple :focus selector. Is there a reason for the [tabindex] form being chosen in the docs?

"SwupA11YPlugin" is writen with a capital Y in the code, but the example has a small y

const swup = new Swup({
plugins: [new SwupA11yPlugin()]
});

should be:

const swup = new Swup({
plugins: [new SwupA11YPlugin()]
});

or the code changed to have "SwupA11yPlugin"

Describe the problem

• Some visits don't need to reset focus to the main element, e.g. fragment visits like filter UIs
• Ideally, the custom focus target could be overwritten per visit
• The fragment plugin and users can then just set visit.focus = '#list' or similar

Describe the proposed solution

• New key in visit object: visit.focus — or maybe nested/grouped somewhere?
• New hook content:focus that can be replaced

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Describe the problem

When using in-site app views that alter the URL but are being ignored by swup due to the use of resolveUrl, a11y plugin doesn't announce anything, since there is no swup visit happening.

Describe the proposed solution

It would be handy to be able to manually trigger announcements:

import SwupA11yPlugin from "@swup/a11y-plugin";
const swup = new Swup({
  plugins: [
    new SwupA11yPlugin(),
  ],
});

// sometime later:
createHistoryRecord(newUrl);
swup.say?.(`Navigated to filter ${currentFilterName}`);

How important is this feature to you?

• Nice to have

Description of the issue

• The check for reduced motion preference is implemented in a way to not respect the current setting
• We're now also doing the opposite, i.e. re-enabling animations even when they're already disabled
• Practically, this means that popstate visits are now always animated if this option is enabled

How to reproduce the issue

• Enabled respectReducedMotion
• Trigger a history visit
• It's animated

Evaluate whether we should disable transitions for devices that request reduced motion:

• Pro: Conceptually, it's well within this plugin's core idea
• Con: Technically, this belongs in CSS
• Con: Turning off animations isn't reducing but removing motion completely
• Probably make this an optional feature turned off by default

Details

Revisiting the reduced motion media query

Example code

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  .transition-fade {
    transition-duration: 0.001ms !important;
  }
}

Describe the problem

• Currently, announcement templates are configured once
• Navigating to a page with a different lang will not change the language of announcements

Describe the proposed solutions

Tending towards option 1, or a combination of 1 and 2.

1. Allow keying the announcement templates by language: { en: 'Navigated to', de: 'Seite geladen' }
2. Create a hook content:announce to modify these on the fly
3. Read the announcement templates from the DOM: <meta name="swup-a11y-announce" content="Seite geladen">

Alternatives considered

• Hard-reloading on language change
• Possible, but not a great user experience by any means

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it