[#8769] Kiezradar: Allow creation and editing of kiezradars

[sevfurneaux]

Describe your changes
This PR adds the kiezradar filter list, new and editing pages.

Tasks

• PR name contains story or task reference
• Steps to recreate and test the changes
• Documentation (docs and inline)
• Tests (including n+1 and django_assert_num_queries where applicable)
• Changelog

[vellip]

Thanks for the first part of that story! Great work, I just left a few remarks where you might want to have a second look.

[hom3mad3]

do you think we need aria-live or some way to hand live status here? @vellip your thoughts?

[sevfurneaux]

@hom3mad3 I added aria-live="polite", what do you think?

[vellip]

aria-live should exist at the top level, not the loading indicator. It only announces when descendants change so putting it on a loading indicator will not announce any change as it will just always be the same text. You will want to...

• set the innermost dom node around dynamic content in a component that does fetching to aria-live="polite"

return (
  <>
    <h1>Title</h1>
    <p>Text</p>
    <div aria-live="polite">
      {data.length && (
        <ul>
          {data.map(i => <li>{i}</li>)}
        </ul>
      )}
    </div>
  </>
)

• have a loading indicator within the live-region
• have that loading indicator not be inserted on first render (because a live-region only announces changes to the DOM)
• instead have it be rendered in once you start the fetching in the useEffect (basically, initialise isLoading with false and call setIsLoading in the useEffect when fetching)

[hom3mad3]

@vellip thank you for the explanation, i learned a lot ❤️

[sevfurneaux]

Thanks @vellip, this is now updated 👍

[sevfurneaux]

@vellip @hom3mad3 @goapunk got the frontend build passing 🟢, but now there's a coverage/coveralls error 🔴 as the coverage decreased by -0.005% 😄. The .py changes were just renaming things:

• react_kiezradar.py
• urls.py
• views.py

Can we bypass this?

[hom3mad3]

@sevfurneaux thank you for the great work and patience with all those comments, it looks great! ✨ 🤗

[sevfurneaux]

@sevfurneaux thank you for the great work and patience with all those comments, it looks great! ✨ 🤗

A pleasure! Thanks for both your comments, @hom3mad3 and @vellip: learnt a lot 🫶

[hom3mad3]

Thanks for the first part of that story! Great work, I just left a few remarks where you might want to have a second look.

@vellip, when you have some time, could you give it a thumbs-up? I don’t want to dismiss your change for request just so I can merge. Even though we don’t have a code of conduct with specific rules (which isn't ideal), I want to make sure we're being considerate and giving everyone a final word.

[vellip]

Looks good, thank you so much!

[hom3mad3]

@sevfurneaux thank you for the great work and patience with all those comments, it looks great! ✨ 🤗

A pleasure! Thanks for both your comments, @hom3mad3 and @vellip: learnt a lot 🫶

same here! 📙🤓