React में accessible modal dialog आप कैसे बनाएंगे?

जहां हो सके वहां showModal के साथ native dialog element इस्तेमाल कीजिए, क्योंकि उससे top layer, focus का फंसना और Escape का इंतजाम मुफ्त मिल जाता है। वरना आपको aria-modal के साथ role dialog चाहिए, एक label वाला heading, खुलने पर focus का dialog में जाना और बंद होने पर trigger पर लौटना, एक focus trap, Escape से बंद होना, और पीछे का हिस्सा inert ताकि screen readers और Tab वहां भटक न जाएं।

मेरा पहला कदम है इसे न बनाना। showModal के साथ native dialog element top layer संभाल लेता है, तो मैं z-index और overflow hidden वाले पूर्वजों से लड़ना बंद कर देता हूं, और वह मुझे मेरे किसी code के बिना Escape और पृष्ठभूमि का inert होना दे देता है। उसके ऊपर मैं फिर भी उसे label देता हूं, यानी heading की तरफ इशारा करता aria-labelledby, और खुलने पर focus किसी समझदार पहले element पर ले जाता हूं, आम तौर पर close button की जगह heading या पहला field। बंद होने पर मैं focus वापस उसी पर रखता हूं जिसने उसे खोला था, क्योंकि focus का body पर खो जाना ही वह चीज है जो keyboard वाले users को सच में भटका देती है। अगर browser या design की वजह से मुझे इसे खुद बनाना पड़े, तो वह aria-modal true के साथ role dialog होता है, Tab और Shift Tab पर एक असली focus trap, Escape और पीछे click से बंद होना, बाकी page पर inert, और ऐसा scroll रोकना जो layout न खिसकाए। मैं इसे पहले सिर्फ keyboard से जांचता हूं, फिर screen reader से, क्योंकि यह जोड़ी लगभग हर उस चीज को पकड़ लेती है जो कोई अपने आप चलने वाला checker चूक जाता है।